Skybox: is their website as welcoming as their gym?
Skybox is a gym in the Minneapolis area that offers instructor-led group fitness classes that emphasize practical workouts, meaningful interpersonal connections, and a highly personalized approach that is welcoming to all situations and skill levels.
They have a live website whose purpose is to clearly communicate the look and feel of the gym, inform prospective members about plans and pricing, and allow current members to book specific classes during the week.
My Role
UX Researcher
UX/UI Designer
Tools
Figma
Miro
Keynote
Notion
Methods
Heuristic Analysis
Usability Testing
Recommendation Prototyping
The Current State Of Affairs
Usability Review
My team was asked by Skybox to evaluate the usability of the website. They wanted to know if it was easy to navigate for current attendees and especially for potential new members. To give you an idea of the what the website looked like, here are screenshots of the six main pages.
Home Page
Location
Who We Are
Pricing
Workouts
Book a Class
Who Are We Designing For?
Primary and Secondary User Groups
Their Primary User groups included parents looking for a convenient way to stay active and students looking to socialize and improve their fitness. Secondary User groups included students wanting to stay sharp and gym hoppers looking for the next great addition to their regimen.
We ran sessions with ten participants in total, asking them about their experience with incorporating fitness into their lives and also factors that influence their decision to choose a certain gym over others. We found:
60%
Preferred self-guided workouts rather than instructor-led group classes.
30%
Did not currently attend a gym of any kind
30%
Attended non-standard gyms such as climbing gyms or yoga classes
50%
Engaged in exercise outside of the gym, regardless of whether they attended a gym or not.
How Well Does It Work?
Heuristics
During my heuristic analysis, I found that the website was doing some things well, but had ample room for improvement.
The site is set up with an easy top navigation bar that shows the available pages and current selection, allowing for Visibility of System Status: the Home Page gave a quick glance into the gym environment, Who We Are explained their mission statement and introduced staff, Workouts showed more detail about the classes, Location shows a Google map of the facility and the surrounding area, and pricing shows costs and plans associated with the gym. There is also a Book a Class button for signing up for specific classes.
Clear top navigation
A few other things that were done well included User Control and Freedom. I never felt like I was trapped within a page enough that I needed to restart the whole process. All errors I encountered were in plain language and easily understood. On the class booking page, each class was clearly marked as its own section with its own booking button to Prevent the Error of signing up for the wrong class.
Most of the violations I observed were related to find-ability and familiar language. Firstly, when clicking on Book a Class, you are navigated to the Location page where there is a further Book a Class in SLP button that is revealed upon scrolling. This violated the heuristic of Consistency by making me wonder if I misinterpreted what the Book a Class button would do and whether Book a Class in SLP would also do something unexpected. The Book a Class in SLP button did lead to the Book a Class page, but the unnecessary step created friction.
I also found violations of Flexibility & Efficiency of Use. There are no shortcuts available on the website for people who regularly register for classes. As mentioned above, there is no way to skip through this Location selection screen. There is also no way to sign up for multiple classes at once; each must be registered for one at a time, no matter the amount. There is also a confirmation pop-up when clicking on Sign Up that, while you could argue prevents the user from signing up for the wrong class, only repeats the information already available and would likely become an irritating extra step users must click through.
The pricing screen had violations related to three heuristics. Match Between System and Real World, Aesthetic and Minimalist Design, Help and Documentation, and Recognition over Recall.
In regard to the Match Between the System and the Real World, membership options were named similarly to event seating options, such as Stadium Level, Suite Level and Sky Level. While these names may have aligned to the branding of Skybox, they didn’t provide any description of the plan.
Ambiguous pricing options
In most areas on the page, the color red was more prevalent than neutral colors, violating the Aesthetic & Minimalistic Design heuristic and making it difficult to determine which elements were important, meaningful and clickable. The different options in each section were also arranged in infinite looping carousels. Even though there were only four or five options to choose from in each carousel, this created the illusion that there were many more options to choose from and further contributed to information overload.
Help & Documentation was partially present but was lacking in visibility and clarity. Each membership option listed a description but in extremely small type compared to the large, abstract titles and Buy buttons, making the information difficult to notice. Also, each section had the titles Class Plans, Class Packs and Private Training. Because of the similarity in sound, these titles didn’t provide sufficient distinction between each other. These sections also had a few words of description such as Auto Renew + Month to Month and Shareable + No Expiration. While these give an idea of their intent, they could be interpreted several different ways and further explanation is not found anywhere on the site.
At the top of the page, there was a section called Path to Skybox that explained different ways you could try out the gym before committing to a membership. The first step shared a code that could be used at checkout but wasn’t displayed on the checkout screen, making them rely on remembering the code or searching for where they had seen it.
Usability Testing
Writing The Script
After going through our initial evaluations of the site, we dove into usability testing. But first, we needed to identify what exactly we were testing and what findings we needed to come away with. This involved reviewing the goals that Skybox had for the project as well as six user tasks that were crucial in determining the efficacy of the site. These user tasks were:
View the content on the site to determine if the gym environment is a good fit for you.
Find out any and all costs associated with attending the gym
Locate any introductory deals that might be available to new-comers
Contact the business to ask a question
Sign up for an unlimited membership
Book a class
We broke these tasks up into two distinct scenarios; the first being a prospective customer trying to find out if the gym would meet their needs and the second being someone who has tried out the gym and is attempting to commit to attending regularly.
Testing
We ran 30-minute sessions with ten participants in total, asking them about their experience with incorporating fitness into their lives and also factors that influence their decision to choose a certain gym over others.
During testing, many of my self-guided findings were confirmed, such as the task of trying to understand the Pricing page proving to be a daunting process and certain pages not containing the expected information. However, we also discovered usability issues that I hadn’t noticed at first, such as the lack of a noticeable and direct call-to-action on the home page. A button was present that advertised a free first class but it was small and lacked contrast, allowing users to miss it at first glance or never find it at all.
Compiling the Data
Once we had finished all of the usability testing sessions, it was time to synthesize our findings into a repository of raw data that we could use to draw out similarities and differences that could be converted into actionable insights. We first tried a Trello board, which defaults to Kanban board-style organization, but found it to be somewhat clunky and limited in features. I then looked into Miro, a whiteboarding program with tagging capabilities, and immediately found it to be extremely user-friendly, having templates that worked for our exact purposes and a feature set that not only met, but exceeded my expectations. We quickly filled out a table with all of our meaningful findings, along with summaries of these findings in the form of a hit, miss and wish.
Click here to view Full Miro Board
Usability Testing Synthesis in Miro Board
I created a category color code for us to use, separating the findings into themes of what the users were Saying, Doing, Noticing, Thinking and Feeling. This was especially useful for making the information scannable and allowing quotes to be found quickly.
Although we didn’t implement it with this board, my team also discussed other methods we could employ to further organize our findings, such as creating a tagging system for severity of issue so that the most pertinent problems could be seen in one place.
To determine the usability of the Skybox website, we employed two major evaluative methods: heuristic analysis and usability testing.
Recommendations
Home Page - Intro Video
The preview video on the home page was received positively by every participant that we tested. They said that it gave them a good idea of the feel and tone of the gym as well as the space and amenities available.
Home Page - More Noticeable CTA
Many users didn’t notice the First Class is Free CTA and thus were lost as to what their next steps might be after assessing their level of interest in the gym. I recommended applying a partially transparent color gradient behind the headings so as to maintain contrast between the words and background, no matter what the video looked like. I also styled the First Class is Free CTA as a primary button instead of a small, underlined text to make it more eye-catching.
Before
Before
After
Pricing Page - Reduce Visual Complexity
The pricing page was a significant barrier for many users, due to its visual complexity and ambiguous wording. My recommendation combined the various options into two columns, memberships and bundles. We found that many users didn’t scroll all the way down on the Pricing page and missed content that may have been relevant to them.
After
Having two vertical columns allows the user to see the hierarchy of the sections immediately without the need to scroll. There are two options within each column that can be modified and the descriptions will change accordingly. Skybox stated that they were trying to get as many people to sign up for the unlimited plan as possible. The main memberships option starts with unlimited being shown first and is adjustable reduce the frequency and price, if desired. The packs column contains group classes and private training with the number and price being adjustable. It also displays the discount for each setting, incentivizing the customer to buy more at a time and increasing transparency and trust.
Book a Class - Remove Excess Step
Although this recommendation is simple, it is important nonetheless. Users expect to see a schedule of classes when clicking on Book a Class. Instead of taking them to the Location page, clicking the Book a Class button should take them straight to the class list.
Contact Info in Footer
We found that the contact info in the footer was unanimously exactly where users expected it to be. One thing that could be considered is adding a contact form so users have the option of sending a message straight from the website instead of having to call or open their email client.
What I Learned
Know Your Audience
This has been a common theme in all the work I’ve done in UX/UI design. My understanding of my audience can make or break the purpose of whatever I’m presenting. Whether I’m speaking to users who have a lot of experience with the product or a little, stakeholders whose business objectives are top-of-mind, designers who I share a common language with, developers who are concerned with the ease of implementation of my solutions, or you, reading this case study to learn about my process, being intimately aware of who I’m talking to and what their needs are is imperative to communicating effectively. In short, everyone is a user. Not just the person who ends up using the product, but rather everyone involved in the product cycle. Stakeholders, designers, developers and recruiters are all users that I have responsibility to design for thoughtfully and with intention.
The answer is not always obvious
In trying to simplify the pricing page, I believe that my recommendation ended up trading visual complexity for system complexity. While I do believe this is less jarring for the user initial, it may not have actually resulted in a more usable experience. According to my heuristic analysis and usability testing, it was apparent that the Pricing page was the most pressing issue and needed to be changed. However, I realized that fixing it was where the real difficulty was. As I mentioned, I don’t think my solution was the ideal one. Perfection is never possible, but I think I should’ve spent even more time on this part of the design, reviewing competitor sites, doing A/B testing, reaching out to other UX specialists and researching more best practices to come to a solution that was as good as it could be.
Click here for the complete Findings & Recommendations Report PDF
Next Case Study
Ideating & Prioritizing New Features