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 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).
Booking Case Study Proto Persona
↑ Fig. 2: I created a proto-persona based on AI data for the new booking route and all subsequent projects.
Pain Points Booking Case Study
↑ Fig. 3: 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.

Challenge

The old booking process 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.

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?

Concept and Implementation

Content & Structure:

  • Developed a proto-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.

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.

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.