JAX gym case study
An overview
I think every person who has used a gym can remember a time when they were about to do their set at a certain machine and then someone takes the spot before they can reach it. Or the gym is simply too crowded and you start to feel overwhelmed. Maybe you've never gone to the gym and you want to start but just don't know how and you get confused by everything you see in the gym. And so I started this process to try and help that issue people have had for a very long time. I worked on that with JAX gym
JAX gym is a gym chain with locations all over America. Jax gym prides itself on being open to everyone and their fitness goals. Most users are teenagers and adults ages 18-40 although JAX gym is looking to inspire elderly people to be more active. JAX gym goal is to make the gyms more organized and inspire more people to start their fitness journey
The problem
The gym is often crowded and that results in some equipment or machines being busy because there’s not enough for all gym members. Another problem is that new people don’t know where to start with their gym and fitness journey and feel intimidated.
The goal
Make the equipment and machines be available for everyone to use during their time at the gym and make sure none of the things they want to use are busy or taken by someone else. Another goal is to Inspire new people to join the gym and start their fitness journey.
My role: UX designer responsible for every aspect of the JAX gym website
Responsibilities: Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on design and responsive design.
Understanding the user
I conducted user interviews which I summed up into user personas to better understand the users and their needs. I wanted to see their pain points and frustrations when using the gym. I discovered that many users who aren't in the fitness lifestyle want to go to the gym but don't know where to start and feel intimated by going to the gym. Other problems users faced is that when they want to use a certain machine it's often busy because someone else is using it and they have to wait for that person to finish which creates a lot of frustration and unnecessary waiting.
Problem statement:
Jane is a busy accountant
who needs to get done with the gym as quick as possible
because she wants to relax for the rest of her free day.
Problem statement:
Charels is a retired elderly person
who needs to start going to the gym
Because he wants to improve his health.
Site map
I made a sitemap to track a typical user flow and find potentional problems
The main user pain points that I concluded need to be adressed are:
-
No guidence for new gym members and what they can do to start their journey
-
Gym equipment is often busy because it’s being used by someone else
-
No way to know if the gym is right for the user because there are no reviews and thoughts from others provided
Starting the design
I first thought about how the design could help address user pain points and improve the user experience. Prioritizing useful button locations and visual element placement on the home page was a key part of my strategy. The main feature is displayed right on the homepage with the intent to be attention grabing. To combat another user problem, for new users that join the gym along with the membership a personal trainer will be provided so they can start their journey safely. There is a section of course&classes with new additions added every week, along with a forum option where users can chat with each other and ask for advice.
The booking process consists of
-
Choosing the location of the gym the user will go to
-
Choosing an estimated time the user will spend at the gym
-
The equipment they will use
With this, the gym will receive data on users so they can provide the equipment needed at the estimated time. If there's too many users at a certain time frame, the users can make agreements with each other in the forum on how to organize the equipment use.
Screen variations
Low-fidelity portotype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow to test with users.
Round 1 findings
Round 2 findings
-
Users wanted a forum option
-
There should be a search bar for every step of the booking procsess
-
Users should be able to go back and forth within the booking process
-
The booking option is not that visible and needs to be more clearly indicated
-
A majority of users got confused on the equipment section when they were supposed to confirm, as there was no confirm button and they needed to click on the finish section
Refining the design
Following the usability study I iterated on the designs. Made the booking option more visible and prominent and added a forum feature where users can share their gym experience and talk to other users and ask for advice.
After conducting user research and identifying problems I decided on new features. I added a confirm button when users are done adding equipment because somewhere confused that they had to click on the “finish” on the top part and there was no confirm option. When a user clicks on an added item a minus appears so that you can remove equipment easily
Mockups
Screen variations
High-fidelity prototype
To account for accessibility
-
I used headings and different sized text for visual hierarchy
-
I used landmarks to help users navigate the site
-
​All images include alt text.
Takeaways
Impact
The website and the main booking option motivates users to go to the gym
One quate from peer feedback:
“I feel like this solved a problem I didn’t even know could be solved”
What I learned
Ideating is truly the best way to go about UX design. I thought I had a general outline but I motivated myself to make as many variations and ideas as possible and in the end the finished design looked nothing like what I had planned at first. There's always opportunities for change and growth no matter what part of the deisng process you're at.
Thank you for reviewing my work!. If you want to get in contact with me you can review my about page