Fit Engine
Fit Engine – app for personal trainers
Case study
Fit Engine is an easy-to-use app for personal trainers to store their client info, progress, photos, programs and exercises all in one place at one low cost.
Client //
Google UX Course case study
Date //
2022
Role //
UX design & research
UI design
Deliverables //
App design & prototype
OVERVIEW
The challenge
Busy personal trainers are annoyed with having Excel spreadsheets, cutting and pasting, and having separate files; and want one, uncomplicated place do to everything without spending a fortune, especially when they’re starting out.
The solution
I've designed an app that makes it easy for personal trainers to input their clients’ information, a central repository for exercises and programs, and a way to track progress at one low price point.
UNDERSTANDING THE USER
To start, I carried out user interviews and created empathy maps to understand the needs of personal trainers and their current way of working. My initial research indicated that most personal trainers have a number of Excel spreadsheets to create exercise programs and track client progress, plus client information in their phone or in a Word document.
The personal trainers were frustrated with the fact that they so many documents, had to cut and paste, print out programs and keep track of photos. Additionally, they found that current offerings for apps were quite expensive.
PAIN POINTS
Time
Personal trainers spend too much time cutting, pasting and generally juggling information.
Documents
Most trainers have a lot of documents floating around, making them hard to manage.
Price
Trainers have found many app offerings too expensive, especially when starting out.
THE USERS
USER JOURNEY MAP
Mapping the day-to-day actions of David demonstrates how useful the app will be, and how much time will be saved by using the app versus the current set up of Excel spreadsheets.
PAPER WIREFRAMES
A number of sketches were drawn out on paper for each of the wireframes, so that I could quickly assemble the pages as I thought they should appear. Here, the iterations of the home screen are laid out. I decided (with some feedback from an interviewee) on a simple layout without too much clutter.
DIGITAL WIREFRAMES
From the paper wireframes created, digital wireframes were completed for the process of creating a new program in the fitness app.
1. Home screen
2. New program
3. Add the program name and image, if desired
4. Enter an exercise for the program, save and repeat
5. Current program – add notes, plus client and date if required
6. Confirmation screen
LO-FI PROTOTYPE
Once the digital wireframes were complete, they were used for a low-fidelity prototype.
The primary user flow presented was for creating the program, however I also linked some other sections to get an idea of how the entire app would flow.
USABILITY STUDIES
Carrying out the first of two usability studies helped refine the low-fidelity prototype so that the full colour mockups could be created. From here, a high-fidelity prototype was produced for the second study, to which users responded very positively.
Findings
-
The use of ‘calendar’ was not clear to view or make bookings, so it was changed to ‘bookings’
-
There were some inconsistencies on page design, which were fixed
-
Participants suggested that there be a pop up confirmation instead of a confirmation page with an ‘ok’ prompt to continue, which was incorporated into the design
-
Positive feedback on high-fidelity mockups
MOCKUPS
Refining the design
From the usability studies, it was ascertained that it was not clear that bookings could be viewed and made through ‘calendar’, so this was changed to ‘bookings’.
It was also found that the users didn’t like to click ‘OK’ to get to the next screen, so the ‘success’ overlay has now been set to disappear instead of having to click ‘OK’ to progress.
KEY MOCKUPS
HI-FI PROTOTYPE
The final high-fidelity prototype for adding a new program is simple, elegant and easy to use. In the example below, I added a pop out for the menu and the profile.
In addition to this flow, I have gone a few steps further and created a prototype for majority of the Fit Engine app. Click on the link below to view the Figma file.
ACCESSIBILITY CONSIDERATIONS
Icons
I have included the use of icons to assist in navigation throughout the app.
Alt text
Alt text has been added for use with screen readers for users with vision impairments.
Images
Images and videos are encouraged for use throughout the app to assist all users.
TAKEAWAYS
The app is easy to use and helps personal trainers keep their client contact info, client progress, bookings, programs and exercises all in one place. It’s simple to create new programs and add exercises, as well as adding extra information and tracking progress. Additionally, there is functionality to message clients, and notifications when clients have (or haven't) completed workouts, as well as the ability to comment.
I have learned not only is it important to interview subjects to determine initial pain points before designing apps and websites, it is crucial to conduct usability studies and include accessibility considerations.