Booking a hotel Reservation
Hilton WORLDWIDE • flow re-design FOR MOBILE APPS
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 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
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 have an updated order reflective of importance
Added price breakdown for clarity
Book
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.