Beachbody On Demand: Gamification
Beachbody On Demand launched Gamification in March 2022. This was a cross-platform initiative that touched mobile apps, web, streaming devices and the Beachbody Bike. As the project lead, I championed the design team’s vision across departments from inception to completion and managed junior designers.
The objective of this initiative was to delight users by giving them badges centered on the pillars of the business — completing Beachbody On Demand programs, and tracking Shakeology, workouts, and bike rides. Badges were also shareable to promote accountability.
ROLE: Project Lead; UI Designer
Badges Home
The trophy case: ‘Up Next’ displays up to 3 badges a user is on their way to earning, followed by earned badges in color and unearned badges in grayscale.
Celebration Modal
When a user earns a badge, they will see a celebration modal congratulating them when they return to the app or website. They can initiate sharing from this screen.
Badge Detail View
A stacked view of all milestones of the same type listed chronologically from the first to the 5000th. A user’s progress towards the next milestone is also highlighted.
Gamification on
Desktop & Mobile Web
Badges Access Point
Users can access badges within the account section. This gives an overview of all their personal stats, recent activity and progress, which tie into earning badges.
Gamification on
the Beachbody Bike
Cross-Platform Parity
Whether you access gamification on your phone, laptop, bike or TV, all of your progress stays up to date.
Unique Layout Adaptation
The UI was reconfigured to better suit the dark, horizontal dark touchscreen bike experience.
This project led to an overall increase in brand engagement. Users immediately started sharing their virtual badges in BODgroups and on social media.
Within the first 7 days, we saw a very healthy social sharing of 11k+ badges.
Customers loved it and wanted more.
Content
Badge Sample Sets and Logic
Colors for badges of a similar type change as your badges level up. A user will always start out with a white badge progressing through 18 levels, culminating in metallics.
(Badge design collaboration with Chris Tirabassi)
All badges start out in gray scale and fill with color once a user earns them.
Share Screen Samples
When a user earns a badge, they are shown a colorful, engaging celebration modal highlighting their achievement. From here, they can brag about their badge with multiple share options. Each celebration modal has unique copy and a unique background, for each milestone.
Process & Ideation
Competitive Research
Knowing what Beachbody’s competitors were doing was crucial to help stay ahead of trends and figure out how to differentiate our user’s gamification experience.
Preliminary User Flows
Beachbody’s suite of products are part of a complex ecosystem, so it was crucial to nail down the various access points to ensure a seamless user experience.
Wireframes for Sharing Flow
This flow was vital to get right. Users can share badges with friends on BODgroups and social media from the “Share To” menu on each badge. They can also download the image to their device to customize what they’re sharing.
COLLABORATORS: Chris Tirabassi, UI + Badge Designer; David Ramirez, UI Designer; Sarah Zuk, Product Manager; Miz Stunja, Product Manager