Booking Flow

AVVAY Booking Flow

Background

Creating a reservation request to book a space on AVVAY is perhaps the most important part of a customer's journey. This project's goal was to create a booking experience that would be simple, fast and efficient for the customer to create a reservation request for a space on AVVAY.

The Challenge

With this project I wanted to design and ship an experience that could both handle a custom quote as well as an hourly booking request for a single or multiple days. Reducing the amount of choices and states in the UI for the customer was the challenge. The success metric we used was the "time to reservation request". I knew that if we could reduce the time it would take a customer to create a reservation request that my work could be considered a success.

The high level goals were to:

  • Reduce and simplify choices in the UI
  • Prioritize actions like hourly booking vs. custom quote
  • Provide enough information for hosts to accept requests quickly

My Role

I was responsible for following phases of the project:

  • Product Management - Determining project goals, timeline and sprint schedule
  • Interaction Design - Identify and design flow states, behaviors and wireframes
  • Visual Design - Design user interface for prototyping or implementation
  • Frontend Development - Provide HTML and CSS for engineering team

Interaction Design

The customer's journey through the booking process depends on various conditionals like reservation dates, times and attendee amounts. Below I identified what potential paths and UI states could exist for the customer.

Wireframes

Below is a sampling of some of the wireframes that I designed for various UI states. Factors like single to multiple days and attendee amounts could change important components of the UI like price and day selectors.

Default State

Default State

Selected State for Standard Rate

Selected State for Standard Rate

Selected State for Event Rate

Selected State for Event Rate

Selected State for Multi Day

Selected State for Multi Day

Selected Days State for Multi Day

Selected Days State for Multi Day

Confirmation Screen for Reservation Request

Confirmation Screen for Reservation Request

Visual Design

The visual design for the booking flow utilized much of the existing design patterns I had already established across the AVVAY UI. Our brand color palette red was used to call out the most important actions the user could take. Our brand teal color was used to indicate lower priority actions like links and alternate buttons. Particular attention was paid to typographic elements like labels and indicators to ensure they would not compete with higher priority UI elements.

Booking Flow 1

Booking Flow Step 1

Booking Flow 2

Booking Flow Step 2

Booking Flow 3

Booking Flow Step 3

Booking Flow 4

Booking Flow Step 4

Conclusion

I successfully simplified the booking process and reduced the time to completion by eliminating choice and visually prioritizing portions of the UI. We're also using Heap Analytics to track and monitor booking flow performance over time.

More Case Studies