The LA Fitness App : Reimagined
OVERVIEW ROLE
LA Fitness is an American gym chain with more than 700 clubs across the United States and Canada. The company was formed in 1984 and is based in Irvine, California.
This was a personal project that I took upon myself after acquiring a club membership and installing their app. Regarding their existing app design, I felt like there was a lack of collaboration and quality control or there just wasn’t a designer. So I took it upon myself to have fun while reimagining a new LA Fitness app.
The Process
My design process for this project was to identify areas that can be improved, friction areas with the already existent app, and reimagining a more minimally approached redesign.
I started by contemplating the apps general purpose and main use cases. Next, I conducted user research at the club with the app redesigns. Identifying the features and experiences people liked as well as understanding any pain points for the customers. From there, I studied their current app as well as existing fitness app designs to fuse together a design that felt intuitive.
Method and Tools:
User and Market Research, Wireframing, Low-fidelity Prototyping, High-fidelity Prototyping, Figma
Understanding the problem
As I acquired a gym membership with my friends… we all downloaded the app to gain access to the gym. As soon as we pulled up the app, there was a shared sentiment… and it was… “this app sucks". I wanted to know more on the details on “why did it suck?”
So I did a poll on my Instagram Story and did some in-person surveys.
People shared…
”The design is just too cluttered. It’s just ugly.”
“I only use the QR code and it’s basically hidden.”
“I feel like they make enough profits to improve their app… especially if there are so many people using it.”
“I personally think the boxes with all their strokes is dumb.”
The Problem Statement :
Gym members are underwhelmed with the lack of quality from the LA Fitness app to the point that their brand perception of LA Fitness is affected… and their user journey to access the only feature of the app that they use is too tedious.
I ‘liked’ their post cause it was so straight forward. 😅
What I discovered from user interviews
Users did not like the overall design aesthetic.
The QR code was too many clicks to gain access to.
The boxes that provide a call-to-action weren’t even being used.
Users do not look at the advertisements at the top of the app; however, LA Fitness wants it to be seen.
The Design
From listening to the users’ feedbacks and also experiencing the problem myself, I decided to create a quick access for the QR code that made it 1-click away.
I created two options :
On the home screen - being placed above all the menu options as a quick access that can be swiped away. When the user swipes down, the QR code would take the full screen. The reverse gesture, swiping up, would allow the square action buttons to take the full screen.
Top-left quick access icon - the QR code would be accessed by ‘tapping’ on the QR code symbol found in the top-left of the screen.
After conducting interviews by displaying mock-ups and asking which method they would prefer… users shared they were “indifferent” because they felt both were accessible and convenient. So taking into account form and function, I went with the right option aka Option #2 because the QR code is only used for entering the club. After entering, the QR code is no longer needed and doesn’t need to take up screen real estate.
Next up, I designed a couple more views….
Training View - I noticed on the existing app’s design there were buttons to access “HIIT by LAF”, “Personal Training”, and “At-Home Workouts”. I figured these could all be combined into one. I called it “Training” because it was all forms of training where the app would provide resources like videos and recommended workouts. Similar to other apps like ‘Sworkit’ or by searching ‘ab workouts’ on YouTube.
Schedule View - A calendar view that tracks a user’s attendance to the gym. There’s a lot of room for feature implementation here. Examples can be like tracking what area of the body that was worked out. Additionally, it could be used for ‘court reservations’, ‘personal training scheduling’, and ‘class look-ups.’
Find My Club View - Again, on the existing app, there was a button labeled ‘Find My Club’ which allowed users to find their local LA Fitness gyms.
Announcements + Ads View - Reimagining the ad space for the app. Previously, it took front and center at the top of the app where there was a 3 section slider of advertisements.
Training View
On the previous app, as shared above, there were several menu buttons that could be grouped together. The titles were ‘Pilates by LAF’, ‘Personal Training’, ‘At-Home Workouts’, and ‘HIIT by LAF.’ This view was designed to be minimal and straight forward. I would like to add a ‘filtering’ option to this view as there are a lot of unique personas apart of the LA Fitness club. A reason to use your phone that adds to your workout that’s not a distraction.
Schedule View
This view could house the scheduling process for personal trainers, reserving a basketball court, and even tracking workout data by day. It can also provide a list of classes that may interest you that will auto-populate the calendar as a reminder a class is coming up. It has possibility to provide you notifications for when the class you are interested in is coming up. And if you like to time block… taking advantage of a ‘program workout’ which will load up a visual for you to work out to. The LA Fitness app could be more than just accessing a QR code to be scanned.
Find My Club View
Below is the existing app’s ‘Find My Club’ view and below that is my redesign of what it could be. I designed a hybrid app plus list view of the local gyms allowing them have not only the text, but visual representation. Additionally, I saw that the existing app’s design doesn’t let people know if the gym is ‘open’ or ‘closed'. A user who I interviewed shared that they used the ‘Find My Club’ locater and had to exit the app to ‘Google’ the gym to make sure it was still open creating an unnecessary additional step.
Announcements + Ads Pop-Up
The ads were previously at the top of the app within the rectangular container. Since LA Fitness wants the ads to be seen and based on user feedback; no one looks at the ads. I implemented a pop-up window that would disappear after 20 secs or if the user commits to ‘tap’ on the ‘close’ button. Additionally, this pop-up window allows for important announcements to be shared by the management team regarding relevant club notices.
