Booking a hotel Reservation

Hilton WORLDWIDE • flow re-design FOR MOBILE APPS

Page image book comps.png


The Problem

In 2019, the Hilton Honors Android & iOS apps experienced users dropping out within the flow of booking a hotel reservation.

  • Overall conversion was down from the previous year

  • iOS: 29% of people who pick a hotel and a room don’t end up booking

  • iOS: 13% of users drop out on the final booking screen

  • iOS & Android: User interviews revealed gaps throughout the flow

The Solution

Redesign the Hilton Honors IOS & Android apps’ entire booking flow to

  • Optimize the overall app experience

  • Provide the user with the information they need in order to confidently book a reservation

  • Increase app conversion

My Role

As the lead UX architect, I was in charge of identifying problems and creating UX solutions by designing, testing, and iterating. I worked with a UI designer, a copy writer, a product owner, and our dev / QA team.

Process

STEP 1: DEFINE THE PROBLEM

  • Walk through the current experience with a sample of our users to identify pain points and areas of opportunity

  • Gather statistical data of existing usage to understand potential gaps

STEP 2: DESIGN A NEW EXPERIENCE

  • Brainstorm & design different options

  • User test with varied flow options to validate and iterate

STEP 3: RELEASE & LEARN

  • Release updated designs in the app with different variables (A/B testing) to learn which designs convert better

Defining The Problem

User Walkthroughs

In order to understand pain points, a sample of Hilton users were asked to walk through the booking flow and talk about their experience.

Pictured: Previous booking flow that our sample users interacted with

Picking a Room

  • The combination of the hotel details and the room information is information overload

  • I would like to see more categorization of room types

  • I would like to see elaborate room details associated with each room on this screen

Picking a Rate

  • I would like to see cancellation policies surfaced next to each rate

  • The room details are out of place here and should have been on the previous screen

REVIEW & BOOK

  • The below information should be visible on this screen:

    • Rate details

    • Cancellation policy

    • Price breakdown

The New Experience

Goals

Variations of testing were done within the booking flow were done to validate our new designs.

  • Create a booking experience that gives the user the information they need at a given time to confidently book a reservation

  • Create a flexible booking layout that our long list of scenarios and edge-cases can easily be plugged into

Wireframes

The flow

Detail Modals

Breakdown

Rooms

Rooms_With device.png

  • Rooms has been separated from hotel details for clarity

  • Added the filtering of room types by bed, which users found to be a top priority

  • “Quick book” short-cut added to reflect desktop’s high user interactions with that call-to-action

  • Moved room details to the rooms page, as users were having a hard time finding it on the previous rates page

  • Room details order and layout updated to reflect user needs

  • Note: Multiple variations of the rooms page will be tested in the app. This example is with a smaller thumbnail, but some will have wide images.

Rates

Rates_With device.png

  • The room type is now displayed at the top, giving context to what the rates apply to

  • Rates now have cancellation policy displayed underneath for visibility

  • Note: Technical limitations didn’t allow us to categorize the rates, which is a next step that is requested from our sample testing

Rate details_With device.png

  • Rate details have an updated order reflective of importance

  • Added price breakdown for clarity

Book

Book_With device.png

  • Qualitative user testing was done to validate the order of importance of booking items

  • The below information is now displayed directly on the screen without having to tap into a modal

    • Rate name

    • Price breakdown

    • Cancellation policy

  • Added option to edit rate and room directly from the booking screen

  • Grouping test: Testing was done to validate the below grouping of items

    • Payment & Cancellation

    • Guest details, Special requests, Guest info

  • Removed floating CTA so users make sure to review the payment information at the bottom

 

Release & Learn

Next Steps

In 2020, multiple variations of these screens will be released to determine which options lead to more bookings. Based on those results, iterations will be taken into consideration.

Considerations

  • The wireframes and comps displayed demonstrate the happy path, and are for a single room booking.

    The below flows were also a part of our learning and design process:

    • Edge cases

    • Error states

    • Multi room bookings

    • Booking with points

    • Booking with a special rate

    • Guest booking (signed out)

    • Join Hilton Honors upon booking as a guest

  • Wireframes and comps are displayed, but Android comps were designed cohesively, using the same flows with some subtle UI differences follow the material guidelines.