valencerina website design logo

My Trainer

Personal Trainer App

My Trainer

Overview

While studying and learning UX design, my day job was working as a personal fitness trainer. During our company year-end meeting, the head of the personal training department spoke about his ideas to update our systems, processes, and client interactions with a new feature for our mobile app. Before this, everything was done using a mixture of an outdated POS (point of sale) system, Google calendars, and paper notes. At the time, I was working on ideas for capstone projects for my Designlab UX design course. I took this as an opportunity to design the new app feature myself and add it to my list of capstone projects and submit to the head of the personal training department for his consideration to be used at our gyms.
View Live Project
Process

I approached the My Trainer personal training app project using the basic design process I typically follow for every project. I based the app's visual design on the existing app and website and used four basic steps to solve the main problems: Product Definition, Concept Exploration, Iteration & Improvement, and Execution.

Process Steps

Product Definition: Define the challenge and goals. Interview experts and users. Create a journey map.

  • Interview personal trainers and their clients. Interview my own personal training clients and reflect on my own experiences and challenges.
  • Create a current state journeymap of the current personal training experience to identify and document existing problems and relevant solutions.
  • Create a future state journeymap in collaboration with other personal trainers, our supervisors, and our clients to reinvent the personal training experience for the better.

Concept Exploration: Perform competitive analysis. Come up with ideas for solutions based on a variety of research methods. Create wireframes, storyboards, and mockups.

  • Study competing personal training apps and relevant businesses to discover solutions that work best for our clients.
  • Perform various user studies including field studies where I could observe trainer and client interactions to help discover existing problems, needs, and shortcomings of the personal training experience.
  • Create wireframes, storyboards, and mockups of potential solutions based on information gathered from previous research.

Iteration & Improvement: Design and build prototypes using Figma. Test prototypes with real users and stakeholders. Reiterate and improve prototypes based on user and stakeholder feedback.

  • Design working prototypes of the solutions based on previous research.
  • Test prototypes with personal trainers, current clients, and potential clients.
  • Reiterate and improve prototypes based on the feedback and data gathered from previous tests.

Execution: Create and launch the live product using Webflow and basic code.

Challenges

The challenges to creating the My Trainer personal trainer app primarily involved communication, visibility, and access to vital information.

  • According to many clients interviewed, they often do not know exactly what to do at the gym on days they are not training with their trainer. They also frequently forget how to do certain exercises.
  • The process to purchase additional personal training sessions is complicated and clients often do not know how many they have left. They are often surprised when they run out and must purchase more sessions if they want to continue with their program.
  • According to many clients interviewed, they do not know what their training program entails. They have no way to view their program details, schedule, or see their program progress.
Solution: Training Sessions & Program Schedule Screen

Since clients were having difficulty keeping track of their program schedule, session count, and program details, the "Training Sessions & Program Schedule" screen clearly displays all of that information. Clients can easily check-in to their session as soon as they enter the gym letting the trainer know they have arrived and are ready to train. Clients can also easily add sessions to their program if they see they are running low by tapping the "Add Sessions" button.

Training Sessions & Program Schedule Screen
Solution: Training Session Packages Screen

When a client needs to add sessions to their current training program and taps the "Add Sessions" button they will see cards displaying the details of available packages. Because trainers and clients reported being overwhelmed by the number of different package options available, I chose to keep this as simple as possible showing only essential information. The available packages displayed to the client are chosen by the trainer since every trainer has many packages to choose to offer. They are limited to three cards to display to the client as to not overwhelm the client with too many choices.

Training Session Packages
Solution: Individual Exercise Screen & Exercise Instructions Swipe Up

According to many clients interviewed, they often do not know exactly what to do at the gym on days they are not training with their trainer. They also frequently forget how to do certain exercises. When a client arrives at the gym on days when they are training on their own, they will see their workout designed by their trainer displayed in their app. Each exercise is displayed with essential information and a short video clip to help the client perform the exercise correctly. During testing of early prototypes, clients reported that a small "notes from trainer" section was not enough for them to fully understand a particular exercise so I added a swipe up "Exercise Instructions" section that explained an exercise step by step.

Individual Exercise
Exercise Instructions
Conclusion

With this app feature I designed for My Trainer Personal Training, clients and trainers can communicate more efficiently, access vital information more easily, and remove speed bumps that can hold clients back from achieving their fitness goals.

next
Project