UX Case Study: Crafting Flabee Booking Appointment Flow
Overview
In This Case Study
We will take you behind the scenes of our design process for Bebee, focusing on one of its key features—the online booking appointment flow. Join us as we explore the ideas, challenges, and creative steps that brought this functionality to life.
About the Client & Project
Flabee is a company dedicated to supporting mothers and families, particularly during pregnancy and early parenting, through its wide range of products and services. These include baby food products, prenatal and postnatal massage services, and its FlabeeCare app, which provides personalized guidance for mothers during and after pregnancy.
Bebee leverages its online platforms, such as an informational website and app, to promote its physical stores and streamline customer experiences. Among these, the online appointment system serves as a crucial link between customers and service locations.
This case study highlights how Webby approached the challenge of upgrading Bebee's online booking system, integrating it seamlessly with existing platforms. We’ll share the challenges faced, the strategies implemented, and the final outcomes.
The problem
The modern booking flow
Flabee's original online appointment system was designed as a B2B platform solely for use by store staff. Expectant mothers, who are our end customers, could only book services by visiting physical stores, where staff would assist them with the booking process at the front desk.
This project aimed to transform Flabee's B2B appointment system, used by store staff, into a B2C platform for consumers. This shift introduced two main challenges:
1. Target Audience Shift: The platform needed to be consumer-friendly, emphasizing usability, visual appeal, and an emotional connection while staying intuitive.
2. Balancing New and Existing Users: It was essential to retain familiar workflows for store staff while introducing enhancements for consumer accessibility.
The table below provides a simple comparison between the B2B system and the B2C platform, while also summarizing the key directions we followed for this project.
The Solution
The Redesigned Booking Flow & Key Features
Based on the above, the new online appointment system adopts a recommendation-based booking approach while optimizing UI space usage. For Flabee, we designed the appointment flow for both the customer portal website and mobile app, introducing several user-centric features.
Core Booking Process on the Customer Portal Website:
The booking process begins with selecting a service location and date. Users are not required to fill in any fields upfront; they can start by choosing their preferred service location, date, or service type based on their needs. The backend dynamically updates available time slots and pricing, offering greater flexibility than the previous system.
The result
Discover how goodcall enhances customer interactions with innovative solutions.
Beyond the overall upgrade to the online appointment process, there are many thoughtful details that enhance the experience. For instance, to make booking more intuitive, we grouped related fields (Law of Proximity) —such as service categories and service types—together, ensuring a smoother selection process.
Additionally, in step one of filling in service details, we standardized and simplified the wording of service selection fields while incorporating price range information. These thoughtful design choices help align the system with real-life user habits, making it easier to use, while reducing the need for users to navigate back and forth to confirm details. From the UX perspective, this approach has reflected the usability principle of 'Match between system and the real world', ensuring a more seamless booking experience.
Upgrading the system doesn’t mean removing all existing features. In this redesigned version, we retained the stepper from the previous design, allowing users to clearly see their current booking status and the remaining steps.