On Track

Rapid prototype of a mobile fitness app for team training

Sketches and prototypes for On Track
Brief
For my first project for UXDI at General Assembly, I was tasked with identifying a problem related to fitness and creating an interactive prototype of a mobile application which solved that problem.

Duration
1 week

The Problem
A lack of motivation due to the inability to schedule group exercise sessions was cited as a common issue among my interview subjects. In particular, this makes it difficult for them to keep track of each other’s progress when training for an event like a race.

My Solution
On Track is a mobile app that allows friends to train for a race individually but keep track of each other’s progress toward individual goals and a shared group goal.

Tools
Pen, Marker, Paper, Marvel
Research
User Interviews
I conducted user interviews with several of my classmates about their fitness routines. However, in an effort to make my questions open-ended, I initially made the mistake of asking questions that were too broad and vague, which resulted in answers that did not reveal any valuable information.

After this initial stumble, I wrote new questions that focused on getting people to tell stories about something specific. During my second round of interviews, I learned that staying motivated was one of people’s most common frustrations about exercise. Also, two methods people used to keep motivated were exercising with friends and making a commitment such as signing up for a race or an exercise class.

Uncovering the Problem
At this point, I knew I wanted to make something related to motivating people to exercise, but I needed to dig deeper. I decided to combine those two methods of staying motivated and conducted another round of interviews specifically with people that have participated in races with friends. During these interviews, I learned that due to conflicting schedules, it is often difficult for friends to schedule training together, and as such, it is very difficult to impossible to keep track of everyone’s progress (or lack thereof), undermining the whole purpose signing up for the race in the first place.
Scheduling training for a race with friends is a pain.
My Solution
I decided to design an app that would allow a group of friends to record their race training activities separately while keeping track of the progress of the rest of the group. Progress would be shown as work towards individual goals as well as a shared group goal. The emphasis would be less about a competition of who ran the most or fastest and more about a collaborative effort, which would keep everyone motivated and accountable to one another.
With On Track, friends could train for a race separately but still keep track of each other’s progress.
Design
User Flows
For my design, I first determined all of the screens that would be necessary for On Track and used that to create a user flow diagram. I kept the onboarding process to the bare minimum number of steps so that users could begin a workout as soon as soon as possible. Supplemental information and permissions could be requested later when they are actually required. For the remainder of the project, I focused on designing the flow of the Team section where users can view the training progress of their friends.
On Track user flows
Sketching
I sketched a few different layouts and ways of visualizing data for the three main screens of the Team section: the overall team progress, an individual teammate’s progress, and a detail page for a teammate’s goal (in this case Distance). I iterated and refined these sketches after determining all of the specific information that users would need on each screen.
Iterations of my sketches
Prototyping and Testing
Paper Prototype
I used my refined sketches to create a paper prototype for quick usability testing with my classmates.
The elements of my paper prototype
Usability Testing
Testing revealed that though my design was fairly easy to understand and use, a few testers wanted to know how they could view the progress on the teammate and goal screens for all time rather than just one week. I had initially only included a Week/All toggle on the main team screen, thinking that it would have been selected prior to digging into details about a teammate. However, based on that user feedback, I added the toggle to each screen in my final prototype to reduce confusion and prevent backtracking to the team screen. After iterating on my sketches, I imported them into Marvel to create an interactive prototype.
The final sketches for my prototype

Conclusion
My first UX project was very educational. In addition to learning to write better interview questions, I also learned that if something is not working, then it is important to stop and review my process. I realized very quickly that I was not getting good answers to my questions during my first round of interviews, but I kept going anyway in the hopes that further interviews would be better. It was not until I stopped and reworked my questions that I was able to move forward.
Final Interactive Prototype

More Projects

Spendrise
Responsive website redesign for a social good platform
Peet's Group Orders
Food and drink group ordering website
MedStar ER Tracker
Mobile web app reframing the ER waiting experience
VSquared
Visual design and coding a landing page for a travel mobile app
Back to Top