SKIP TO CONTENT
← ALL WORK
06 — HOTELS.COM · HOSPITALITY · 2022

A booking flow rebuilt so the price never changes at checkout.

A concept redesign of the Hotels.com app: four destinations instead of a crowded tab bar, a dark visual system, and the total price on the listing. Benchmarked screen by screen against Airbnb and Booking.com.

Role
UX research, IA, UI design, hi-fi prototype
Client
Concept study
Timeline
2022 · 6 weeks
Platform
Mobile · Figma
Hotels.com — welcome
4
navigation destinations, down from a cluttered tab-and-menu mix
0
surprise fees: the total price shows before checkout
8
key screens in a dark, imagery-led system
AA
contrast held across the entire dark palette

Problem

Search, booking and profile were all buried in the existing app, the layout competed with itself, and the visuals sat a generation behind the apps people compare it to.

Checkout did the real damage. Fees and booking conditions turned up at the final step, and that is where people left.

Research

I went through Airbnb and Booking.com screen by screen.

Alongside the benchmark I ran think-aloud sessions on the current checkout. Trust broke at one specific moment: the price on the listing was not the price at the end.

3
apps benchmarked, screen by screen
#1
abandonment trigger: fees revealed at checkout
2
taps saved from home to a booked room

Process

  1. DISCOVER
    Heuristic audit, competitor benchmark, think-aloud sessions on checkout
  2. DEFINE
    Four-destination navigation; pricing rule: total before commitment
  3. DESIGN
    Dark, imagery-led system with bold typography and consistent components
  4. VALIDATE
    Prototype tests on navigation clarity and checkout confidence
  5. SHIP
    Hi-fi Figma prototype and spec, ready for engineering

Decisions

01

Four destinations, nothing hidden.

Explore, search, favourites and profile are the whole navigation, and every key action is one tap from home.

TRADE-OFF

Secondary features moved deeper. Finding the four things people actually do matters more than reaching everything at once.

02

The total price arrives before the commitment.

Fees, taxes and conditions show on the listing and again at checkout, and the number stays the same.

TRADE-OFF

Listing cards got taller. It removed the single biggest reason people abandoned a booking.

03

A dark, photography-led system.

Bold type and full-bleed imagery, built to match what the category leaders look like now.

TRADE-OFF

Readability took a long round of palette testing. The result is modern and still passes AA contrast.

PrototypeTap the glowing hotspots to move through the app, like the real prototype.

Hotels.com — Welcome
Hotels.com — Login
Hotels.com — Home — around you
Hotels.com — Hotel detail
Hotels.com — Search results
Hotels.com — Favourite stays
Hotels.com — Guest details
Hotels.com — Payment
Welcome
An imagery-led first impression that sets up the dark system.
01 / 08

Before → After

BEFORE

Hidden navigation, cluttered listings, and fees that appeared at payment, where most people gave up.

AFTER

Four clear destinations, photography-led listings, and a total price that reads the same from listing to receipt.

Outcome

  • Testers browsed for longer once the listings were visual and uncluttered.
  • Fewer people dropped out of checkout after pricing moved to the front of the flow.
  • Feedback kept coming back to the pricing clarity and how much more current the app felt.

Reflection

The dark palette took the longest. Holding AA contrast across photography-heavy screens meant testing colour pairs until they stopped fighting the images. Voice search and a deeper tie-in with the loyalty programme are where I would take it next.