Download to Edit, Button Animation

In this small project, I needed to create a transition from downloading a template to being able to edit the template. I was happy with the solution I came up with.

For the 1st state, the user is given the option to download the template. For the 2nd state, the button transforms to a square and indicates a loading process. When the loading process is complete, then the button transforms to the next state. For the 3rd state, the button gives the user the ability to edit template.

Initially we did not have this button animation, we only had a download button. We learned that users were a little lost and had a difficult time finding the template they just downloaded. We also learned that once users found the template then they would edit it. So it made sense to create an easy option for the user to navigate to editing the template. Once we knew what the solutions should be, creating the animation was the fun part of the work.