Train • Share • Grow
Overview
Duration:
Ongoing
Role:
Lead Designer
Software:
Figma, ProtoPie
UX/UI Product Design | Branding | Problem-Solving
Project Overview
CrossFit, as a fitness phenomenon, is experiencing exponential growth, outpacing traditional gym memberships and workout routines. Participation in CrossFit has surged by 15% in the past year alone, with enthusiasts citing its dynamic and community-oriented approach as key drivers. Online platforms dedicated to CrossFit have seen a staggering 30% increase in traffic, indicating a strong and engaged user base.
Problem
In the fast-growing digital fitness market, all software seems to be taking the same approach. A “management first” approach that prioritizes the gym owner and manager’s user experience, over the clientele. This approach has left a significant market gap for the development of “Athlete First” software that provides an enhanced experience inside and outside of the gym.
Project Goals
Develop a mobile application that provides an “athlete first” experience.
The Process
Empathize
Define
Ideate
Prototype
Test
Empathize
- Research Approach
- Athlete Interviews
Research Approach
To better understand the needs and priorities of athletes, I decided to take a two-part approach.
Part 1: Review my personal experience as a competitive CrossFit athlete and reflect on what would improve my personal experience.
Part 2: Conduct micro interviews with a broad range of gym members to better understand their needs.
Interview Questions
I developed 3 key points to guide my interviews with willing participants at the CrossFit gym.
Workout Tracking
6 out of 8 participants tracked their workouts in some form. Three out of the 6 used notebooks or did not consistently track their fitness progress. The other three who tracked their workouts digitally were all higher-level athletes or athletes who considered themselves more seriously committed to CrossFit. They all used the application that was provided by the gym.
Fitness Habits & Motivators
Two participants competed in CrossFit, and one of them was a coach. Training consistency ranged between 3-6 times per week. The key motivators for all athletes interviewed were feeling good, and social community. There were two additional motivators of self-improvement, and being healthy.
Current Experiences With Existing Apps
7 out of 8 participants have had some type of workout or fitness app in the last two years. The primary user issue was the app feeling “outdated” or confusing to use. Several of the athletes displayed an interest in a simpler application that used a more intuitive user experience.
Define
- Persona Development
- Problem Statement
Persona Development
Reviewing my research I noticed several similarities across all interviewed participants. They all were willing to try new fitness apps but were staying with the gym-provided software, rather than finding something better. I also noticed that those who displayed the most interest in finding a new workout tracking platform were the most involved and or traveled between multiple gyms. To combine and summarize all this data I created the user persona of Ethan Steele.
Ethan is a business professional and evening athlete. Working a 9-5 he is busy and goes to CrossFit on a consistent evening basis to decompress, work out, and hang out with friends. Overall he enjoys the atmosphere and experience of getting fitter. Ethan does tend to struggle to stay motivated when class sizes are small or when training alone outside of the gym.
Growing up, Ethan participated in middle school soccer and cross country. His goal is to get back to a level of moderate competitive fitness and compete in a local team competition with some of the other members of the gym.
Ethan likes tracking his workouts because he uses it to see measurable progress and improvement over time. He currently uses the default notes app on his iPhone to track his workouts and will reserve classes through the gym-provided app. He doesn’t use the gym-provided app to track his workouts since he finds it difficult to quickly look back upon results.
Problem Statement
Based on my user persona and the actual athletes that I had interviewed I formulated my guiding problem statement for this project:
“How can we bring the social aspect of the gym to the user, regardless of location. While also tracking workouts and motivating the user?”
Ideate
- Storyboarding
- User Flow
Ideation & Storyboarding
To start the design process for the WODBumP app I took all the interview data, problem statement, and user persona and made a list of common needs and features that existed. Below is that list:
- Workout Tracking (the ability to create custom workouts)
- Workout Timers (the ability to measure workout durations and receive time splits)
- Social Community (a way that athletes could be engaged and rewarded for social engagement)
With these three primary features in mind, I started sketching out several variations of the app. I ran through the “Crazy 8” UX drill several times, generating several potential variations and user flows for the app.
User Flow
Prototype
- Wireframes
- Branding & UI Kit
- Final Design
Wireframes
I took all the storyboards the from Crazy 8’s process and was able to iterate and refine the design into a low-fidelity prototype in Figma. This process ended up including several changed to the designed screens to overall improve the user flow and stick to the needs of our initial user research.
Some of the changed include:
- Adding digital badges that are awarded upon the total amount of workouts created.
- Refining the workout creation process and reducing the number of clicks the user needs to make to complete that flow.
- Simplifying the signup process by spreading the input across multiple screens.
LoFi User Test
Upon completing the development of the lo-fi prototype I returned to the gym and ran a qualitative research study on how users interacted and used the app. Five members participated with a variety of backgrounds and fitness experiences. Throughout the entire process, I took notes and upon completion, I sorted user pain points and other feedback into categories via sticky notes.
The overall research findings are broken down below:
- Workout score tracking types: across the CrossFit style workouts there are several types of score tracking, including time, rounds and reps, calories, distance, and more. The app needed a way to quickly switch between all these score types. I revised this by adding a menu on the score logging screen where users can switch between all score types. Additionally, a tool tip is displayed to the user on their first time through the flow so that they understand how to use it properly.
- Workout visibility on the timer screen: users want to be able to see their workout while the timer is running. This is beneficial for when the workout is longer or difficult to remember. I added an additional screen where the user can swipe between the timer in full-screen view, or in a smaller view with the workout displayed. This revision still allowed for the initial design of having the timer numbers in full screen so that it could be seen from further away.
- Workout effort rating: CrossFit athletes use a rating style called Rate of Perceived Exertion (RPE). This is used to categorize the difficulty of a workout. I added this feature to the design by adding an additional screen after the score input screen that allows the user to select a workout level between 1 and 10. For each number, there is an assigned value explaining what that effort is and how it should feel.
Branding & Style
WODBumP had a pre-existing logo but the rest of the branding and style needed to be developed. When developing this there were several factors that I took into account:
- What are some branding colors & styles used in health & fitness apps/websites?
- What type of branding and colors do CrossFit-specific products use?
- What would keep the design high contrast so it is accessible to users of all needs?
- In what environment would the user most likely be using the app? (ie. high sunlight, low light, busy area)
With all this data in mind, I decided that WODBumP would run on a “dark theme” with a more vibrant, neon color for the highlights.
The logic behind this included that the highlight colors would display with a darker background with better contrast. This is significantly important to running the timer which is a primary feature of the application as users will not have the device close by and will need to see the numbers from afar. This also proved to be beneficial for any users with any visual impairments. I went with a neon yellow as it gave the designs a more “athletic” feel.
Additional Prototyping and Developer Hand Off
- ProtoPie Prototype
- Developer Design Library
ProtoPie Prototype
ProtoPie is an advanced prototyping tool that allows the designs to be developed to be as realistic as possible. This includes the ability to create detailed interactions and carry data input across multiple screens.
I took the Hi-Fi prototype from Figma and further developed it in ProtoPie so that upon handoff to the development team for WODBumP they knew exactly how each item was to be animated and interact.
Developer Handoff
As part of the design project for WODBumP, it was key to have a smooth developer handoff. I took the final Hi-Fi prototype from Figma and developed an entire library of each screen, its interactions, and all states. This library consisted of over 70 screen states and significantly reduced the time of frontend development.
Results
Create Workouts
Upon opening the app the first screen the user will see is the workout creation screen. This allows the user instant access to workout timers and creation, minimizing congestion in the user experience.
Users can also redo workouts via the button in the top right, or schedule workouts in the top left.
Workout Timer
The WODBumP workout timer flips primary and secondary colors to deliver a high-visibility design that is easily viewable across the gym. A secondary workout timer screen displays the user’s workout and can easily accessed by swiping left. Round tracking and time splits are measured by the tap of a large round count button. To provide an optimal user experience the timer audio volume can be adjusted via the button in the top right corner.
WODBumP Levels
To provide a gamified experience WODBumP uses workout levels. Workout levels are achieved upon the total amount of workouts completed by the user. These levels come in the form of digital badges that are enabled upon achievement.
Have any questions about this project, or want to work with me?
Feel free to reach out via the email below!
CrossFit is a registered trademark of CrossFit.com, WODBumP is a registered trademark of NOREP LLC