FitXR 2.5
FitXR is a leading virtual reality fitness app available on Meta Quest, offering an immersive workout experience with activities like boxing, combat, sculpt, dancing, and HIIT. It features 1,000+ classes led by professional trainers in various virtual environments. We redesigned the whole app that leads to some improvements in key metrics.
Role:
Product Designer
Responsibilities:
Problem Discovery, Product Strategy, User Research, UI & UX Design
What was wrong with the previous version of FitXR
According to existing research, FitXR is perceived as less premium compared to competitors like Supernatural. Many respondents likened FitXR’s graphics to older console games that feel outdated.
The absence of high-quality graphics has led users to opt for other fitness VR apps.
“This feels like I’m in a bowling alley from the 90s.”
"First impression is that is very dark, doesn’t feel like a working out environment"
“The background is kind of basic, it’s not impressive.”
These perceptions point to deeper issues in FitXR's ability to meet user expectations. Competing apps, such as Supernatural, Les Mills Bodycombat, and Beat Saber offer not only superior graphics but also seamless onboarding and engaging experiences. To remain competitive, FitXR must address both the visual shortcomings and the broader user experience gaps to enhance its appeal in the growing VR fitness market.
In addition to that, the previous version did not have proper mechanics to retain users. The retention mechanics were limited to streaks and goals hit which were unclear and clunky. Therefore, the company set out a plan to improve the overall experience. Based on the findings from the previous research, we grouped the issues we want to solve into three areas.
Lack of sufficient onboarding and tutorial.
During onboarding, users are presented with a lengthy, static tutorial that is difficult to read through. As a result, most users tend to skip ahead to jump straight into the action. Additionally, many of the tips provided are already familiar to users.
Poor visual coherence and information architecture across different screens.
The current information architecture across different screens is cluttered and confusing, making navigation difficult. Users often struggle to find what they need.
No proper retention mechanics in place.
The app relies on streaks to encourage users to return daily. However, the lack of a clear flow makes it difficult for users to understand how the streak system works.
One designer to rule them all
Before diving into the case study, I want to highlight the key challenges I faced with FitXR 2.5. This project kicked off at the start of the year with an August release target. Initially, four designers were spread across three teams: Onboarding, Home & Content, and Retention. I was assigned to the Home & Content team and the others were assigned to Onboarding and Retention teams. However, as the project progressed, I became the sole designer working across all three teams after the others left the company. This required me to collaborate closely with multiple stakeholders and ensure design alignment across the entire project—all under a tight deadline.
Although 8 months might seem like a long timeline, it quickly became a race against time given the scale of the project. We weren’t just iterating on an existing app; we were rebuilding it from the ground up, removing the current logic and implementation to create something entirely new. FitXR 2.5 also introduced a completely different tech stack compared to its predecessor, adding to the complexity. As the sole designer, I employed several strategies to manage this massive project:
Designing scalable systems
Since the goal was to build a new app, creating robust and scalable components was critical. This helped the engineering team implement designs quickly while maintaining consistency. I built a design system from scratch and worked closely with engineers to develop reusable components that could be easily integrated into the codebase.
Rapid prototyping
With tight deadlines, it was essential to gain alignment and feedback as quickly as possible. I produced tons of prototypes and shared videos to communicate ideas with key stakeholders, including PMs, engineers, QA, data, content, and leadership. Given the fully remote setup, clear and frequent communication was key to keeping everyone on the same page.
Hands-on involvement
At times, I contributed directly to implementing the design into code, leveraging my engineering skills to unblock the team and accelerate the development process. I also managed the translations for the new app, coordinating with external agencies and setting up the necessary files to ensure smooth implementation.
Now, let’s dive deeper into each of the key challenges and how I tackled them.
Issue 1: Lack of sufficient onboarding and tutorial.
One of the most common pieces of feedback from users about the previous onboarding experience was the dark environment, which many users hate. They likened the environment with something in the olden days.
Old onboarding flow
In addition to the unappealing environment, the onboarding flow lacked a "wow" factor that could effectively motivate users to start the free trial. The introduction to app features was presented through a series of 2D pop-up windows that users have to repeatedly click through, making the experience feel static and overly long. For a VR app, this flat, uninspiring approach falls short, causing many users to skip onboarding entirely.
The final stage of onboarding, where users encounter the Upsell and Pricing screens, added another friction. Many users were unclear about the "Start Free Trial" button in the Upsell screen, thinking they were being asked to pay for additional packages, like music or trainer bundles. Additionally, the screen layout was not intuitive—most users did not realise they need to scroll to see all available options, and much of the information presented was either redundant or unconvincing. When users reached the Pricing screen, the price itself was not a major concern, but they felt like they were being asked to commit to FitXR without enough information to make a decision. It was also unclear that they needed to select a plan and click "Continue to Free Trial" to move forward, creating unnecessary friction in the onboarding process.
Improving the onboarding experience
My role in the onboarding team was to create smooth collaboration between the art, engineering, and QA teams so that the entire onboarding experience feels cohesive and seamless. Whilst the art team was responsible for developing all assets for the new onboarding, including loading animations, environments, targets, tutorials, and the AI assistant, Atlas, I was responsible for designing the UI for onboarding screens.
To streamline the process, I created a master storyboard that broke the onboarding flow into smaller sequences. This approach allowed the team to understand key checkpoints throughout the user journey, enabling users to resume from where they left off if they exited midway. For example, the storyboard detailed how the environment should change during certain moments and scripted what Atlas, the AI assistant, would say at critical points. This master storyboard served as the single source of truth, ensuring alignment and consistency across all teams involved in the onboarding process. I also conducted a workshop with the engineering and art team to coordinate and ensure that everyone is on the same page.
The new experience for FitXR 2.5 aims to solve three critical parts of onboarding: improving the environment, learning the movements, and convincing users to start the free trial. Let’s go deeper one by one.
Better environment for first time users
With the master storyboard in place, the entire onboarding process is mapped out into different sequences, providing the team with a clear understanding of what should happen at each moment. The art team did an amazing job creating a new environment called The Deck, featuring bright colours and a large viewing window overlooking the world outside. Additionally, we introduced an interactive loading animation, where users are prompted to hit it to start the onboarding sequences, enhancing engagement right from the start. On top of that, a new AI assistant called Atlas will greet users, adding a nice touch to the experience.
Teaching basic moves to first time users
For the new onboarding, we implemented volumetric capture using a real trainer video to teach new users basic moves in a boxing class. Unlike the previous tutorial which feels static, the new version is far more immersive, as the trainer directly explains the targets to users, allowing them to practise the moves immediately. This creates a more engaging and hands-on learning experience.
Convincing people to start the free trial
As part of the 2.5 version, I was responsible for redesigning the Upsell and Pricing screens. For the Upsell screen, I significantly reduced the amount of text and replaced it with videos to visually explain each feature. Additionally, I changed the CTA label from "Start free trial" to "Continue," since users still have another step before the free trial can begin. On the Pricing screen, I added a section explaining the timeline of the free trial, emphasising that users will pay nothing today. I also updated the visuals to align with the overall 2.5 look and feel, ensuring consistency throughout the design.
In the previous onboarding, a major issue with the checkbox design prevented users from continuing after entering their email. The problem stemmed from the unusual checkbox visual, which did not display a checkmark when selected. I resolved this by restoring the checkmark icon when the checkbox is selected, ensuring users could clearly see when it was active and proceed without confusion. Here is the outline of the new entire onboarding flow:
Issue 2: Poor visual coherence and information architecture across different screens.
When users open the app, they are greeted by the Home screen, which serves as the primary hub for discovering classes to play. From this screen, users can navigate through various options:
Featured classes
Collections
Jump right in
Hero banner
Search
Recommended classes
Saved classes
Previously played classes
Explore
However, the previous Home screen's design suffers from clutter, offering too many options without a clear visual hierarchy. This not only overwhelms users but also increases cognitive load. Below are some of the key issues identified:
Outdated visual styles
The existing app uses a visual language that feels outdated and lacks a premium feeling. The buttons, icons, and UI elements often do not create a visual harmony.
Stacked navigation
The stacked navigation doesn't align with common design standards, leading to confusion. Inconsistent states make it difficult for users to recognise clickable areas. The absence of icons further complicates the navigation, making it harder to identify content in each menu.
Inconsistent system states
The handling of states, such as hover and active/selected, lacks consistency. Some selections are highlighted with a stroke or border, while others use filled colours. This inconsistency extends to the varied colours used for active states, creating an unpredictable experience for users.
Inconsistent button order
The order of buttons is inconsistent throughout the app. Although users can generally recognise the primary call to action (CTA), the irregular button placement adds unnecessary cognitive load, making decisions more difficult.
Lack of contrast
In several instances, the contrast between the background and text is insufficient, reducing legibility and making the content less accessible, especially for users with visual impairments.
Inconsistent colours and text styles
The app uses too many competing colours across different screens. These variations don't work harmoniously, making it harder for users to distinguish the primary CTA and further adding to their cognitive load.. The excessive variety of text styles harms readability and creates visual clutter. This inconsistency negatively impacts the user experience, leads to slower loading times, and poses potential accessibility challenges. Additionally, it dilutes the brand's cohesive identity.
Redesigned a whole new user experience
In the next section, I will give a detailed walkthrough of how I improved the user experience in FitXR 2.5.
Applied glassmorphism style
At the start of the 2.5 project, the art and design team agreed to adopt glassmorphism to enhance the visual appeal. We believed the glass effect would add a premium feel and complement the brighter, more colorful environment, as well as the surrounding 3D elements. I prototyped several glassmorphism styles, exploring both light and dark themes. After discussions, we chose the dark theme for its comfort in VR and reduced eye strain.
Implementing the glass effect presented some challenges. The previous app used UIML (Unity), but for 2.5 we switched to Vuplex to render the UI as a webview. This change caused some technical issues, but by collaborating with engineering, we fine-tuned translucency, texture, and colour to balance transparency with legibility.
Simplified navigation and content structure
The existing navigation was confusing, lacking icons and increasing cognitive load. I simplified it using a familiar pattern, reducing it to five main items and adding icons to each for clearer functionality recognition.
I also revamped the screen layouts to improve visual balance and enhance content hierarchy, making the interface easier to navigate.
In addition to the navigation, I revamped the layout on all screens to improve the visual balance and help users understand the content hierarchy.
Created consistent system states
I mapped all component states, such as hover and selection, into a scalable design system. This allowed the engineering team to reuse styles efficiently, speeding up development and improving user interaction consistency.
Made button order consistent
To maintain consistency, I standardised button placement, ensuring the primary CTA always appears on the right. This not only improves visual consistency but also clarifies user actions.
Improving colours and text styles
I designed a new colour scheme and text styles, reducing their number to create a cohesive look. I improved content hierarchy by fine-tuning text size, spacing, and line height, enhancing both readability and visual appeal.
Issue 3: No proper retention mechanics in place.
Before version 2.5, retention relied on streaks and weekly goals, but the UX was unclear. To address this, we introduced daily challenges, allowing users to complete classes and earn rewards. New screens were added to summarise users' activity and reinforce a sense of progress.
Users can now complete two daily challenges and unlock rewards like gloves, avatar frames, and badges. Progress can be tracked via metrics such as classes completed, minutes trained, streaks, and medals earned. Medals, awarded based on a scoring system called Move Points, range from bronze to platinum. The revamped mechanics have been well-received, leading to increased user activity and engagement.
I also introduced a reward unlock moment where users can see the reward in 3D and equip them directly. It creates a fun and immersive experience for users.
In addition to the challenge mechanic, I also designed a screen to request a review from users. Reviews are important to improve the app credibility in the Meta Quest Store page. As a reward, users will receive a pair of gloves for completing the review. This worked really well where we observed a massive increase in the number of 5 stars rating.
User feedback & business impact
So, what did the users say after we released FitXR 2.5? There were mixed feelings about the new look and feel. There were a small number of existing users who prefer the old one but many love the new update!
“Very excited about the update and the graphics! I think it looks great!”
“Great job, FitXR! This was a major step forward in solidifying your status as one of the best fitness apps. Thank you!”
“Loving the update. I know it’s not everyone's cup of tea but I’m in love with it. Going from how it was with BoxVR to now. In love 🥰”
“When you first enter the deck. It’s lovely and lots of colors..”
In term of business impact, the 2.5 release has increased metrics across different area including: (actual numbers not shown due to NDA)
Conversion to members (paid users).
Active days per week.
App downloads.
Users who completed daily challenges.
Reactivating churned users.
App ratings on Quest Store.
After the 2.5 release, we also did several improvements to iterate based on the data and user feedback. These includes: