Skip to main content

← Back

 

My role: UX Engineer | Technologies: React, HTML, CSS, Figma

94% positive response to the booking route

Wireframe Mockup Booking
↑ Fig. 1: Development of the user flow with a prototype for particularly easy-to-understand and fast booking of the suites. Home page with filter for quick searches (left), quick search by radius (center), selection of start time with flyout filter so that the customer can change something quickly (right).

Challenge

The old booking process for a wellness area was confusing, slow, and prone to errors. Customers often failed to successfully book their desired suite because any change required restarting the entire process. Frequent complaints clearly indicated dissatisfaction. The challenge was to design a new booking flow that is intuitive, fast, and flexible, significantly improving customer satisfaction.

Pain Points Booking Case Study
↑ Fig. 3 (anonymized rewritten data): For six months, I also collected all emails and analyzed them with regard to problems with the operation of the old booking route in order to pay particular attention to these pain points and not repeat them.

User Research

Data Sources:

  • Collected and analyzed customer feedback and email communications from the past six months (Fig. 3).

Interviews:

  • Conducted interviews with service and customer-facing departments to gain additional perspectives on common issues and user expectations.

Pain Points:

  • Difficulties selecting the correct start time often led to booking errors and drop-offs.
  • Frustrating booking process without the option to save progress caused user dissatisfaction.

Research Questions:

  • At what points do users abandon the booking process?
  • What information is missing or unclear?
  • How important is the ability to make changes during the booking flow?
  • What are users’ expectations regarding speed and clarity?
Booking Case Study Proto Persona
↑ Fig. 2: I created a persona based on AI data for the new booking route and all subsequent projects.

Concept and Implementation

Content & Structure:

  • Developed a persona based on AI analysis (Fig. 2) to clearly define user needs.
  • Created initial sketches of the user flow focused on minimizing clicks and maximizing clarity.
  • Built a clear information architecture that allowed flexible changes during the booking process.

Design & Development:

  • Created low-fidelity wireframes in Figma for early alignment (Fig. 1).
  • Handed over the wireframes to the design team for final visual refinement.
  • Implemented the front end of the booking flow using React, HTML, and CSS, adhering to modern UX best practices.
  • Closely coordinated with the backend team to ensure fast load times and smooth functionality.

Optimization:

  • Prioritized page speed optimization: reduced load times in both frontend and backend.
  • Introduced flexible adjustment options during the booking flow, especially for selecting start times.

Accessibility:

  • Checking the current status of all pages for accessibility.
  • Using plugins in React and in various browsers, then testing all components and areas, especially the calendar for the appointment search, and removing accessibility errors.

Testing and Validation

  • Iteratively evaluated pages and components using heuristic evaluations and 5-second tests to optimize clarity.
  • Conducted usability tests internally and externally with real customers.
  • Continuously validated usability based on direct feedback and expert reviews.
  • Checking accessibility with the help of a specialized external agency, which then created task tickets for problems.

Result

  • 94% positive customer feedback during a live test involving 468 test customers.
  • Significantly fewer complaints at the service center regarding the booking process.
  • Faster and more user-friendly booking experience leading to higher conversion rates.
  • Received an internal award for outstanding commitment, exceptional results, and excellent collaboration across departments.

Summary

  • The project has clearly shown that real user research - especially through the evaluation of real customer experiences - forms an indispensable basis for well-founded design decisions. Pure expert knowledge is not enough to fully understand complex user needs.
  • The systematic consideration of accessibility led to an improved user experience for all target groups - not just for people with disabilities. Inclusive design is a key quality factor, especially in public, widely used systems.
  • Another key success factor was the close collaboration with specialist departments from service, technology and design. The diverse perspectives made it possible to identify relevant problems at an early stage and develop practicable solutions - an integrative process that ultimately contributed to the high level of acceptance and positive response to the new booking route.