Project
Metric Mate Trainer Portal
Facilitating quick and secure data sharing
Linking trainers to their clients' visualized metrics to promote and bolster progress
A 0-1 tablet-first responsive web portal for fitness health professionals tracking their clients' metrics.
Client
CTO (main contact)
Timeline
3 weeks
Feb - Mar 2024
Team
5 UX designers
Constraints
Tight deadline (illness)
One-way handoff
No QA in scope
No user testing of shipped product
My Role
UX research
Visual design
UX writing
Project Manager
Tools
Figma
Google Workspace
Maze
Notion
Methodologies
User interviews
Surveys
Affinity mapping
Persona development
User flows
Sketches
Wireframing
Usability testing
Prototyping
Presentations
Introduction
The Client
Metric Mate is a patented platform that allows anyone to turn any strength training equipment into SMART equipment including games and competitions to make workouts more fun with their T.A.P. Sensor.
The Training Accountability Partner (T.A.P.) Sensor automatically tracks the user's reps and sets, but also calculates force exerted, calories burned, and more. This unique data is shared with users facilitating a greater understanding of progress and accountability for their fitness journey.
Among the metrics tracked, a user's Power Level is a Metric Mate proprietary score composed of 10 aspects of an athlete’s physical ability beyond being the biggest or the strongest.
The Issue
When a user (or athlete) uses the Metric Mate T.A.P. Sensor, the information is saved and transmitted to their Metric Mate app. In order to share this information with their personal trainer or other fitness health professional, the athlete's metrics are exported into an email (text-only), resulting in delays and requiring time-consuming manual calculations and tracking.
The Metric Mate team hired us to design a trainer responsive web portal that would allow the trainers to see their client's metrics directly and quickly.
Research - User Data
How do trainers use metrics with their clients?
In order to determine how to best connect trainers with their clients' metrics, employing creative recruiting methods, I recruited 9 users (5 are personal trainer, 4 are fitness enthusiasts) to interview via Zoom to ask how they currently measure and track metrics and if they share this information with their clients. If they do, how do they utilize the data?
Interview Results
After conducting the interviews, I analyzed and distilled the experiences from the 5 trainers to the following insights:
“I track the basics (exercise reps, sets, weight, and volume)”
“seeing how the #s change, going up or down helps”
“I [consider] the last 8-12 weeks and what they want to achieve while considering their job/lifestyle”
“sending messages quickly [is important]”
“having access anywhere and from my tablet, computer, or phone is a must”
“sometimes the scale doesn’t move but they can see their progress in the mirror”
“telling them you are pushing 10 lbs more now encourages them”
“when they can do [the exercises/resistance] easily, they move up”
Research Synthesis
To guide the design, I then consolidated the 5 fitness health professionals into a trainer persona and mapped out 3 user flows that were specified by the Metric Mate team:
Research - Competitive/Comparative Analysis
What metrics do trainers use and in what way?
The client provided a list of competitors and we compiled a list of comparable competitors in the fitness metric space and analyzed over 15 companies and how they track and display metrics to their users. The majority of the C&C analysis was conducted on companies that track one user's metrics only. However, our interviewees supplemented the list provided by the client and of those, 2 (Train Heroics and Coach Catalyst) were direct competitors because they were intended for trainers to use with their clients.
Conclusions
After conducting user interviews, mapping the user flows, development our user persona, affinity mapping, and reviewing the competitive and comparable alternatives, the research provided a roadmap for our trainer portal design.
Our Design Roadmap/Requirements List:
Informative Data Visualization
Engaging
Personalized
Comprehensive yet clear
Effective Dashboard Design
Simplicity
Prioritization
Consistency
Interaction
Efficient and Enjoyable User Onboarding
Helpful introduction and a simple flow of the key tasks that mimic a user's real experience
Ideation
Sketches/Design Studio Sessions
With the 3 user flows laid out and inspired by the results of our Competitive and Comparative Analysis, we conducted a Design Studio. We individually sketched first, then shared and compared the parts of each person's drawing that served our collective design best. Many elements of my ideas were utilized.
My initial sketches are below:
Low-fidelity Wireframes
From our Design Studio sketches, we prepared our collaborative design in grayscale wireframes for Metric Mate’s Chief Technology Officer (our main contact) to review and provide feedback.
Prototyping & Usability Testing
First Test (Grayscale Wireframes)
With the client's feedback, I revised the wireframes and we designed the additional wireframes needed to complete the user flows and conduct our first round of usability testing. For this, I recruited 9 users to test our design, of which 5 were trainers and 4 were fitness enthusiasts.
Each test was evaluated against a time and error goal, as I anticipated users would give up the tested task if it took longer than the estimate or they encountered more than the error or misdirection buffer. Based on the client goals, we asked our testers to evaluate the functionality of our design for the following tasks.
Task #1 Goal: <2 mins & <2 errors
Action: Navigate to a client profile and adjust the workout exercises for different equipment (barbell to dumbbells)
Results:
🔴 Fail - 0% of our users could complete this task in less than 2 mins or with 2 errors or less.
On average, the testers encountered 12.2 errors and required 3:57 mins.
Task #2 Goal: <1 min & <1 error
Action: Accept a new client and schedule an initial consultation
Results:
🔴 Fail - 0% of our users could complete this task in less than 2 mins or with 2 errors or less.
On average, the testers encountered 5.4 errors and required 2:55 mins.
Qualitative Insights from Testers
“I want to adjust the workout
on the Client profile page”
“Takes too long to go each client’s
profile first to add a workout”
“What if the sets are
not the same?”
“I like how the dashboard is simple
but maybe it’s a little too empty”
UI: Design System
Primary Color Palette
Our lead designers developed an introductory design system for Metric Mate based on the brand mood terms: Motivational, Robust, Progress-Driven.
Metric Mate had a brand red (shown to the right) and their logo utilized the typeface Century Gothic but no other branding set.
Our design system introduced a simplified default color scheme featuring the Metric Mate red with neutral colors.
Featuring Metrics Visually
To emphasize and feature the metrics in the client profile, 4 accents colors were selected to stand out against the primary neutral color scheme.
Typefaces
While Metric Mate had chosen Century Gothic as their logo typeface, it was determined Montserrat and Raleway would better convey how Metric Mate is motivational, robust, and progress-driven.
Iteration, Design System, Testing Again
High-Fidelity Prototype
Armed with the test results and our users’ remarks, I revised the design for clarity, functionality, and applied our design system to create our high-fidelity prototype (video below).
Confirming Functionality
Second Test (High-Fidelity Wireframes)
To verify that the changes we made were successful, we conducted a second usability test with 7 new users to test the revised design, of which 3 were trainers and 4 were fitness enthusiasts.
Instead of 2 tasks, the second test consisted of 4 tasks:
Task #1 Goal: <2 mins & <2 errors
Action: Navigate to a client profile and adjust the workout exercises for different equipment (barbell to dumbbells)
Results:
🟡 Mixed - 40% of our users could complete this task in less than 2 mins or with 2 errors or less.
On average, the testers encountered 5 errors and required 2:33 mins.
Task #2 Goal: <1 min & <1 error
Action: Access and look at the client’s exercise history (NEW)
Results:
🟢 Pass - 100% of our users could complete this task in less than 1 min or with 1 error or less.
On average, the testers encountered 0 errors and required 0:15 mins.
Task #3 Goal: <1 min & <1 error
Action: Adjust the Metric Mate Workout: Chest and Arms, and assign it to a client (NEW)
Results:
🟡 Mixed - Our users could not complete this task in less than 1 min but encountered 1 error or less.
On average, the testers encountered 0.5 errors and required 1:31 mins.
Task #4 Goal: <1 min & <1 error
Action: Accept a new client and schedule an initial consultation
Results:
🟢 Pass - 75% of our users could complete this task in less than 1 min or with 1 error or less.
On average, the testers encountered 0.75 errors and required 0:44 secs.
User Compliment
Next Steps
If we had more time or were re-engaged:
Since our project was for a MVP of the trainer portal, I focused on the core tasks users would need and included features in the design included as placeholders for future development. I would love to design for the secondary user flows and actions.
Additionally, I would consider design changes.
Navigation
Layout
My initial sketches placed the global navigation on top but our group decided to place the global navigation to the left and the secondary navigation for the client profile on top. I would revise the design to flip this layout and A/B test which users prefer.
The secondary top navigation does not leave much room for additional features as the portal design advances and expands.
Shorten/Revise
Onboard Training
While our onboard training tested well with 14 users, the feedback we received echoed that it was too long/much.
If the onboard training is too long, too many users may skip the training or end it prematurely resulting in users later confused or frustrated with the portal design.
Revise "Save/Edit"
Exercise Table Design
Since the Exercise Table was contained to itself, a toggle switch was used to denote when the table was in Edit mode or in View-only mode.
Users found this deviation from the "Edit" convention found in the rest of the design confusing and unexpected. I would replace the toggle design with consistent Edit options for the Exercise Table.
Learnings
Stakeholder Meetings, Project Management, Annotations, and more
Final Thoughts
Delivering Results Under Pressure
Other projects/cases studies
Streamlining franchise discovery and application for prospective owners
Guiding leads through investment details and application steps to accelerate partnership decisions
Feb - Apr 2025
Shipped
Simplifying climate control service engagement for property managers
Connecting facility managers to offerings and contact methods through accessible, unified redesign
May - Jul 2024
Research & Design Phase
COMING
SOON