"I walked into the gym, feeling lost. The machines looked complicated, and I had no idea where to begin. With no plan, I just hopped on a treadmill, but it didn’t feel like progress. I left feeling defeated—ended up ordering junk food again. Another wasted workout, another frustrating day."


Mike C. - International Student, SFSU

"I walked into the gym, feeling lost. The machines looked complicated, and I had no idea where to begin. With no plan, I just hopped on a treadmill, but it didn’t feel like progress. I left feeling defeated—ended up ordering junk food again. Another wasted workout, another frustrating day."


Mike C. - International Student, SFSU

"I walked into the gym, feeling lost. The machines looked complicated, and I had no idea where to begin. With no plan, I just hopped on a treadmill, but it didn’t feel like progress. I left feeling defeated—ended up ordering junk food again. Another wasted workout, another frustrating day."


Mike C. - International Student, SFSU

"I walked into the gym, feeling lost. The machines looked complicated, and I had no idea where to begin. With no plan, I just hopped on a treadmill, but it didn’t feel like progress. I left feeling defeated—ended up ordering junk food again. Another wasted workout, another frustrating day."


Mike C. - International Student, SFSU

"I walked into the gym, feeling lost. The machines looked complicated, and I had no idea where to begin. With no plan, I just hopped on a treadmill, but it didn’t feel like progress. I left feeling defeated—ended up ordering junk food again. Another wasted workout, another frustrating day."


Mike C. - International Student, SFSU

VitruFit: AI Trainer, One Tap Away

VitruFit: AI Trainer, One Tap Away

VitruFit: AI Trainer, One Tap Away

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

As my first priority at VirtuFit, I focused on refining and expanding the design system. The existing setup included a few inconsistent components—CTA buttons, colors, and typography were scattered and unstructured. I audited and reorganized these elements, addressed accessibility gaps, and built out a more complete system with components like input fields and selection controls

For the updated design system, I introduced a set of secondary colors, refined the base palette, and established clear layout guidelines. I organized typography into a structured type scale and built a comprehensive component library—including buttons, input fields, chips, badges, tooltips, modals, and dialogs—to ensure consistency and scalability across the product. I then applied the updated system to redesign key screens for better consistency, usability, and visual clarity.

At VirtuFit, I prioritized refining the design system by auditing inconsistent components and addressing accessibility gaps. I introduced a structured type scale, refined the color palette, and built a comprehensive component library—including buttons, input fields, chips, and modals—to ensure visual consistency and scalability. The updated system was then applied across key screens to improve clarity and usability.

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.

Key Takeaways

Lack of personalization

Poor exercise demos

Inflexible workout adjustments

Delayed responses

Key Takeaways

Lack of personalization

Poor exercise demos

Inflexible workout adjustments

Delayed responses

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!

2025 ® CHUOFAN ZHENG

chuofanzheng@gmail.com

2025 ® CHUOFAN ZHENG

chuofanzheng@gmail.com

2025 ® CHUOFAN ZHENG

chuofanzheng@gmail.com

2025 ® CHUOFAN ZHENG

chuofanzheng@gmail.com