Searching for a hotel

Hilton WORLDWIDE • flow re-design FOR MOBILE APPS

Search comps 2.png

The problem

In 2019, the Hilton Honors Android & IOS apps experienced a decrease in users who converted from the hotel search to the booking funnel.

Problems discovered through qualitative & quantitative data

  • Users were not easily provided with the information they needed in order to confidently select a hotel

  • Users were having trouble navigating to certain elements like filtering & viewing the map

  • Hotel amenity icons did not translate well


The Solution

To redesign the Hilton Honors IOS & Android apps’ entire search flow to

  • Optimize the app experience

  • Provide the user with the information they need in order confidently select a hotel

  • Increase app conversion


My role

As the lead UX architect, I was in charge of identifying problems and to deliver a new, updated flow in within the technical constraints. For now, this meant cleaning up the existing flow to make it more intuitive, without adding any new features. 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 our users to problem-spot and identify areas of opportunity

  • Gather statistical data the existing flow’s usage to understand potential gaps

Step 2: DESIGN A NEW EXPERIENCE

  • Brainstorm & design different options

  • User testing rounds with varied flow options to validate & 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

What did users have to say about the previous search experience?

Task

A sample of Hilton users were asked to walk through the app and talk about their experience.

Objective

Discover current gaps and identify areas of opportunity.

Results

Pictured: a preview of the previous search entries

Pictured: a preview of the previous search entries

  • Too many steps make the experience cumbersome

  • Text is difficult to read with low color contrast

  • Search default’s are not helpful for most users (this was validated through qualitative research as well)

  • When searching for a location, users request auto- suggest

Pictured: a preview of the previous search results

Pictured: a preview of the previous search results

  • Users request the ability to edit search entries directly from the search results

  • Icons representing amenities on the hotel cards are not easily understood

  • Users want to see hotel details without committing to picking a room

  • Text on the hotel cards is difficult to read with low color contrast

  • Map and list icons are not easily understood


The new Experience

Simplifying the search flow

getting there through testing

  • Two flows were tested to understand the preferred

    • With and without Search review screen

  • Search results screen

    • Search results screen - touchpoint expectations

After testing different flows, we learned that users preferred to be taken directly into the required steps, with the ability to review and add any supplemental information that applied to their search. Changes were made to provide the user with a balance of speed and simplicity.

- Before -

OLD FLOW.png

- AFTER -

NEW FLOW.png

Wireframes

Search Wires.png

Screen breakdown

Location SEARCH

Location_With device.png
  • Added recent searches

  • Added auto suggest

  • Added icons to represent different search categories (ie: hotel, city, airport)

Date Selection

Dates_With device.png
  • Added highlighted state to check-in and check-out

  • Added dynamic call-to-action displaying number of nights

Search Review

Review_With device.png
  • Users want to review their search items before they apply their search

  • Allows them to add any supplemental information

  • Bottom sheet feels quick & un-intrusive

 

Search Results

Seaqrch results_with device.png
  • Chips allow users to edit search items directly from the results

  • Hotel information is easily accessible without committing to pick a room

  • Added “Search with points” toggle to allow users to compare points vs. price

  • Map & filter are easily accessible

 

Search Results - Map

Map_with device.png
  • Pins are now consistent in shape and color

  • Swipe-able cards allow for searching without having to select a pin

  • Pins now display prices as testing revealed price as a high priority for hotel selection

 

Hotel Details

hotel details_withdevice.png
  • Amenities are now accompanied with text and at the top, as testing revealed they were a high priority for hotel selection

  • Hotel details are now separated from room selection so users can review details while still in the search phase, as requested

 

Release & Learn

Next Steps

  1. 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.

  2. Now that the design has been cleaned up, our objective is to learn and enhance, using requested new features.


Considerations

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

    • Edge cases, error states, and multi-room bookings were also a part of our learning and design process.

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