What's VirtuFit?
The App Store is filled with fitness apps, yet many face a recurring issue: inconsistent results. Most workouts are pre-recorded and lack true personalization.
VirtuFit is a mobile app that redefines fitness with an AI trainer, offering personalized guidance, professional support, and consistent results to help users achieve their goals.
Client
VirtuFit
DELIVERABLES
Mobile App
Design System
UX Research
Visual Design
Year
2024
Role
Lead Visual Designer
Lead Product Designer
Product manager
(freelance)
Context
The fitness app market is overflowing — Health Works Collective reports there are more than 97,000 apps competing for users' attention. Whether it’s virtual trainers or live classes, each one claims to have the secret to better results. But with so many options and performance stats, the experience can quickly become overwhelming. Most fitness apps create workout and meal plans based on generic metrics like BMI or preset body types, which often leaves users without guidance that's truly tailored to their individual goals and lifestyle.
VirtuFit's team aims to develop a user-centric application that emphasizes customization and real-time responsiveness through AI technology. As the visual/product design lead and one of the product managers, I was expected to improve the overall user experience, refine the design system and redesign the interfaces.
My Roles
Improved VitruFit’s core user flows, restructured the app’s information architecture, and enhanced interface consistency and scalability by building out a unified design system.
Led end-to-end design efforts — from identifying user pain points and defining problem areas to prioritizing features, designing solutions, running usability tests, and collaborating with the team through implementation.
Duty 1: Refine Design System
New Component
Glassmorphic Card Design
tion, exercise techniques, progress tracking, or weight management strategies, the AI leverages their initial assessment to deliver more relevant and personalized responses.I designed a set of card components with glassmorphism to complement the existing dark mode and mysterious blue theme. This approach added visual depth, reinforced hierarchy, and made the interface more intuitive, modern, and engaging. Since all the card design changes, I had to update the other elements such as the Nav Bar
Application
Home + Fitness Stats Screens
The Home and Fitness Stats screens incorporate glassmorphic cards to elevate both the visual appeal and usability of the dark mode interface. These cards introduce a sense of depth and layering that enhances the overall hierarchy, making it easier for users to visually prioritize content at a glance. The subtle transparency and blur effects characteristic of glassmorphism help distinguish key elements without overwhelming the interface, maintaining a clean and modern aesthetic.
Data Viz
Muscle Growth Screen
I redesigned the muscle growth screen—one of the most insightful parts of the app—as both a progress tracker and a source of motivation. I replaced the old human figure with a Vitruvian Man-inspired graphic to align with the brand name and emphasize the ideal human form. I also revamped the weekly calendar, using incomplete circles to visually indicate missed workouts, making consistency easy to grasp at a glance.
New Onboarding
Redesign Onboarding Experience
Smart Fitness Onboarding
VitruFit streamlines the onboarding process by allowing users to input key details about their body composition, fitness level, and personal goals. Using this data, the AI intelligently analyzes individual needs and generates customized workout and nutrition plans tailored to each user.
AI-Powered Guidance
Beyond plan creation, this information serves as a foundational profile for the AI trainer, enabling it to provide context-aware guidance. When users seek advice on their physical condition, exercise techniques, progress tracking, or weight management strategies, the AI leverages their initial assessment to deliver more relevant and personalized responses.
Duty 2: Redesign Flow & Screen for Adjust Workout Screens
The second part of my work focused on redesigning the flow and screens for adjusting workouts. At the time, the app—like most on the market—didn't let users modify their workouts based on available equipment in real time. While some apps allow users to pre-select equipment, they don’t support mid-workout changes. To address this gap, I designed a more flexible experience that lets users swap exercises on the fly, helping them adapt to changing gym conditions and avoid unnecessary wait times.
Problem Statement
Gym-Goers with Limited Access
Only 12–15% gym goers hire a personal trainer, which means 85–88% do not. (according to ZipDo 2024)
Gym goers often have limited access to equipments depends on what the gym provides or how many people are at the gym at the moment.
71% gym goers are worried they don't know how to use equipment properly (ZipDo, 2024)
Target Users
To better understand user pain points around limited gym equipment, I spoke with several members at my gym. Many shared the same frustration: if a machine was taken, their app offered no alternative.
As product design lead, I created the “Adjust Workout” flow to introduce real-time flexibility. I mapped key scenarios, prototyped solutions, and tested usability. The new feature would allow users to update available equipment mid-workout, to adjust their plan instantly and keep workouts on track.
Initial Solution
AR Scan for Workout Adjustment
I worked closely with product manager to create an initial approach, which was to use AR and camera scanning to help users find equipment alternatives.
Here is an example screen: it's Leg day today! I clicked view details, then I wanna skip the warm up, but the leg press is occupied, now I can scan the gym with my phone and the app would then provide me with an alternative for a similar result. It just made my workouts more accessible and less frustrating.
We quickly communicated with dev team and they said they should be able to get it done so I proceed with building prototypes.
Initial User Testing
Why We Pivoted...
After building prototype for the AR scanning concept, I collaborated with the PM again to test it in a few user interviews. Most users weren’t into it—they felt embarrassed scanning their surroundings in a gym and said it felt like more effort than it was worth. They just wanted a faster way to get their workout started. Many suggested it would be easier to just select or type in the equipment they had. The dev team also flagged the scanning feature is too complex for the current stage and they do not have the bandwidth to work on it or they might need an AR specialist, so we pivoted to another direction.
Revised Solution
Equipment Selection
Second Approach
For the second approach, I focused on simplifying the experience based on user feedback. Instead of going with a complex AR scan, I designed a straightforward button-based selection. Users could easily tap to choose the equipment they had access to—no scanning, no typing, just quick and simple. It felt more natural, especially in busy workout environments, and aligned better with how users actually wanted to interact with the app.
Post Launch User Feedback
Since I joined as a contractor, my time with the team was limited. By the time I wrapped up the second approach and delivered fully interactive prototypes, I had to step away due to the time demands of working with an early-stage startup. I don’t have access to post-launch metrics like CTRs or user growth, but the team did share that after testing the new version for two weeks, the feedback was overwhelmingly positive. Users found the simplified equipment selection much more helpful—especially those working out in different environments like home, public space, or schools.
Other Features
AI Trainer 24/7
Personalized Workout & Nutrition Planning
Introduce to our AI trainer: Coach Vitru, who can tailor workout and diet plans based on each user’s body condition, fitness level, and exercise habits. Using AI-driven insights, it generates customized training routines and diet recommendations that align with individual goals. Users can seamlessly access their personalized plans within the chat interface and start their workouts immediately.
24/7 Real-Time Coaching & Adjustments
Users can interact with Coach Vitru anytime for instant support during their workouts. Whether they need to modify an exercise, update their diet plan, or request an exercise demo, Coach Vitru provides real-time guidance on demand. With its always-available chat functionality, users receive expert-level adjustments and recommendations anytime, anywhere.
Dashboard Screen
Plan Selection
Workout + Diet Plan Selection
After signing up, users land on the dashboard, which serves as their home screen. Here, they can easily select their workout of the day, curated by the Vitru AI trainer. These recommendations are personalized based on each user’s health conditions and exercise history, ensuring a tailored fitness experience. Users can also access their customized diet plans directly from the dashboard to align their nutrition with their training goals.
Navigation with Quick-Access Menu
A blue circular button in the lower-left corner of the screen provides quick access to a navigation menu. This pop-up menu allows users to seamlessly switch between different screens, ensuring they can effortlessly explore workouts, meal plans, progress tracking, and other features—all within a few taps.
Visual Design Showcase
Scroll down to view more visual design images!
