Exclusive Fitness

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.

ROLE

UX/UI Designer, Branding

Project duration

2 weeks

View prototype

Background

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.

project scope

In this project, I was tasked with redesigning the existing logo and desktop website.

CHALLENGES

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.

Understanding the industry

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:

Research goals

1

Understand how a gym member chooses their gym

2

Learn what motivates a client to hire a personal trainer and how they find the right one for them

3

Determine how to improve the existing website to drive more business

Industry analysis

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.

Industry analysis of large gyms and local gyms


User interviews

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.

Snapshot of my takeaways from user interviews

Research takeaways


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:

Persona development

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.

In summary:

Personas created from takeaways learned from research. Click to enlarge.

Evaluating the original design

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.

Determining the information architecture

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:

Landing Page

The landing page should have few elements on it and should summarize what Exclusive Fitness is and what services they provide.

Personal Trainers

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.

Group Class Schedule

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.

Partnering with the Gym

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.

About the Gym

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.

Initial design

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.

Redesigning the logo

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.

Final logo design and brand style

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.
‍‍

Exclusive Fitness brand style tile

Usability 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.

Affinity Map

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.

Section of the affinity map with the takeaways from usability testing

Testing Results & Next Steps

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.

HIGH PRIORITY REVISIONS

1

Adjust the trainer profile pop up to provide a preferred method of contact and clearer CTA

2

Make the information above the group classes stand out more

Conclusions

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.