How We Designed a Gamification Platform to Keep Our Users Engaged
Nothing fuels determination quite like recognition. At EvolveYou, we have seen firsthand how rewarding hard work and consistency propels our users forward, keeping them engaged and committed to their fitness journeys. Since our app’s launch in 2019, we’ve taken a major step forward, evolving from simple rewards to an exciting new feature: Achievements. This comprehensive trophy cabinet adds a fun, gamified element to fitness, promoting healthy competition and motivation.
The Why: Our Desire to Launch Achievements
From program stars to free t-shirts, we’ve always believed in rewarding our users. The data and overwhelming enthusiasm from them proved that these incentives were working. But why stop there? We pushed the envelope with Achievements, transforming fitness into an exciting, rewarding experience like never before. Whether it’s completing workouts or reaching new milestones, Achievements make it all more enjoyable.
Let’s dive into the process that brought this feature to life
Step 1: Listening and Learning
We sat down with dozens of our users, diving deep into what motivates them and what they wanted in rewards. From Miro discussions to Typeform surveys, we discovered key insights: Badges were a big hit. Consistency was the main motivator. And rewards had to be special, not just handed out like candy.
Step 2: Designing the Badges | Crafting the Perfect Design
The badge design process was a balancing act as we needed the final design to fulfil many different goals. It needed to strike the right balance between being fun, yet mature, whilst also remaining aligned to the EY brand. It needed to be flexible enough to work for future ideas such as community challenges or limited edition badges (like International Yoga day), yet remain consistent enough to be recognised as one cohesive style. And finally, it needed to stand out from other competitors.
Competitor Research
Researching other apps and services — both in the fitness space and other industries, that awards their users with badges or achievements, gave us insight into what’s already out there and how we can stand out with our own individual style. For example, Apple Health does very abstract but colourful 3D badges. Duolingo does simple and playful 2D achievements. And Nike Training has a unique geometric style of their own.
First and Second Rounds of Iterations & Testing
Our user testing went through multiple rounds, involving choices between traditional motifs and abstract designs, creativity, and fitness associations. We ended up creating 3 different styles to measure what users preferred. Would our users prefer a traditional medal/trophy motif or something more abstract? Would they want repetition or a surprise every time?
From our first round of user testing, we learned a majority preferred the vibe and creativity of option 3. However, many liked the fitness association of option 1 and 2 because if they were to share their achievement on social media; they wanted their friends to identify it as a fitness achievement without the context of EvolveYou. This was key information that helped the next round of iteration.
Second round of iterations & Testing
Round 2 iterations is where we started to bring in that balance of cohesion and creativity. We brought in consistent shape but ensured we had the flexibility to change the colours and visual elements inside the badge. We wanted to stay fun but bring in more maturity to remain playful and stray away from being too childish. Finally for imagery we decided upon weights or fire as these are commonly associated with fitness.
Final Designs
Hours of speaking to users and showing them different ideas through workshops and surveys, helped us evolve the design to what it is today, merging the best of all worlds. Below you can see the progressions from a jumble of different elements to the inclusion of a fitness motif to a final refinement of consistency between shape, colour, and simplicity.
The final badges mirror the user’s progress in their fitness journey as they progress into bigger weights — evolving just like our users and symbolising a journey from smaller to bigger achievements.
(Subtitle to image) The style, while consistent, gives us just enough flexibility to adapt the badge to specific events such as milestones, streak, and challenges.
Step 3: Animating the Badges
The next step was to apply a touch of animation. Applying animation to your app elevates the user experience and creates moments of delight by making it feel more premium and more fun. Rive was the best choice for us as it’s the rising star in bridging animation between design and code. What’s more it’s super easy to use and the results are built for runtime (faster and smaller than Lottie).
The challenge
We then needed to apply animations to 20 different badges, each having 3 different animations (3 different trigger points) into the app. We also wanted to make our 2D designs “feel” a bit 3D without having time or capacity to create 3D assets. Lastly, we’re working with an app, so we needed the animations to load fast, especially if we’re going to store all these badges in one trophy cabinet page.
The Workflow and Constraints
Working in an agile environment, Rive allowed us to adapt, experiment, and make changes efficiently. If our development team had issues with masks or alignment, as the designer, I could easily find the problem in Rive and make the changes quickly and then apply the changes across the other 20 badges and 60 animations. Ultimately we found that this tool eased the process without hurting our timelines and most importantly, our mental health…
After we launched, Rive released the ability to integrate Unity into your animation process. This has opened up the possibility for us to turn our badges into 3D assets in the future and apply our Rive animations to them (which we are excited to tackle one day). You can’t do everything you can do in After Effects, but you can do everything you need for UI animation and more. Check out how Duolingo used Rive for their app.
Conclusion
We took a risk by using new tools and new workflows, and while still we have a lot to learn and mistakes to make, those risks helped us open the door to a new era of the EvolveYou app; one of elevated design, improved user experience, and most importantly, a fun way to reward our amazing users who inspire us daily.
