Welcome to poke around the prototype :)
*Equipment Illustration credit to Freepik
Imagine this
Finally, you are about to hit the gym for the first time.
Standing at the check-in counter, you open the app. You're immediately greeted by a wall of 11 buttons that all look similar. However, the check-in button, the one you really need right now, is camouflaged among its 10 buddies.
It's peak hour after work, people are lining up behind you.
You begin to panic.
Would you call this a major setback?
That was me when I stepped into LA Fitness for the first time. Deciding to really focus on my health is already a challenge, and it didn't take long for me to see:
Hitting the gym is hard, and this app is not making it any easier :(
It takes two taps to check in, one has to choose the location every single time, and booking a personal trainer redirects you to a clunky HTML page… it all adds up, and I’m done: I’m putting my designer shoes to work!
A glimpse of the current UI
And I’m not the only one feeling this way — lots of other users are frustrated too, judging by the negative comments and that rough 2.2-star rating in the app store.
“You open the app at the desk to check in. Takes wayyy too long. The checkin scan square should be right there immediately."
“…instead of having to go and find my membership to scan it should be open the second I open the app"
“…it is very confusing the way it is now presented the scheduling in the app now"
“I hate having to use this app to scan in and schedule personal training sessions."
But hey, looking on the bright side, there’s definitely room for improvement.
Problem
The LA Fitness gym app currently offers a suboptimal user experience, resulting in user frustration and decreased engagement.
Specifically, users find it challenging to navigate the interface and locate essential information, which hinders their ability to utilize the app effectively, ultimately threatening long-term customer retention.
More than a UI Problem, it diminishes the business potential
I used to be the designer who judges a product mainly by its UI. But over time, I've moved past that mindset and figured out that when resources are tight, functionality really matters more than how it looks.
That said, the UX of this product is where the real problem is, and it makes me curious about all the missed opportunities.
I summed up 3 major reasons why LA Fitness app needs a refresh to unlock it's full business potential.
1
2
3
As for reason 3, the parent company of LA Fitness is debuting a new upscale concept called Club Studio. This might create a great opportunity to initiate a complete rebranding of the digital experience across the parent company. Find more about this here.
Define 4 Major Frustrations
Instead of doing a whole make-over, I want to tackle the most critical frustrations. With insights gained from talking to some friendly faces in the gym, and some digging in the online community, here are the major concerns that users would prioritize improving.
Check-in takes too many clicks
Clustered navigation
Reserve and modify class schedule is a mess
Reserve a personal trainer is intimidating*
Personal training is a huge opportunity in terms of revenue growth. It takes up about 12.5% of the revenue for gym clubs in the US, according to a research from IBIS World.
Unfortunately, the app didn’t really offer a clear pathway to access their personal training service, let alone expect users to pay for it.
How Competitors Address those Issues
To figure out what competitors out there are really doing, I analyzed the app of five major players in the fitness industry. Here's the gist: while other competitors have jumped on the progress of the 2020s, LA Fitness seems to be stuck in the 2010s.
scroll to see competitors review
I also took the opportunity to drew inspiration from these competitors. What’s the main focus on their home screen? What stands out the most? I went through the home section by section, spotted common features, prioritized the sections, and decided to focus on six key features.
6 key functions
Dashboard / Join us reminder
My schedule
Equipment tutorial
Check-in
Reservation
Workout guide
I will address how I tackled the first two frustrations: clustered navigation, and the tedious check-in process.
Restructuring Information Hierarchy
The current navigation, homepage and sidebar included, has a total of 29 items (this is more than a cognitive load, it's a cognitive truck)
Of course, some functions overlap, and there’s no clear hierarchy.
By cutting out the repetitive options, i managed to regroup them to different tiers based on priority and how often they’re used.
This is a key step for me to make better decisions on feature placement in the app.
· A rule of thumb is to limit the maximum click to complete a task in different tiers.
· Setting this rule helps me to enhance the navigation clarity and efficiency.
Lo-fi Wireframe
How I Made Check-in Process More Seamless
When initially sketching wireframes for check-in function, my approach was mostly brutal:
Featuring the most gigantic membership code on the home screen, you can't miss it ↓
Option A
But this idea didn’t grow on me. As I found out there were some constraints in both technology and business sides:
Technical Constraint - The ability to automatically refresh the QR code might be limited by the platform's restrictions
Missing Business Opportunities - users may focus on the QR code without fully engaging with other features
So I continued exploring more options.
Option A
Option B
Option C
explore different ways of check-in code design
Option A:
featuring a giant membership code upon opening, center of the viewport, zero click needed
Option B:
featuring a peek of the membership code at the bottom, mimicking a physical card in a card holder
Option C:
featuring a prominent middle button in the bottom navigation bar
I tested it with couple friends, 7/10 of them opt for option C.
Why Option C stands out
Consistency–no matter where you are in the app, you can always navigate to the code in one click
Eye catchiness–It’s prominent without being too distractive
Seamless integration–users can interact with the QR code while still noticing other features
4 Frustrations to 4 Opportunities
The goal I keep in mind during the revamping process is simple:
Simple user flow, short task completion time.
1
One tap check-in
Streamline check-in experience to speed up entry, reduces frustration at the setout
hover over the image to see before
2
Optimized Navigation
Personalized homepage–people value a product more if they feel it's theirs. A personalized section featuring a greeting and schedule could enhance this endowment effect.
Scrollable sections– unpack more content while maintaining a compact look
Opt bottom navigation–ensure high frequency functions are more accessible
hover over the image to see before
3
Intuitive class booking
Reservation portal–a schedule management portal with user-friendly interaction
Optimized UI–improve clarity of complex information.
hover over the image to see before
4
Enhanced trainer booking
From 5 taps to 1–achieve a higher task completion rate to drive more sales
Informative–allow users to gain additional insights about the trainer prior to booking a session
hover over the image to see before
Hi-fi Wireframe
Style Guide & Component Library
Reflection
This project has been a rewarding journey to practice my skills with figma components, variables, and design system.
Testing ideas with mid-fidelity wireframes to streamline decision making process, ensuring getting feedback at early stage
Using variables and components, as a part of design system, speeds up the design process significantly. It enables flexibility in testing different idea while maintaining design coherence