The VFit
Redesigned a responsive website for a local business “The VFit: A Premier Group Fitness Studio”.
Roles
User Experience Designer (UX)
User Interface Designer (UI)
Deliverables
Competitive analysis
User Interview
Affinity Map
POVs and HMWs
Personas
Product Roadmap
Product Roadmap
Task Flow
Low-Fidelity Wireframes
High-Fidelity Wireframes
UI Kit
Usability Test and Findings
Tools
Figma
Otter
Google Meet
Maze
Background
The VFit: A Premier Group Fitness Studio is a local gym that promotes healthy living by creating the best fitness experience in the area of Powder Springs/Austell, GA. They offer boot camp, CrossFit classes, and nutrition coaching.
This gym has recently moved to a new spacious and more comfortable location. Their goal for the new location is to “provide endless possibilities for the growth of the gym and its capabilities to help members achieve their goals.” This is the perfect opportunity to revamp and update their website to showcase the new vision for their growing business.
Problem
Users face obstacles when gathering information about the gym's programs and associated prices. The website's navigation presents usability challenges, compounded by accessibility issues that affect legibility.
Solution
The gym will prioritize program and price visibility on the website to address user concerns. Navigation will be improved with a simplified structure, making it easier for users to find information. The "About" section will be revamped to enhance legibility and include coach biographies.
Competitive Analysis
A comprehensive competitive analysis was conducted to gain valuable insights into gyms that offer CrossFit programs or are CrossFit affiliated. The focus of this analysis was the gym's website and the information provided to both current and potential members.
Pros:
List out what plans they offer in detail.
Offers plenty of visuals oof programs throughout the site.
The information is clear and well laid out.
Coaches profile layout.
Cons:
Some content is repeated on multiple pages.
Coaches’ profile lists their qualifications but does not offer insight into who they are.
Pros:
Good visuals, video, and photos.
Yelp reviews are embedded on the site.Option to sign up for classes directly on the website.
A dedicated page for the workout of the day.
Cons:
No main About Us page.
The font size is small throughout the pages.
An overabundance of content on the home page.
Pros:
Coaches’ profile layout and offer insight into who they are. The text is legible.
Offers some information about their facility.
Success stories are listed on the site.
Cons:
The footer navigation is confusing. If you don’t know to click the menu icon, you wouldn’t be able to find it.
The top navigation layout is more mobile-friendly than desktop friendly.
Pros:
The program’s page has great information and is laid out well.
Great visuals on programs offered throughout the site.
A page dedicated to the facility.
Shows facility hours on site.
Cons:
No main About Us page. Coaches’ qualifications not listed.
The schedule isn’t on the main site. Hosted on wodify.
Only available in English.
User Interviews
For this project, I interviewed five people, which included a coach, one long-time member, two former members, and someone who attended a class once. I aimed to gather feedback from gym members and determine what information would be most useful for them when visiting the gym's website for information.
Key Quotes
“A community-based gym and having that support.”
“Cost is an essential factor when joining a gym, as well as class size and availability. Having classes that work with my schedule is important, like an 8 p.m. class.”
“Crossfit gives you more for your money.”
“The coaches section helps you get to know them better. Shows their specialties and educational background. When they teach the class, you can refer to this page.”
Affinity Mapping
Theme #2: The website's content was overwhelming and poorly organized, making it hard to find helpful information like class schedule.
Theme #3: Lack of clear information about coaches can lower confidence in class quality, emphasizing the importance of providing upfront clarity.
Point of Views
I’d like to explore ways to help new and potential gym members in accessing clear and concise pricing information because many users want to make informed decisions about whether or not they want to join a gym based on accurate and transparent information.
How Might We
How might we make users feel confident about class availability and attendance?
Personas
After analyzing the research findings and identifying common themes from the affinity map, I developed a persona that accurately represent the gym members.
Theme #1: Lack of price transparency on the website can discourage users, as cost is a significant consideration in joining a gym.
New Sitemap
Sitemap
I reviewed the current sitemap and found that it contained unnecessary pages and confusing links. To improve the user experience, I revised the sitemap by removing unnecessary pages and renaming "More Info" to "Schedule".
Old Sitemap
Information Architecture
User Flows
Based on my personas, these user flows were created. These flows depict the users' experience while navigating through a coach's profile, the programs offered, and the class schedule. Users follow these paths to complete their tasks as per the user flows.
Identifying Design Patterns Through Rapid Sketching and Mid-Fidelity Wireframes
I created low-fidelity wireframes based on the user flows I had designed. After that, I converted my initial wireframe sketches into digital designs and focused on enhancing the main screens and pages that contained detailed information about the gym. These wireframes were designed for both desktop and mobile screens. Since the website didn't have a proper homepage, I included it in the midframes.
High-Fidelity Wireframes
Schedule Page
Hours are prominently displayed at the top. Each class time displays which coach will be coaching the classes throughout the week.
About Us Page
Moreover, I revamped the Meet the Team section and individual coaches’ profiles by replacing the hard-to-read Canva-made cards with pop-up bio cards that appear when a coach is selected.
Usability Testing
Overview:
The tests were conducted through an unmoderated maze with a total of seven participants, none of whom were from my initial user interview.
Key Results
Task 1: Browse through the homepage.
Users found the home page to be organized, informative, and straightforward.
Task
Task 2: Browse through the About section.
Users found the About section to be clean and organized.
Task 3: Browse through the programs page.
Users found the information was easy to understand and navigate.
Task 4: Browse the schedule and gym hours.
Users found the fourth task the most challenging.
The schedule is buried at the bottom of the page and is difficult to find.
Key Quotes
"I didn't know what to expect on the "More info" page. I think Schedule or Calendar would be better fitting"
"Just some confusion with what to expect on the "More info" page and finding the clickable touchpoint on the responsive cards for the coaches."
"I don't remember all the details, but I liked that you could click on the individual card to read more details about each coach."
Final Prototype
Home Page
While creating the high-fidelity wireframes, I realized that displaying a lot of programs on the home page could be overwhelming for the user. To simplify things, I decided to focus on CrossFit, nutrition coaching, and personal training. Programs now have an entire page dedicated to them.
Takeaways
From my first encounter working with a client, I learned the significance of patience and adaptability during the process of a UX project. The client provided me with the chance to exercise my creativity to address user concerns while also aligning with their business objectives.
Consequently, the suggested redesign aims to entice new clients while also providing an indispensable resource for current members.
Home page
Programs page
Iterations
After conducting usability testing and consulting with the stakeholder, I made changes to the top navigation, the programs page and made sure that the schedule was easy to locate.
