Sports Booking Widget Launch

Role: Product Manager

Team: UX/UI Designer, Engineers

Product: Booking Widget with a Saas Tool for configuration

Time: 6 months

The company provides a comprehensive software solution for fitness and wellness businesses, offering tools for studio management, class scheduling, and seamless booking. Its platform enables fitness providers to streamline operations, engage with customers, and manage their offerings all in one place.

Overview

Problem

Approach

Two interconnected products: a B2C booking widget for fitness class attendees and a B2B SaaS tool that fitness providers use to configure and manage the widget. The goal? To create a seamless, mobile-first booking experience for fitness customers and an intuitive, customizable tool for fitness providers to easily integrate and personalize the widget on their websites. With a fresh technology stack and user-centered design, we transformed the booking process, improving usability and adoption for both groups.

Fitness providers were struggling with an outdated, complex configuration tool that required technical expertise to set up and offered limited customization. Their customers faced a clunky, non-mobile-optimized booking experience (iFrame technology) that led to abandoned transactions. Both groups needed an easier, more intuitive solution—one that aligned with their needs without complexity.

Beginning with in-depth interviews across both user groups. These insights not only shaped the direction of the product solution but also directly influenced the technical decisions made for the widget, ensuring both the user experience and system architecture aligned with real user requirements.

An initial prototype was developed and tested with the same user groups, incorporating their feedback to iteratively refine the design.

To validate the solution, a phased rollout was implemented. In the first quarter, the feature was introduced to a small cohort of 10 customers, allowing for close monitoring of integrations, user onboarding, communication clarity, and immediate reactions. This controlled launch provided critical insights that informed further refinements. By the second quarter, these learnings enabled improvements to the overall user experience and technical implementation before expanding to a wider audience.

Designing for two very different user groups

1. Fitness Bookers

The “fitness bookers” are the customers booking their desired fitness activities through the studio’s website.

Their goals included:

  • Finding the class schedule easily.

  • Selecting a desired time slot.

  • Completing the booking and payment process quickly and securely.

2. Fitness Providers

“Fitness providers” range from boutique Pilates studios to CrossFit gyms who offer a class schedule to their clients on their website

Their goals included:

  • Customizing the widget to fit their website and display their brand identity.

  • Ensuring a smooth checkout process for their clients.

  • Easily integrating the widget into their website without technical expertise.

User Research Process

Fitness Providers

I conducted over 20 discovery interviews with fitness providers and supplemented these with usability tests. This included observing fitness providers using both competitor tools and our existing solution.

Key insights included:

  • Configuration Pain Points: Difficulty navigating the configuration process due to scattered settings.

  • Branding Limitations: Frustration over limited customization options that didn’t align with their websites.

  • Knowledge Gaps: Many providers were unaware of existing customization features.

  • Integration Challenges: Providers often felt the need to hire freelance developers to integrate the widget.

Fitness Bookers

Through discovery interviews and usability testing, I gathered insights from end users, which highlighted:

  • Mobile Optimization Issues: The iFrame design led to poor usability on mobile devices.

  • Flow Disconnects: Users were redirected to a generic login page, breaking trust and continuity.

  • Booking Clarity: Steps to complete bookings were unclear, causing frustration and drop-offs.

Using an Opportunity Solution Tree to priorities opportunities

For the booking widget revamp project, the Opportunity Solution Tree served as a critical tool to structure and prioritize the complex ecosystem of user needs, challenges, and potential solutions. The widget configuration process for fitness providers had multiple layers of opportunities, from branding customization to ease of integration, and each had different sub-opportunities to explore.

The OST helped to:

  1. Clarify the Outcome: The primary goal of increasing adoption among fitness providers was defined at the top of the tree, ensuring alignment between the product vision and the solutions implemented.

  2. Identify and Organize Opportunities: By mapping opportunities such as “I want to show my brand throughout the checkout process” and “I don’t know how to set up the widget,” I could systematically uncover sub-opportunities and explore user pain points in greater detail.

  3. Guide Decision-Making: The tree allowed me to evaluate which opportunities would have the greatest impact on the outcome and which to deprioritize, ensuring that resources were focused on high-value solutions.

  4. Support Collaboration: The OST made it easier to communicate insights and solutions to stakeholders and team members by providing a clear, visual representation of the decision-making process.

The OST ensured a structured, user-centered approach to problem-solving while maintaining a balance between business goals and user needs.

This helped me to also identity the phases at which we would begin the project.

Key Improvements and Outcomes

Simplifying the SaaS Tool

  • Onboarding Enhancements: Added tooltips and guided setup features.

  • Real-Time Previews: Enabled providers to instantly see how changes would appear to end users.

  • Centralized Dashboard: Combined all settings into a single, intuitive interface, reducing setup time and cognitive load.

  • Multi-Location Support: Developed functionality to manage calendars for studios with multiple locations in one place. 50 new integrations, with actionable insights for further improvement.

  • Pricing Widget Flexibility: Developed a pricing page for the sports provider to have more flexibility on how to show their pricing.

  • Mobile-First Design: Redesigned the widget for seamless usability on mobile devices.

  • Streamlined Booking Flow: Simplified the checkout process, ensuring brand consistency througho

  • Multi-Location Visibility: Allowed end users to view all studio locations in a city, catering to fitness passes that covered multiple venues.

Outcomes

  • Q1 Goal: Achieved 15 new integrations, while providing full oversight of initial rollouts.

  • Q2 Goal: Reached 60% of the target for 50 new integrations, with actionable insights for further improvement.

  • Fitness Provider Feedback: Providers reported higher satisfaction with the new customization options and centralized configuration.

Learnings

  1. Adoption Requires Close Collaboration: Working closely with providers during initial rollouts allowed for rapid identification and resolution of pain points, fostering trust and ensuring smoother iterations.

  2. Balancing B2B and B2C Needs: Establishing clear OKRs ensured we could effectively prioritize fitness provider requirements while enhancing the end-user experience. For example, tailoring features like real-time previews served both audiences seamlessly.

  3. Small Business Dynamics: Recognizing resource constraints among small fitness providers underscored the importance of creating intuitive tools and providing robust support. This learning influenced future product designs and customer support strategies.

  4. Iterative Feedback Is Key: Testing and refining prototypes based on direct user feedback accelerated development and ensured the final product met user needs effectively.