WOD Genius - A CrossFit training app for iPhone
“
A random workout, the right timer and your personal records in one app.
WOD Genius
iOS app UX, UI and icon, 2014
About the project
WOD Genius is an iPhone app for CrossFit athletes. It builds a random workout of the day from the equipment an athlete has, then times it and logs the result. Its makers sent us a brief for version 3.0 in November 2014. We wireframed more than 80 screens, designed the full interface and drew a new app icon, a barbell made of dots.
Project
WOD Genius App
Industry
Fitness
Location
New York, United States
Date
2014-2015
“
Client Request
WOD Genius wanted version 3.0 to have tabbed navigation, an interval timer, easier workout logs and a place to save personal records.
WOD Genius
Version 3.0 brief, November 2014
Design Pillars
Core UX Principles
Profile, WODs, Start, Movements and More sit in a row of hexagon tabs, one tap apart.
Athletes tick the equipment their gym has, and the random WOD uses only that kit.
Messages sound like the gym floor, from Yo Champ! on an empty list to Nah, hold up! before a delete.
From the Research
What the Journey Map Showed
Weight Loss Comes First
People who wanted to lose weight were the main target group and the most likely to struggle, so the journey map follows one of them.
Fewer Numbers
The map crossed out screens full of figures. Each timer shows one large count and a word like WORK! or REST!
Progress Keeps Them Going
Under progress, the map listed personal records and new high scores, so PRs got their own list and form.
The Challenge
Problem Statement
The Main Goal: One App for the Whole Workout
Version 2 could already generate a workout and time it. The update had to add an interval timer, personal records and better logs, and still get an athlete from choosing a WOD to starting the clock in a few taps.
“
All the tools necessary are available in the app.
WOD Genius
App Store description
Our Approach
Solution
From Random WOD to Logged Workout
Sign up, gym setup, the WOD generator, HERO and Girl WODs, four timers, movements, personal records, workout logs and a new app icon. It is an example of our Mobile App Design work.
01 - Wireframes and Rules
A flow map of more than 80 numbered screens, with a note for every rule, finished on 9 December 2014.
02 - Visual Design
Hexagons, a red diagonal over a blurred gym photo and a color for each timer state, across 56 final screens.
03 - App Icon
Two icon options in March 2015. The second, a barbell drawn in dots, went into the final design.
Before & After
The Blueprint & Evolution
Version 2 to Version 3
We redesigned the Tabata timer that the client showed us in the 3.0 brief.
Before: the version 2 screen, dark and glossy, with flip clock digits.
After: a flat timer with the movement name, large digits and the cycles left.
Design
Key Features
A WOD From Your Equipment
Athletes pick the kit they have and generate a random workout, with the timer sitting right under the movements.
Personal Records
A list of PRs by movement, a form for weight, sets, reps and notes, and a screen for saving each workout.
Design System
Visual Identity
Typography
Exo Regular and Bold for the brand, and Roboto from thin to bold for the screens and the large timer digits.
Color Palette
Red for start buttons and the icon, green for work and save, orange for prepare and rest, on near black bars.
Rules in the Wireframes
Notes covered each case, such as swipe to delete, skipping the gym picker when there is only one gym, and empty screens for someone with no gyms or movements yet.
Impact
Handed Over for Version 3.0
Results for WOD Genius
Between December 2014 and March 2015 we handed WOD Genius the wireframe specification, the final iPhone screens and the new app icon.
WOD Genius
Result
By the Numbers
80+ Wireframe Screens
Numbered and annotated, from sign up to the workout log.
56 Final Screens
Exported for iPhone on 30 December 2014.
4 Timers
Standard, AMRAP, Interval and Tabata.
Process
Every Rule Written Down
Wireframes Before Color
Before any visual design, we mapped the whole app in a wireframe specification: sign up, gyms, WODs, timers, movements, PRs and logs, with error and empty states and a yellow note for each rule. Version 1 is dated 5 December 2014 and the final deliverable 9 December. You can see some of the results below.
Final Showcase
The WOD Genius App
