24GO Case Study
Scroll down to learn more.
Project Details
Type
Adding a Feature
Role
UX Researcher, UX/UI Designer, UX writer
Length
4 Weeks
Tools
Figma, Adobe Illustrator, Google Sheets and Docs, Pen and Paper
Background
24-Hour Fitness’s, 24Go mobile app, allows users to seamlessly track their fitness progress, check in "touch-free" to clubs, reserve studio classes, and more.
Problem
As a 24-Hour Fitness member, I've received feedback from fellow members at my local club regarding the consistent overcrowding of our gym.
Goal
Understand user frustrations, emotions, and areas of friction when going to a crowded 24-Hour Fitness club to see how their workout experiences can be streamlined by integrating a feature within the 24GO app.
Empathize
Survey
Starting research with a survey, I drafted questions that sought to get insight into current experiences, areas of friction, and frustrations with crowded gyms. I then scouted my local 24-Hour Gym for participants in the survey and managed to acquire 22 participants.
There are currently two methods of checking in at a 24-Hour Fitness gym, via the 24Go application or the by using a combination of member biometrics and phone number. I asked this question to get insight into how many participants opened the app during their gym visits to see if there was familiarity with the app.
Key Insight: The majority of participants are checking in via the 24GO app.
Key Insight: While there was a wide arrange of feedback, the majority of the participants mentioned viewing crowd levels. One participant noted that “Planet fitness has a crowd meter on their website”. I later used this for secondary research when looking at competitors.
“Maybe knowing the peak hours of the gym to try to avoid as much as possible”
Additional keynotes from the survey:
Some participants were already exposed to features that helped streamline crowd levels
The majority of participants visit the gym 3 days or more and use the 24GO to check-in
The majority of participants experience a crowded gym
Participants would find it insightful if they knew their gym was busy ahead of time
Many participants leave the gym or resort to full-body workouts when crowd levels are too high
Competitive Analysis
As secondary research, I began researching online to see what the competition had to offer. I compared 24-Hour Fitness to some of the most known gyms in the nation as well as an app that was designed for “beating the crowds at gyms” to see how they streamlined workouts.
Out of the nationwide gyms I researched, I couldn’t find any information regarding live gym traffic for Anytime Fitness, LAFitness, and Gold’s Gym.
Key Insight: Design elements I found effective were Crunch’s messaging, Planet Fitness’s landing page hierarchy, and GymFlow’s crowd history.
Analyzing the Competition
Crunch Fitness
Straight to the Point
UX Writing feels human
Measures crowd with word/meter
The crowd meter is a progress bar
Planet Fitness
The crowd meter is shown on the landing page
Ability to Check-In
The meter measures crowds with tick marks
Ellipses to expand options
GymFlow
The app no longer exists
Crowds measured by a percentage
Shows the current, past, and possible future crowd state
User Interviews
For some primary research, I interviewed 5 participants at my 24-Hour Fitness gym regarding their gym experiences.
Here are a few notes:
A common pattern was participants find themselves mentally prepping themselves for the gym
The participants I interviewed avoid going to the gym from 4-8 PM as it is when they have noticed the gym is the most crowded
The participants I interviewed only use the 24GO app to check in at the front desk, some stated it’s “faster” and “avoid touching pin pad”
Other frustrations at the gym include: dirty bathrooms, broken equipment, crowded gyms, people who “hog” machines
When asked about a feature that would allow them to view crowd levels at the gym, most agreed that it would be helpful and would use it to their advantage
Define
What We Identified Through Research
Through primary, secondary, and online research I found that crowded gyms tend to disrupt workouts and overall turn members away from their local clubs. While some participants deal with crowded gyms, many would like to know ahead of time to plan accordingly. This proved insightful as all interview participants noted they partake in some sort of “mood setting” prior to getting to the gym, whether it be taking pre-workout or listening to music. Thus, a crowded gym appears to create friction and interrupt gym experiences.
Thus from research, I believe a crowd-level feature would help lessen frustration and improve overall gym experiences at 24-Hour Fitness.
Creating a Persona
After reviewing competitors and deducing survey results, I proceeded to create a persona that would embody the task flow of navigating the 24GO app with the added feature.
Ideate and Design
Information Architecture
Prior to ideating and creating any designs, I opted for analyzing the current Information Architecture of the 24GO app. I found from creating a quick site map that the app heavily focused on workouts: Top Workouts, Recommended Workouts, Workout of the Day, and more. While workouts are definitely something that should be on a gym application, I felt some exercise glossary or “how to use this machine” glossary was missing as not all gym members might be as experienced as others.
It is also worth noting that nowhere on the app was there an indicator of how busy gyms tend to be (no historical patterns).
Click image to expand.
Brainstorming Where the Feature Could Live
After looking at the Information Architecture of the 24GO app and noting down areas where the “crowd meter” could live, I found that the best place for the feature to start would be the landing page.
Participants during the interviews and survey noted they only use the app for checking in at the gym. To bring some familiarity and consistency with quick actions such as checking in, I began analyzing the landing page to see where the feature could reside.
Current Landing Page of the 24GO app.
A wireframe sectioning out the 24GO landing page.
Key Insight: After reviewing the landing page and noting down areas where the feature could reside, I opted for the “Welcome Message” Section, here’s why:
The current design leaves plenty of empty space that could be utilized
It is the only section without anything to interact with
Positioning the feature here would give the feature a visual hierarchy
Ideating Solutions
After determining the “Welcome Message” Section could be utilized to house the crowd-level feature, I began sketching some wireframes on Figma using inspiration from the competition. Below are some sketches with annotating notes.
Click image to expand.
Initial Designs for Feedback
This initial design considered the following:
Ability to check in and view crowd levels like Planet Fitness
The feature was full width
Option to view club details
This design considered the following:
The feature lived within the margins
“View Details” was a CTA of its own
Removed the option to “Check In” as the action did not align with the information architecture of the container
This design considered the following:
CTA color was changed to make it a secondary action and so as to not fight for screen real estate with the “Check In” CTA at the bottom
Added ellipses to allow users to view more info (later removed)
Testing
Initial Prototype for Testing
This initial prototype for testing considered the following feedback from peers:
Removed the container box as it made the landing page too top heavy
Added a dropdown arrow for quick access to “View Details”
Details included a crowd history graph with the current day/time on the same page giving the feature more usability
Usability Testing
Going back into my local 24-Hour Fitness gym and actively recruiting 3 participants, I took the initial prototype to the field for usability testing. The goal here was to see how successful the feature proved to be and if any insight could be gained to further improve the overall functionality:
Here’s what I learned from initial testing:
Making updates where needed
After creating an affinity map, reviewing notes, and considering feedback from participants, I revised the initial design to include the following in the second iteration:
The font size for the crowd meter label and times shown underneath the history graph was updated to 14px
The background gradient was removed as it disrupted the contrast between the background and text. I updated the background to solid color( color code#F9F9F9) to be consistent with other areas of the app and improve readability.
The current day and time were made with similar colors for consistency (color code #61B2CC)
Updated spacing between the feature and the search bar to 24px instead of 16px for readability
Reflection
After the first iteration of the crowd feature, I would test once more with the same participants (and new ones) to see if the updates made were sufficient from a UI point-of-view as that is where most frustrations occurred during testing. However, the feature was successful in completing its main goal of letting users know crowd levels.
As a designer, this project has been instrumental in my growth and problem-solving approach. By utilizing existing solutions, I was able to explore new avenues and overcome challenges with greater efficiency. Ultimately, it was a rewarding experience working on a solution that could potentially benefit my fitness community and hearing that they would utilize the feature. I am confident that such a feature will become a reality in the near future, not only to enhance user experience but also to keep pace with competitors and achieve business goals.