Case Study: Responsive Web Design
UX Academy Course 2023
Research
Btone Fitness is a pilates center that specializes in the “Btone” method, emphasizing “Slow Movements, Fast Results”. The franchise has several locations across Massachusetts, Connecticut, and Rhode Island. I came across their website while searching for a new workout classes to attend. As I scrolled though, I noticed that the overall content was difficult to navigate, particularly the pricing information which differed for each location. The brand colors used made it difficult to read content and CTAs, and looked as thought they did not meet accessibility standards. I was curious to find out if the lack of organization and pricing transparency posed an issue to other website visitors who are interested in Btone Fitness, and ways it could be improved.
Background
To determine the pain points that customers were facing on the website, 3 participants were asked to conduct an audit on the website, which included providing general website feedback and completing specific tasks.
User Testing
The same participants were also asked to complete the following tasks:
Schedule a class at North End using provided login details
Are you able to read the site for 30 seconds and understand what Btone fitness is?
Search for membership pricing information
After the audit sessions, it became clear that users were facing a number of issues with Btone Fitness’ website. I wanted to browse through Btone’s competitors’ websites to analyze their strengths and weakness, and also see in the opportunities to improve Btone Fitness’ website, so that they can build on their strenghts.
S.W.O.T. Analysis
In addition, a S.W.O.T. analysis of competitors in the fitness class market was conducted to determine their strengths and weakness, and where Btone Fitness had the opportunity to grow.
Key Insights
The SWOT analysis revealed that Btone’s unique methodology and abundance of locations place them in a good position. However, the navigation menu makes it difficult to learn about the Btone method and uses niche terminology such as “modifications” and “means”. In addition, customers will likely go to a different site, or platform like Classpass, for more transparent pricing. In general, a disorganized website with poor accessibility can affect the credibility and brand of Btone fitness as a whole.
The audit and user feedback made several issues apparent, including:
Poor accessibility - Particularly, the testimonial sections used white text with an image overlaid with bright green background. This could negatively impact users who find reviews important in order determine whether they want to try the class.
Unclear website navigation - This makes it difficult for new visitors and potential customers to quickly learn about the “Btone” concept, which is not a common term used in pilates space. This desktop navigation also uses a hamburger menu, which is an outdated format and adds unnecessary clicks when looking for information.
Finding pricing for each location is not simple. Users are required to log in beforehand. Knowing the cost of a monthly package or one-off class is important to new customers and can really determine if they want to try it out.
Overload of information on home page - An overwhelming amount of information can deter visitors who don’t want to sift through it.
General Website Feedback
Ideation
With insights gathered, a set of point-of-view (problems) and how-might-we statements (potential solutions) were developed, narrowing down to the following:
POV Statment: People who looking to try out Btone Fitness should able to easily find information needed to book a class such as pricing and schedule, because having a streamline process will take them less time to find information.
HMW Questions:
How might we reorganize the scheduling process to be more clear?
How might we provide pricing information that requires less steps?
How might we make it clear what classes are available?
A user persona was developed based on the demographics of Btone customers and interview participants, which highlighted common user goals, needs, and pain points. This persona represented the target audience for the product throughout the ideation and development process.
Since all participants faced issues finding information through the hamburger menu and mentioned disorganization, I wanted to conduct a closed card sorting session to improve Btone’s navigation system. I created 4 broad groups (Locations, About Btone, My Account, & Other). Although “Other” was not an ideal group to have, there were many miscellaneous buttons such as “Download IOS/Android App” that were not easy to categorize into a group. The card sorting session would also determine if there were any cards that were not pointing users to the content they are actually trying to find.
Closed Card Sorting
5 participants were asked to sort content into larger buckets, to determine which page names were unclear and needed to be altered.
Findings:
Participants seemed unsure of what “Means” indicated and where it should live. All 5 placed it in “other” group when it should have been in “About Btone”. The topic name should be adjusted.
Participants seemed unsure of what “Modifications” indicated and where it should live. 4 participants placed it in “other” group when it should have been in “About Btone”. The topic name should be adjusted.
“Gift Cards” often ended in the “My Account” group, although it is a page that explains gift card options. It would be important to place this outside of the My Account section on the website, so that users aren’t confused
States (MA, RI, CT) were all 100% placed in locationsAccount information was correctly placed in My Account group
Method, EPOC Workout Science, Press, Franchise all should fall under “About Btone”
I began creating user flows surrounding a seamless scheduling process and better access to pricing information, while implementing clearer navigation menu option based on the findings from the card sorting session,
Task Flows & User Flows
Tablet Screens
Landing Page
Information Architecture
After determining the task and user flows, I started creating low fidelity wireframes for the screens required to complete these flows. These included creating general layouts for an updated landing page with a cleaner navigation bar, and an updated “Locations” page.
Low-Fidelity Wireframes:
Reformatted landing page with new navigation
Updated locations page with easily accessible pricing information
Landing Page
Locations Page
Mid-Fidelity Wireframes:
Since pricing transparency was important to customers, I conducted a quick A/B testing on 14 participants to decide between two pricing layouts on the Locations page. The results showed that a horizontal scroll (which displayed more useful information) was preferred over the drop down menu.
Preferred Pricing Layout
Purchasing Pages
Mobile Screens
Locations Page
Landing Page
Landing Page
Purchase Pages
Locations Page
Purchasing Pages
To test the usability of the mid-fidelity wireframes, I conducted a user feedback session on 3 participants, and observed as they complete 2 tasks.
Task 1: Reserve a class at South Boston location + log in
Task 2: Purchase an auto-renew membership (stop at checkout page)
User Testing Results:
Task 1
All users found issues finding the schedule page and suggested it should be higher up on the page. The pricing information takes priority, but for those looking to reserve, it’s not efficiently placed or easy to find. Adjustments would be to shift the schedule calendar upwards on the location page so that it is more convenient to find, and either shift the pricing down, and/or create a centralized page for location pricing information.
When users were asked to reserve a class, 2 out of 3 paused when seeing both the purchase options and the log in fields, as they weren’t sure what to select. Moving forward, I decided to prioritize the log in. This way, after a user logs in, they will be able to see if they already have credits and can immediately reserve the class. If they don’t have credits, only then will they be prompted to purchase a package.
Task 2
2 out of 3 users found pricing information difficult to find, as it’s not intuitive for the pricing to be under “Locations”. A central pricing page could fix this issue. Providing a map or an “enter zipcode” function could further help user find pricing information for the relevant location.
High Fidelity Prototypes
Desktop Screens
Tablet Screens
Mobile Screens
Concluding Thoughts
Reflections
Although the user testing sessions were helpful in discovering ways to improve the mid-fidelity wireframes, it would have been useful to conduct the same structured feedback sessions on the high-fidelity prototypes. There were pieces of feedback provided by peers and mentors, particularly about improving colors to meet accessibility standards, and ensuring that different CTAs did not all look the same.
Next Steps
Moving forward, I would work on improving the experience after a user logs into their Btone account. It is likely that most Btone customers will most likely stick to either 1 or 2 locations in their area. Therefore, post-logging in, there should be a quick way to direct users to the schedules that are relevant to them.
In addition, each location has their own set of testimonials. This content should be available on the locations page. My recommendation is to implement a tab system for the location’s schedule, pricing, and testimonials that customers could quickly click through, rather than having to scroll, given how much content there is on this page.