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)

Roles

User Research
UI/UX Design
Visual Design

Deliverables

User Research
Competitive Research
Wireframes
Branding
High Fidelity Screens

Specs

7 days
Balsamiq
Sketch

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.

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

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.