Overview
In Summer and Fall ‘23, I interned at a sports-AI startup. As the UI/UX designer for the product team, I contributed to building the end-to-end Minimum Viable Product for the new 'Personal Trainer' feature on their mobile app.
My responsibilities included:
Ideating UX concepts with the product owner.
Creating mid and high-fidelity wireframes and prototypes.
Leading a usability study as the sole UX researcher.
Iterating designs and creating specifications for implementation.
* Company and product details have been obscured for confidentiality.
Team
1 UI/UX Designer (Me)
1 Product Owner
1 Software Developer
Project Duration
8 months
Tools
Figma, Notion, Slack, Zoom
Introduction
What is Personal Trainer?
The Personal Trainer is a new feature that utilizes AI to offer real-time feedback during workouts. Its key features include:
“6 Foot” Training Session
A live training experience on mobile 6 feet away from users, supported by audio and visuals.
Training Program
A personalized exercise program, curated specifically for users.
The Goal
Improving user experience for seamless integration of Personal Trainer into user's workout routines.
The Design Process
Think. Make. Test. Repeat.
We followed a Lean UX Design approach for Personal Trainer. After the initial product ideation, we began building mid-fidelity wireframes. We then tested our wireframes in a usability study with 6 existing app users and refined our designs.
User testing a prototype 6 feet away.
Problem 01
How might we support users for an interface experience 6 feet away on mobile?
During a training session, users position their phones 6 feet away for AI capture. Users engaged in training sessions seek visual assistance to support the audio guidance during their workout.
Ideation
Guidelines for visual design for a 6-foot mobile experience.
abc
abc
Larger Fonts and Icons
Increasing the size of text and icons ensures readability from a distance.
abc
abc
Bold is not always better
It could be hard to discern individual letters from a distance when they are too thick.
High Contrast Colors
Using high contrast colors enhances visibility and distinguish between different elements on the screen.
Using visual indicators
Grabbing users attention through indicators to focus on specific areas of the screen.
ABC
Simplified Layouts
Simplifying the layout to prioritize essential information and minimize clutter.
Defining colors and fonts.
Following our guidelines, we selected high-contrast colors for UI elements and established font size and style for on-screen headings.
Final Design
Supporting a 6-foot training experience through visual design on screens…
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.
Coming Back Closer..
Problem 02
How might we support users through the training program page?
On the Training Program page, users seek information about their training session program and exercise details.
Design Iteration 1
Facilitating program exploration and tracking.
Program List View
Initially, our designs enabled users to access all recommended exercises in their program through a list view.
Progress Bar Visualization
We also sought to provide users with exercise details through a progress bar visualization alongside each exercise.
However,
4/6 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.
As a result, we iterated our designs to solve these issues.
Final Design
Optimizing the user interface on the training program page.
Easing into viewing the training program list.
Implementing progressive disclosure, our updated design presents users with only the exercises they're currently training for.
Additional exercises are revealed upon selecting "Show more."
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.
Problem 03
How might we encourage users to continue using Personal Trainer?
Users seek motivation to break their current training routines and adopt Personal Trainer for continued use.
Ideation
Exploring one of the ideas from our brainstorming session, we decided to implement a Highlights Feature card on the homepage.
The highlight feature card would provide users with information about their highest performance point in the last training session. We hoped that by recalling a positive experience from Personal Trainer, users would be encouraged to engage with it again.
Implementation
To build this, we created an algorithm leveraging existing data from user's training sessions.
Drawing from details like the date of the last session, users' best performance statistics, and an accompanying image capturing the user in action, we developed a comprehensive algorithm.
We then created a card template to present user's highlights.
We developed a template for the algorithm to automatically populate cards with updated information after each training session, ensuring users receive the latest data, thus enhancing their app experience.
Furthermore, 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 on the homepage.
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
A pivotal aspect of this internship involved collaborating with high-level stakeholders to convey my ideas and persuade them regarding design decisions. This challenge necessitated enhancing my communication skills.
Working in Agile
This internship was my first exposure to collaborating with developers and design sprints. It taught me to adapt to align UX goals with development processes, ultimately steering the product to successful delivery.
Scope for Accessibility
As someone who values universal design, I believe it's imperative to ensure the future accessibility of this product to all users. This is particularly challenging to achieve for experiences like the 6-foot mobile experience and should be something to consider for the future of this product.
Ask me about...
Want to learn more about the project? Please feel free to email me at sdokras@pratt.edu. You can ask me about..
How I set up a usability study for an undeveloped AI feature.
My learnings from the Agile methodology.
