Case Study
Usability testing and website redesign for an inclusivity-minded group fitness gym in St. Louis Park, MN
Background and Problem
Skybox Gym is an independent gym located in St. Louis Park, Minnesota. Classes are structured in a group fitness model and Skybox prides itself on a holistic approach to fitness that is inclusive to everybody. Our research team was approached to perform usability testing on the Skybox website and make recommendations for improvement. Per client brief: “The website’s primary goal is to demonstrate what the gym and its classes both look and feel like. The site sets expectations for prospective customers and provides pricing and plan information. It lets customers purchase class packages and memberships, schedule and book classes, and sign gym waivers.” Our research team began work with heuristic analysis of the existing website with six client-provided tasks in mind. After hypotheses were established for the most important areas of opportunity in a revised website, usability testing began with 8 representative users in the area who were: parents, young professionals, and currently had a fitness routine or an interest in beginning one. Usability testing revealed a strong existing web design that could be most immediately improved by clearer pricing and membership information, more detail about workouts, and more intuitive navigation from the home page to key areas on the rest of the site. Affinity diagramming was performed to synthesize our research findings and a findings and recommendation report was drafted for Skybox. Three high-fidelity prototypes of proposed changes were then drafted for consideration.
Roles:
UX Designer
UX Researcher
Methods:
Secondary research
Heuristic analysis
Think-aloud method / directed storytelling
Affinity diagramming for research synthesis
Findings and recommendations client report
Prototyped website revisions for client review
Tools:
Figma
Zoom
Pen and paper
Adobe
Keynote
Research
Our research team began research by conducting heuristic analysis of the existing Skybox website. Two user goals for further testing were established:
Identifying pain points with findability of key tasks (booking a class, contact, signing up for membership)
Assessing the hierarchy key elements of the user flow and the visibility of key tasks
Skybox also provided six key tasks for evaluation: 1. Find the information needed to determine the gym environment to decide if it might be worth checking out 2. Find if there are any introductory deals for new customers 3. Learn the costs associated with the gym 4. Sign up for a membership that gives unlimited classes per month 5. Sign up for a class and 6. Asking for further information about Skybox.
Heuristic analysis was performed on the existing website with the user goals and six key tasks as a guide.
Background research of Skybox concluded that the website functioned well on most levels. Hypothesized potential usability issues including ease of booking classes, differentiating between membership plans, and possible user desire for more information about specific workouts. It was now time for usability testing with primary user groups identified by Skybox. Our research team selected 8 representative users and conducted interviews over a two day period. Users were interviewed using a combination of directed storytelling questions for background information: (Can you share a little bit about your current fitness habits/routines?) and think-aloud protocol for usability evaluation of the tasks: (Now let's assume you decided to attend a class. Can you show me the process you'd follow to sign up for one?)
Usability testing results were conclusive: Skybox had a solid website (7.125 average rating on “usefulness” on a 1-10 least useful / most useful scale) that performed core functions very well. All users were able to quickly determine that Skybox was a group fitness gym, as well as identifying its mission of inclusivity. All users were also able to book classes and find pricing information for memberships, but issues were present for some users. Many users spoke to a desire for more robust detail about workout types, easier navigation or layout of membership plans, and a user flow for signing up for classes that didn’t first steer users to the “Location” page of the website. While most users praised the looping video on the main page as informative and visually pleasing, one user with a background in accessibility design mentioned that an inability to pause the video might overwhelm some viewers.
Affinity diagramming for all data was conducted in Trello and key findings began to take shape. User testing largely corroborated research assumptions: Skybox had a solid website that could be made more usable with some minor adjustments.
Findings and Recommendations
A findings and recommendations presentation was drafted for Skybox’s consideration. As an independent gym in the crowded fitness market, it was vital for Skybox’s class information, membership plans, and booking options be as user-friendly as possible to differentiate from the competition and offer a seamless experience on the web (where all members must book classes). While the existing site received high usability ratings overall, it was vital that these opportunity areas be improved. A central piece of the findings and recommendations report included three page prototypes designed in Figma that could offer the most improvement for Skybox.
Recommendation
Recommendation
Revision
Recommendation and Revision 1 centered around a more accessible and clean main page. The important “First Class Is Free” promotion offer was originally in a small white font that usability testing found easy to miss. After revision, the button will not be easily missed. The “Book A Class” button in the upper right was in a red button format. In the prototype, the button is a more visible white text on black background. Font sizes have been increased after prototyping, with a transparent shader placed behind the text for visibility. A subtle “Pause Video” button has also been added for users that might find a video loop distracting. Menu buttons were previously displayed in Proxima Nova, upon revision, they are displayed in the popular web-font Inter for greater accessibility and reducing the risk of browser incompatibility on older devices.
Revision
Recommendation and Revision 2 centered around a more navigable pricing page. Class plans were originally sorted on a carousel with red buttons and were not sorted by price. Usability testing revealed that the carousel slowed down some users. In the prototype, pricing plans are now sorted by price in black buttons that users cannot miss or mistake.
Recommendation and Revision 3 addressed user feedback around more information being present regarding workouts. Originally, the Workouts page featured a carousel with “fast facts” about Skybox’s group fitness classes. In a competitive fitness market, Skybox should provide slightly greater detail to assure customers they’ll be entering a supportive but serious and well constructed fitness program. This is hopefully achieved in the prototype with individual class sessions each getting a card that can be clicked for further information.
Lessons Learned
Skybox handed over a website for evaluation that was in good shape, with usability testing showing very positive assessments overall. Users were almost always able to complete key tasks, but sometimes with issues, particularly with membership and class sign-up. In some cases, a small number of users reporting an issue with a feature might not warrant revision. But in Skybox’s case, membership and class sign-up are mission critical features and needed a solution in prototyping. Similarly, more robust information about workouts was not universally suggested in testing. But in the case of a local gym that seeks to differentiate itself from the competition, many fitness enthusiasts may crave more detail, leading to the Workouts page overhaul.
Read the full Findings and Recommendations report here.