Exclusive Fitness is a private gym that provides fitness trainers a place to train their clients and host group classes. In this case study, I was tasked with redesigning their responsive website and logo.
UX/UI Designer, Branding
2 weeksView prototype
Exclusive Fitness is a private gym in Houston, TX that provides gym services to personal trainers and class instructors. The private gym was opened amidst COVID-19 as a safe and social-distanced alternative to the busy public gyms with a motivating and friendly community. Anyone who wishes to work out at Exclusive Fitness must be working with one of the personal trainers.
In this project, I was tasked with redesigning the existing logo and desktop website.
Exclusive Fitness is a niche within the gym industry that only offers access to trainers and their clients. The business owner frequently received calls inquiring about working out at the gym without a trainer. Because of this, the new design should be clear to the viewer that the gym is available only to personal trainers and their clients.
For my research, I wanted to understand the fitness and gym industry and how Exclusive Fitness differentiates from the others. I drafted a research plan with the following research goals below:
Understand how a gym member chooses their gym
Learn what motivates a client to hire a personal trainer and how they find the right one for them
Determine how to improve the existing website to drive more business
My third research goal was to determine how the website could be improved to drive more business. In order to understand this, I analyzed various sizes of gyms and fitness classes' websites in order to understand how they present their offerings and the common UI patterns. Through my research I determined that Exclusive Fitness could differentiate its business from the others by highlighting the benefits of training in a smaller, social-distanced place.
Next I wanted to understand the perspective of the client and trainer. To do that, I conducted interviews with 3 participants who had an interest in fitness. I selected a personal trainer, class instructor, and client to interview in order to understand each perspective.
Once I transcribed my interviews, I was able to categorize and summarize the comments onto post it notes. This format allowed me to clearly see the patterns and form my own takeaways from them. Below is a small screenshot of this method.
My main research goals was to understand how to attract both clients and trainers to come to Exclusive Fitness. Below are my main takeaways that I learned through my competitive analysis and user research:
Next, I created two personas that fit the goals, frustrations, and fears of the user interview participants. The first persona is of the personal trainer while the second persona represents the client.
As the project task is to redesign the existing website, I first evaluated the original design to understand what core elements needed to remain. The original design was one page that included gym information, a class schedule, and social media information. At the bottom was a contact box for people to inquire about working at the gym. At first glance, the website is not clear that it provides only two services.
The original design asked too much of the landing page which caused the viewer to scroll to see everything. Because of this, I knew I wanted to split the information into multiple pages so that the viewer could easily access the information based on their task flow. For example, a trainer would be most interested in the gym partnership page while a client might be more interested in the group class schedule.
With this in mind, I determined the following pages to be created:
The landing page should have few elements on it and should summarize what Exclusive Fitness is and what services they provide.
This page will showcase the personal trainers that work at Exclusive Fitness. This is currently not a feature of the original design, but I wanted to include it because the gym makes its money through the personal trainers. That means it would be in the best interest of the business to show the personal trainers that Exclusive provides them with a platform for them to grow their own client base.
The schedule should show the user what classes are available throughout the week and how to sign up for the event. Currently, the method to sign up is to reach out to the personal trainer personally through Instagram, email, or phone. Designing around this business model will be a challenge as most gyms and fitness classes offer a way to reserve your spot online.
There should be a page that allows personal trainers to understand the benefits of working at Exclusive Fitness. Again, Exclusive's business model centers around partnering with private trainers so it is important for the personal trainer to be able to get the information they need easily.
Because Exclusive Fitness is a niche within the gym industry, the about page will help the viewers to understand how Exclusive's offerings are different than other gyms.
In the initial stages of my wireframes, I designed landing pages (right) similar to the gym websites that I had analyzed for my industry research. These designs included various information about the gym, trainers, and classes. Ultimately I determined that this design had the same issues as the original design; it was asking too much of the landing page and still wasn't clear that Exclusive Fitness isn't your every day gym.
Because of this, I designed a new landing page with two distinct CTAs for personal training and group classes. This guides the user based on their desired task and shows clearly that there are only two ways to interact with Exclusive.
The section at the top explains the COVID-19 benefits of working out in a smaller, private gym as I learned in research that this is top of mind for gym goers today.
The purpose of the personal trainers page is to provide the trainers with another platform to gain more clients. I learned during user research that both clients and trainers heavily rely on Instagram. Because of this, I included a popup profile that includes the trainer's Instagram feed and other personal information. By providing this information, the user may be more inclined to work with the trainer.
The next thing I was tasked with redesigning was the logo. The current logo design includes the gym's name and a vector of a person flexing their arm. I wanted to redesign the logo so that it can be transparent to be used on different mediums (eg. tshirt). I wanted to keep the full name in the new design as well as a reference to the gym.
After evaluating other gyms' and fitness classes' logos, I settled on the logo design below. The round shape was inspired by Planet Fitness and designed with a t-shirt in mind. The stars in the logo allude to the Texas' star and the colors were chosen based on the existing design.
Once the logo was created, I created a brand style tile to fit the new logo. Again, I chose these colors and styles based on the existing design and didn't want to stray from the dark theme of the original website.
When the style tile was finalized, I applied the UI kit to the low-fidelity wireframes to create a high-fidelity prototype for testing.
When it came to usability testing, my main concern was ensuring that the design clearly showcased Exclusive Fitness' limited offerings as this was a major pain point for the stakeholder. Additionally, I wanted to ensure that a client or trainer could complete the necessary transactions (ie. hiring a trainer or contacting Exclusive for more information) without effort.
After conducting the usability tests, I created an affinity map using the participants comments by grouping them logically and then labeling as a comment that was positive, negative, or opportunity for improvement. This allowed me to prioritize what changes to be made on the design.
One of the major pain points of the business-owner was getting frequent calls asking if they could come work out at the gym. Because of that, the main objective of my design was to clearly showcase what Exclusive offers. Ultimately, through usability testing I determined that my design was effective in this. Below are a few revisions that make it easier for the user to find information.
Adjust the trainer profile pop up to provide a preferred method of contact and clearer CTA
Make the information above the group classes stand out more
In this project, I was tasked with redesigning a desktop website for Exclusive Fitness, a local, private gym. Working with Exclusive Fitness was challenging because I had to think about how to design for a company that had a unique business model and creating an experience that communicated the services clearly.
While I was tasked with only redesigning the existing website, I decided to include a separate page that showcased the personal trainers the clients can hire. I chose to include this because Exclusive Fitness' revenue is ultimately through personal trainers. Through these improvements, I hope to help Exclusive Fitness generate more interest in the website and have the users interact with it in a way they haven't before.