Yoked CrossFit

April 11, 2021

Yoked CrossFit is a new CrossFit gym opening its doors not only for those looking for a killer workout, but also for those looking to satisfy their appetite in a way that aligns with their goals. Though they are a CrossFit gym, they will also be offering supplementary programming such as weightlifting, mobility, and metabolic conditioning.

They approached me to help them create an app that will allow their members to sign up for these classes as well as stay engaged in the community. Members and non-members alike will also be able to sign up for a meal plan through the "kitchen" part of the gym. Based on the plan they select, they will get a specified number of meals every week under the meal category of their choice. Of course, if hungry for more, they are able to add extra meals for that week as well.

Role

Sole Designer
(stat to finish)
Responsibilities

UX/UI Design
Branding
Timeframe

5 weeks
(15 hr/week)

Secondary Research

CrossFit
Roughly 50% are male and 50% are female.
The majority of people who do CrossFit are between the ages of 25 and 34, followed by 35 to 44. That is because people around that age startsettling into adulthood and want to regain or maintain their youthful figure..
People who are between the ages of 18 and 24, 55 and 64, and 65+ are least interested in doing CrossFit. 
Around 40% of CrossFitters have post-graduate degrees, and the annual income of over 50% is $150,000. That is because the careers you pursue with your post-graduate degrees pay better.
Even though monthly membership fees are not cheap and often exceed 150 dollars, the estimated failure rate of opening a CrossFit gym is 2%. 
Source: How ManyPeople Do CrossFit? (crossfitfortify.com)
Meal Kits, Plans, Delivery
According to the survey data, about 29% of millennials (those aged 18-29) and 26% of Gen-Xers (those aged30-44) report trying a meal kit service, compared to only 12% of those over age 45 say they’ve tested them out.
Generally, men are slightly more likely to order a meal kit, with 23% saying they’ve used a service as opposed to only 15% of women.
And 1 in 4 of those who have tried a meal kit are urban dwellers, as opposed to only 14% of those living in rural areas.
Those with more disposable income are definitely more game to try meal kit services: among income brackets, those earning over $100,000 were the top subscribers.
Source: Meal Kits: Who Are theBiggest Customers? | Money

Personas

Meet Alex, Lara, and Matilda.

In order to make sense of the data I gathered during my secondary research, I created three personas that match the three primary use cases for this app.
Click on any of the personas to view larger in PDF.
Alex: hardcore CrossFitter who goes every day and also participates in the meal plan
Lara: has own workout routine, only looking for an easy and healthy eating option for her busy life
Matilda: Trying to stay on top of her health and re-enter the fitness world

Empathy Maps

Alex empathy map
Lara empathy map
Matilda empathy map

Task Analysis

I wanted to make sure I understood how my users would use the app, so I created a task analysis of the most important features. This helped me start thinking about the architecture of the site and eventually transcribe it into the site map.
Click on image to open full task analysis for app.

Hero Flow

In order to better understand my user, I created a hero flow for my Alex persona. This was an important step as it helped me create the journey map after and get a deeper understanding of the necessary elements to be included. Below is the flow for using the "kitchen" aspect of the app, but when clicked will expand to show the rest of the hero flows.
Click on image to view full hero flow.

User Journey Map

Using the scenario from the hero flow, I created a journey map to identify potential pain points within the process. A journey map allows me to better empathise with the user by stepping into their shoes and imagining the task from their perspective.
Click on image to view full hero flow for all three personas.

Sitemap

Before I started building the app, I wanted to create a Sitemap so that I knew exactly what elements would be needed and how I wanted to structure it. The exercises above helped make this concise and intuitive.
Click on image to view sitemap in PDF

Logo and Name

The names in contention:
The chosen name incorporates both the gym element and the meal plan element with its muscle and food reference. For the logo of the gym, I wanted to convey the grunginess of the brand, the kind of scuff marks you may typically see at a CrossFit gym and its industrial feel. I felt it was important to incorporate the play on words in the gym's name: "yoked" to mean both "very muscular" and to represent an egg, from an "egg yolk".

Wireframes

Once I had a clear structure in mind for the app, I was able to start creating my wireframes. The overview and desired flow is pictured below.
Click on image to expand.
Feature Highlights
Navigation
An intuitive and low-space way to change between app features. Clicking on "GYM" opens a drop-down menu that allows the user to navigate to the "kitchen"
Scheduling
It was important to have the schedule tab be easily clickable for the user. As such, the buttons to help reserve a spot for class are large (thumb sized) and easily accessible. In addition, I wanted to make it easy for the user to cancel a class if they needed to, and as such I included that option for the reserved classes.
Social
Another aspect that was important was creating a social feature to the app. From a business standpoint, clients of a gym will be more likely to keep coming back if they are engaged in the gym and its activities. A social feature to congratulate the other members on their achievements and foster a competitive spirit was added.

Final Design

Welcome screen to viewing schedule
Input score for workout
Enter kitchen section and rate meals
View upcoming meals and add extra to cart
Full Prototype