Personal Trainer
A training feature to help fitness enthusiasts achieve their goals.
The 'Personal Trainer' is a new feature on an existing fitness app that provides real-time feedback to users during workouts, helping them improve their form. As the UI/UX designer, my role involved translating product ideas into UX design solutions and leading research for the end-to-end Minimum Viable Product (MVP).
This case study focuses on three key challenges encountered when designing 'Personal Trainer':
Challenge 01: Creating a seamless visual interface for a unique training experience at a distance of 6 feet from users.
Challenge 02: Integrating features into the Personal Trainer to assist users in reaching their fitness goals.
Challenge 03: Encouraging users for sustained usage of the Personal Trainer.
Team
1 UI/UX Designer
1 Product Owner
1 Software Developer
Project Duration
8 months
May '23 - Dec '23
Tools
Figma, Notion, Slack, Zoom
01 How might we ensure a seamless visual experience for a 6-foot training session?
During Personal Trainer sessions, users stayed six feet from their phones, making smooth visual communication crucial during the audio-visual training.
The Personal Trainer introduces a unique training session on mobiles 6 feet away from users, providing users with real-time audio and visual feedback. It was essential to ensure that users could visually engage with the interface despite the distance and the physical activity involved.
Solution
Through experimentation and iteration, we developed and implemented user-centric visual design guidelines for training sessions.
Following our guidelines, the percentage of usability issues related to visual design elements decreased by 80%.
Jump to Problem 02
The Process
Research & Continuous Iteration
Experiential learning guided our early iterations focused on visibility and simplicity.
I started by immersing myself in the training session experience. Using the Figma Mirror tool, I simulated user viewing experiences for early iterations. This helped us iterate our designs to enhance visibility and simplicity through large font sizes and simple layouts.
Testing fonts using Figma Mirror
Early Iterations
Feedback & Refinement
Feedback from users revealed several usability issues relating to visual design elements.
Additionally, we conducted usability studies to gather insights into user interactions, physical limitations, and session dynamics.
Testing with user 6 feet away
“It’s too blurry to read.”
Finding 01
Users were unable to read bold fonts for smaller sizes.
We found that this issue occurred particularly when users are in motion.
Solution
Improving legibility through font styles.
“Didn't I just see this?”
Finding 02
Users were unable to recognize a change of context.
On screens where changes were minute, users were unable to tell if they were presented with new information.
Solution
Adding animations as a visual cue.
“I'm not sure where to look ”
Finding 03
Users were unsure where to focus on screens.
Users needed visual guidance on screens to follow along with the audio instructions. leading to poor understandability.
Solution
Using indicators like color change and icons for focus.
Visual design cheat sheet for interfaces in a training session.
Final Design
Supporting a 6-foot training experience through visual design on screens…
Hover to push 6 feet away.
Utilizing indicators to support users when taking reps.
Users are guided through their reps through a visual indicator along with a change in color.
We kept the size of these indicators large to ensure visibility.
Simplified layout to give users feedback on their workout.
The overall screen layout is simple, providing users with necessary information only.
Icons and motion grab users' attention to specific areas of the screen.
Hover to push 6 feet away.
02 How might we help users achieve their goals with training on the training page?
Challenge
On the dedicated training page, the Personal Trainer curates a list of exercises for the user's training. The challenge was to understand what users might need from the training page to support their training goals.
Solution
The result was an interactive training page that not only allowed users to view their exercises but also enabled customization and kept them informed about their training progress.
Our solution led to a 60% increase in engagement with the training page, with users actively exploring features. Additionally, task completion rates with these features were 90%.
The Process
User Research & Ideation
Understanding user needs for an engaging training experience.
With the goal of boosting engagement with Personal Trainer, we conducted user interviews to directly gather insights from our target audience regarding their needs within in-person training sessions.
Insight 01
Users want more flexibility over the exercises in a training session.
6/8 users indicated a desire to choose exercises during a training session to align with their requirements.
Insight 02
Users want to be able to keep track of their progress.
5/8 users expressed the need to assess their progress over time to stay motivated.
Iteration
Facilitating customization and progress tracking and refining early iterations.
Training program: Iteration 1
Program List View
Initially, our designs enabled users to access all recommended exercises and edit mode through a list view.
Progress Bar Visualization
We also sought to provide users with exercise details through a progress bar visualization alongside each exercise.
4/8 users expressed feeling overwhelmed with the training program.
!
Users found the list of exercises too long.
The long list of exercises left users feeling overwhelmed by their training program.
!
Users did not seek details of exercises all at once.
Users mentioned they preferred to access details on a per-exercise basis instead of all together.
Final Design
Through optimized customization and progress tracking we supported users' training on the training page.
Disclosing exercise list.
A simplified exercise list to track training.
Implementing progressive disclosure, our updated design presents users with only the exercises they're currently training for.
Viewing exercise details one at a time.
We eliminated the progress bar visualization, opting instead for users to access exercise details with a simple tap.
Tapping for exercise details.
Delete an exercise.
Add an exercise.
Allowing customization with an edit feature.
Further, an edit mode offers control over the training program by allowing users to add, delete, and change the order of exercises on their list.
03 How might we encourage users to continue using Personal Trainer?
Challenge
Users are looking for motivation to break away from their current training routines and adopt Personal Trainer for ongoing use. We aimed to design a feature that motivates users to continue using Personal Trainer, focusing on low effort and high impact for the MVP.
Solution
By highlighting a users accomplishments from their training sessions on the Homepage, we aimed to achieve sustained usage of Personal Trainer.
This highlight feature card instilled positive emotions among users while also reducing development efforts.
encouraging
happy
eye-catching
cool
motivated
excited
The Process
Ideation
Exploring one of the ideas from our brainstorming session, we decided to implement a feature that highlights user's achievements.
With a shorter time scope and technical feasibility, initial MVP only focuses on features that requires low effort but yields high impact. Recognizing that Personal Trainer gathered users performance data for each training session, we decided to use the data to highlight user’s performance for our feature.
Clue 01
User’s image in a training session.
The Personal Trainer uses motion capture to analyze users form and captures their image.
Clue 02
User’s exercise and performance data.
We knew the exercises the user was working on and their performance within those.
Clue 03
Training Session Date.
The Personal Trainer uses motion capture to analyze users form and captures their image.
Implementation
We built a template for a card that would present our gathered information in a meaningful way.
We developed a template for a card to automatically populate with updated user information after each training session, ensuring users receive the latest data. We established "banks" for Session Date and Encouragement to maintain consistency in card language.
Highlights feature card template.
Samples from Encouragement Bank
"Great Job"
"Keep it going!"
"You can do it this time!"
Samples from Session Date Bank
"Today"
If session date is the same day.
"Yesterday"
If session date is one day before.
"X months ago"
If session date is current month-X.
Final Design
Encouraging users through positive reinforcement using a performance highlight card.
Highlights feature card on the homepage.
We designed a Highlights feature card with the following key features:
Time elapsed since the last training session helps users keep track of their workouts.
An image of the user aids with recalling positive experiences during a training session.
Providing details of peak performance encourages users, sustaining their excitement.
Project Results
A successful end-to-end implementation of Personal Trainer.
We handed off the final set of design specifications to the developers, and the feature is set to be released on the app shortly. The next steps for Personal Trainer involve post-MVP release evaluation, using analytics to further enhance the feature on the app.
Product and Development teams at work!
Reflections
Collaborating with stakeholders
I collaborated with high-level stakeholders to communicate and persuade them on design decisions, which enhanced my communication skills.
Working in Agile
This experience introduced me to collaborating with developers and design sprints, where I learned to align UX goals with development processes, leading to successful product delivery.
Scope for Accessibility
As a proponent of universal design, I believe it's crucial to ensure this product is accessible to all users, including challenges like the 6-foot mobile experience, for its future development.
Next Project
Fibromyalgia Care Society of America
Pulse Design System : Coming Soon
