A multi-platform gamification feature that makes reaching your fitness goals fun and engaging.
In early 2021, I joined Beachbody to help design a cross-platform gamification feature that would motivate users to achieve their fitness goals. The feature needed to encourage milestone completion while fostering a supportive community environment where users could celebrate each other's fitness journeys.
Research, Ideation, Wireframes, Interaction, UI Design
Team: Design Lead, 2 Product Designers, 1 Product Manager, Engineering
May 2021 - March 2022
Beachbody lacked any system to recognize and reward users' fitness achievements—a significant gap in their product offering. Users consistently reported that visual recognition of their progress would increase motivation and help them maintain their fitness routines. With every major competitor already offering reward systems, addressing this need became a business priority. Our challenge was to create an engaging gamification system that would improve user retention while differentiating from competitors' offerings.
Our solution was a focused gamification system designed for both fitness newcomers and enthusiasts. The MVP centered on two core components:
This approach not only displayed current achievements but also visualized the path to upcoming milestones, creating anticipation and motivation to continue progress.
At the onset of this project, it was vital for me to begin to understand the psychology of how users engage with Gamification in general and why it becomes an essential factor in the decision to continue to use certain products.
I found through my research that Gamification primarily works because it triggers a real and powerful human response within users. The act of having a goal, reaching it, being rewarded for it, and then having a subsequent goal established once the last has been achieved creates an exciting and intriguing cycle that helps drive user engagement.
These experiences are often ALWAYS positive, leading to user engagement, loyalty, and higher revenue.
The question of how much Gamification should factor into a company’s business plan is clear. It turns out it’s not just a gimmick, with most of fortune 500 companies already having some established form of gaming/rewards system and 50% of startups integrating gaming elements into their overall strategy.
Now that I knew the business implications of why Gamification is a game-changer in the market, I decided it’d be best to delve into how the top players were doing it justice. The following are highlights of my findings, which became the jump-off point for informing potential directions to take with the feature.
Nike’s running app, Nike Run Club is one of the world’s standout gamified products. It acheives this by tapping into a users natural competetive drive. It tracks running statistics and measures progress toward specific goals. It compells users to keep up their activity and beat their previous record with the next go around.
In addition to the encouragement, it also has the capacity to link a users social media channels so that they may boast or compete with friends. In Nike's case, this drives engagment by getting people to run, which ultimatley drives up their sales.
Gamiciation seems to work especially well when your content is dense and vast. So is the case for learning - say new language. Duolingo makes this fun and addictive by breaking lessons up into levels which you earn a badge for completing as well as leveling up.
The dashboard maps out the course with each acheivment along the way. There is clear navigation as to which 'levels' a user can advance to. The app also tracks streaks for daily engagment which also earns users points in case they get stuck or fail a level.
Apple differentiates itself in the fitness space as most of its gamified features are tied to its watch product. Users set daily fitness goals for themselves and further motivate them since every step is tracked and counted toward this goal. Visually, goals are tracked through the concept of rings - close all of your rings, reach your goal. This gives users more impetus to get up and move.
Apple also includes unique challenges and awards surrounding certain events, times of the year, or specific activities.
It was clear through thorough research that gamified experiences draw in users by appealing to their innate desire for achievement and recognition, in terms of integrating gamification into Beachbody's products required, the correct approach. The team felt that based on our research, specifically within the fitness sphere, a system of badges or medals would help drive the thrill of achievement. However, simply attaching badges to specific actions didn't seem like enough to keep users engaged long term.
Since having a more structured path to achievement is more familiar to users and can seem like a clear path to victory, the concern was that it might also leave some users frustrated with a lack of control. By using connected devices like Apple Watch, Peleton, Fitbit, and their respective apps, users are allowed more flexibility and autonomy by setting personal goals for themselves. These are daily goals and, if completed, count toward a streak. This keeps users engaged and motivated by trying to maintain their personal best and challenge themselves as they progress.
To strike a balance between earning badges and providing users autonomy, the team thought it best to use the concept of Streaks to give users more control within the gamification feature. Here, users could set personal goals within different facets of Beachbody's product offering, namely workouts and Shakeology tracking (Beachbody branded line of protein shakes). Completing these goals would also count toward a Streak that the user would strive to maintain.
Now that the team had a grasp on how to provide users with a gratifying and engaging gamified experience, we began to expand those established concepts through ideation.
After a long research process and formulating early concepts for how Gamification could help beef up user engagement, myself and the team began mapping out how the various components of the feature would function on multiple platforms.
Before we began delving into any wireframing, It was essential to consider how the feature would factor into the suite of Beachbody products. I worked closely with product management and the head of UX to map out the current flows for a workout, meal, and shake tracking and identify where the feature would live and at what point users could earn badges.
After much debate, stakeholders decided that a user's earned badge repository would only be accessed through their profile. Once achieving a specific workout or tracking milestone, they would be awarded a badge. Notification of the achievement would happen immediately after completing a workout video or using the tracking feature. Once attained, users would have the ability to share the badge on social media or with a curated group of Beachbody members with similar goals (if applicable). The logic would also retroactively search for the user's historical data and award a badge accordingly.
After working through the initial flows for integration, the team began to wireframe the more significant components of the feature, namely badge sharing, and Streaks. It was essential to prioritize these as they would need the most product and dev input and take a significant amount of time for the team to work through.
Nailing down the badge sharing flow was crucial for getting users to engage with the feature. With the help of a celebration modal that would announce when a badge was won, users would then be prompted to share that recognition with others.
Streaks proved to be more involved as it required additional functionality to set or edit personal goals. The other aspect of this was to find a visually appealing way to display progress tracking that would draw users to interact with the feature. We tried various ways to handle this but ultimately landed on rings to represent weekly progress for each goal a user opted to set up.
Once we had worked through the main components of the feature, we proceeded to create a functioning prototype in Figma, which we used to obtain feedback from users. This was an invaluable step in the process as it identified critical issues the team needed to address before moving ahead.
The initial concept for the feature was to have a central location on a user's account page where they would be able to access gamification via the "View all" link. From here, they could get a glimpse of all badges earned and Streaks progress. As the concept for Streaks evolved, the case for making it a separate component outside of its badges grouping became apparent. Therefore we decided to test two options with users, one with badges and streaks grouped together and the other with separate access points from the account page.
After testing, feedback on this matter proved that users saw Streaks as valuable and felt like the tool would help them stay more motivated. As such, the team thought it best to keep them separate. With later iterations of Streaks, the access point became more pared down as not to take away from the celebratory feeling the badges would ultimately have.
Since early stakeholder input was unwavering regarding account being the only access point to the feature, the team's concern was that this would affect discoverability for most users. Testing confirmed that finding the feature was not intuitive. Most went to other parts of the app, and many had to be told where to access it.
To optimize the feature's discoverability, we decided to create an option to place access points to badges and Streaks right on the app's homepage. For badges, it was important that the module here not be a regurgitation of what was displayed on account but a more current snapshot of progress toward a next achievement milestone. This creates more motivation for users to continue to work towards their next goal.
Most UI elements were pulled directly from the Beachbody design system and incorporated into the features' user flows. The team was allowed some creative liberties with the design of the actual badges. A designer on the team who was more proficient with illustration took the helm on this and created a color-coded system of multiple badge types. Since a celebration modal signifies the user of an earned badge, fun and bright backgrounds were essential to making the moment feel special. I assisted in selecting backgrounds for each badge that I felt would complement it best.
Once an established system of badges was approved, the team could gauge if their design would impact the UI visually and adjust it accordingly. Below are some walkthroughs of the finalized components of the feature.
Orients and provides the user with the necessary access point to the feature. Users have access to their “trophy case” from the account page, where they can see badges they’ve earned and ones they have yet to achieve. Also added is the ability to be notified when a badge is earned via push notifications.
Allows users to access the celebration modal from their “trophy case” so they can share the achievement at any time. There is also the ability to share to a BOD Group (an invitation-only group of Beachbody members with common fitness goals) or save a copy of the modal to your device.
I knew from the get-go that incorporating a gamified experience into an established brand such as Beachbody would take careful consideration in how it was implemented. Having a long research period to ascertain how gamification factors into business impact were crucial, as the company seemed to be late in the game. Through my research, I assessed and conceptualized how to integrate a gamified experience that will keep the Beachbody user engaged and excited about achieving their fitness goals.
Though there were numerous roadblocks on the road to the launch of the feature, I recognized that adaptation under challenging situations is an asset. Timelines get pushed back, feature descoping and last-minute enhancements are never easy to digest when you've worked countless hours to produce a solid feature or product. However, providing quick solutions in the interim is sometimes necessary when it comes to your stakeholders' behest.