ic_overview.png

Overview

Triathlete is an app that tracks progress for triathlon athletes. At minimum, this app needs to include: a breakdown of the day's activity and recommendations for how to improve on a particular part of the triathlon (running, swimming, or cycling)


 
ic_roles.png

Roles

User Research
UI/UX Design
Visual Design

ic_deliverables.png

Deliverables

User Research
Competitive Research
Wireframes
Branding
High Fidelity Screens

ic_specs.png

Specs

7 days
Balsamiq
Sketch

 

ic_research.png

The Research

User Research

I sent a questionnaire to a few friends that are currently training or have completed one. I also used the experience of an endurance athlete, who documents her training and races in an online blog.

 
 
1.png
2.png
3.png

K, late 20’s, Female

Novice, complete 1 triathlon, uses Myfitnesspal, Fitbit, trains with a program

C, mid 30’s, Female

Brand Ambassador Athlete, completed multiple triathlons and 2 half Iron Mans. Trains with a social club and program

A, late 20’s, Female

Novice, completed 1 triathlon. uses Strava, Apple Watch, Nike Training Club, trains with a social club and program

 
 

Results

  • Triathlon training tends to be a social activity, with most participating in clubs or groups
  • People tend to follow pre-existing programs rather than creating their own or doing unstructured workouts
  • Most are already using other apps and devices to help track their activity, using different apps to track different things (running, cross training, nutrition)
  • Cross training and rest is an important part of training as most incorporate some form of strength training into their routines
  • Nutrition tracking is important to ensure athletes are adequately fueled
 
apps.png

Competitive Research

I’ve used fitness apps in the past, so I’m already familiar with them, but I still wanted to test through all the triathlon apps as well as some of the most popular running apps available. 

 
 

Sketches

I sketched out a few layout options for each page to see explore how to display necessary information. I tried a few designs that took inspiration from Strava, Instagram, and Apple Health.

 
 

Wireframes

Triathlete focuses on synthesizing information from apps that athletes are already using to reduce redundancy and to gather all training information in one place.

Users should be able to see, on a high level, their daily activities, activity breakdowns, calorie intake/expenditure, and training program progress.

In addition, users should also see improvement recommendations for specific activities and be able to sign up for personalized coaching.


First Version 

The first pass at visual design helped establish the main points for the branding. Orange is used an energetic color to increase energy levels, an abundance of white helps make information readable, and a drawer system helps keep it organized. 


Second Version

A second pass at styling helped to refine the visual designs. The orange is soften and turned into a gradient to keep it on trend. A larger and softer drop shadow adds more dimension and helps differentiate the interactive components with the background. And illustrations are used in lieu of photos for the programs page to help users understand specific plans easily. 

 
 

What I Learned

It goes without saying that research is of the utmost importance. When starting in an area that you have little to no prior experience, it’s important to talk to users as well as see what solutions are already being used and are on the market. 

People training for triathlons are highly motivated and even sprint distances require a lot of work and time. Don’t assume that a triathlete will have the same goals and behaviors as other fitness app users. 

While much of user experience design is based on reducing friction and simplifying, don’t be afraid of including more. The most highly rated triathlon app looks clutter and bloated to me as a designer. However, it delivers results for it’s intended users and has rave reviews. 

In the end, leave your ego and assumptions out the door. Tech is not the end goal, it’s merely a tool for people to achieve goals.