This is a small web app I built called Badger. It’s up and running, so please check it out! This project was an exercise in interaction design at the finest level of detail, and it taught me a lot about designing with subtle (and some not-so-subtle) animation to direct attention and enhance user experience from moment to moment. It was also fun to follow the design phase with some programming!
My starting point was “app that generates colorful badges, with gamification elements.” From that simple idea, I started with some ideation about user flows.
After getting a rough idea of the flows, I moved into sketching possibilities for how these interactions might look.
I decided to get some practice with Figma for making higher-fidelity mockups of the screens and the transitions between various app states based on user actions. This was my first time using Figma for a real project! There was a bit of a learning curve, but I managed.
This screenshot is part of the code responsible for animating the progress bar when creating a new badge. The full codebase is available on Github.
Ultimately, it’s hard to get a sense of animated interactions from static screenshots and text. I hope you’ll check out the live app!