ClassPass Booking Flow: A UX Case Study


Improving Usability Through User Research and Prototyping


1. Project Overview

Introduction

ClassPass is a subscription-based fitness and wellness platform that allows users to book classes at various studios. This case study focuses on the research and usability testing phase of a ClassPass booking flow redesign, highlighting the identification of key usability issues. Design solutions are planned for future iterations

My role: user research, wireframing, high-fidelity prototyping, and usability testing.

Project timeframe: one-week design challenge.

This project was completed within a focused one-week sprint, demonstrating the efficiency of the research and testing phase.

Problem Statement

Heuristic evaluation identified potential usability issues in navigation and information clarity, suggesting friction in booking.

Goal

Validate usability issues through user research and propose design solutions for a streamlined booking flow.


2. Research and Discovery

Initial Research

An initial heuristic evaluation identified potential areas of concern, which were further investigated through user research.

Google Survey Data:

Google Survey provided initial user feedback, revealing users found the booking process confusing and overwhelming

Research Plan and Hypothesis

A research plan was developed to conduct moderated usability testing on the booking flow. The hypothesis was that users would encounter usability issues related to 'navigation between screens,' ‘booking specific time slots'‘ or 'understanding the class details'


Visualizing the Existing Experience: To investigate my hypothesis regarding usability issues in the booking flow from promoted businesses (specifically around navigation, time slots, and class details), I first mapped the current user journey, shown above.


3. Design Process

Figma 1:1 Recreation

To conduct realistic usability testing, I meticulously recreated the booking flow from the ClassPass app's Home screen in Figma, aiming for near 1:1 fidelity. This functional prototype allowed participants to interact with a familiar interface, ensuring accurate feedback on usability issues.

Lo-Fi Wireframes

Low-fidelity wireframes explored solutions for simplified navigation and information clarity.


4. Testing and Iteration

Usability Testing

Remote moderated usability tests with six participants, tasks included: booking a class at a preferred date/time slot. Screen recordings and verbal feedback captured usability issues.

Key Findings

  • Users found the Search interface unexpected and overwhelming

  • Users were frustrated about the lack of transparency and clarity in pricing and scheduling

  • Users experienced difficulty navigating the app, particularly after booking a class

Potential Iterations (Next Steps):

Based on the usability testing findings, the next steps would involve iterating on the design to address the identified issues. This could include:

  • Simplifying the initial Search Experience

    • Potential Features:

      • A clear button or tab labeled "Browse All" or "View Schedule" alongside the search bar.

      • A simplified initial view that lists all classes for the selected day, possibly categorized by time or activity type, with filters readily available but not the primary view.

      • A brief tutorial or onboarding tip highlighting the different ways to search and browse.

  • Improving Transparency and Clarity in Pricing and Scheduling Information

    • Potential Features:

      • Display the full, undiscounted price alongside any discounts on the class details page.

      • Clearly outline any potential fees (e.g., late cancellation, no-show) before the user confirms booking.

      • Visually indicate if a class is a one-time event or part of a recurring schedule.

      • Explore options for users to easily view and manage recurring bookings with specific instructors.

  • Enhancing Navigation and Information Architecture

    • Potential Features:

      • Implement clearer visual cues for navigation (e.g., more prominent breadcrumbs, consistent back button behavior).

      • Introduce a dedicated "My Bookings" or "Schedule" section that is easily accessible from the main navigation.

      • After booking, provide clear contextual links to "View Studio Profile," "See Similar Classes," or "Return to Search."

      • Consider a visual site map or a more intuitive tab bar structure.

Due to time constraints, the design iterations were not fully implemented during this project


5. Results and Impact (Potential)

Usability testing provided insights for future design improvements.

By addressing the identified usability issues, ClassPass could potentially improve user satisfaction, increase bookings, and reduce abandonment.

This project demonstrated the value of user research and prototyping in identifying and resolving usability issues, even in a complex booking flow. The insights gained provide a solid foundation for future design decisions.

Previous
Previous

Stack 'Em All: Discovery Phase - Ongoing Project

Next
Next

MMiM: Remote UX & User-Centric Design