Venturing into the unknown - rebuilding a hotel booking flow from the user up.

A focused exploration of the optimal primary user flow for booking a hotel online - stripping the visual noise to understand what the experience actually needs to do.

The Saint Alban

CLIENT

Lead Designer

ROLE

UX, Medium-fidelity prototype, UX Research

DELIVERABLES

2023

YEAR

OUTCOMES

-4 steps

Removed from the primary booking flow, compared to the benchmarked average

+27%

Task success rate in moderated testing vs. prior flow

8/10

User satisfaction rating on the redesigned flow

3

Rounds of validation of moderated user testing

01

The Problem

Booking a hotel online has quietly become one of the worst flows on the consumer web. Visitors are funnelled through a maze of upsells, opaque fees, and information dumps — most of which serve the hotel, not the guest.

The Saint Alban came to us with a clean question: forget the trends, forget the upsells, what should the optimal flow actually look like? A research-led, UX-only investigation, with no UI to hide behind.

02

Approach & trade-offs

Three phases — discovery, research & analysis, design — and one rule throughout: the prototype would stay in mid-fidelity. No colours, no imagery, no brand. Stripping UI was the point, not a limitation, to validate the structural integrity and flow of the journey, measuring task success and speed, without the distraction of visual styling.

"If you can't get the flow to work in greyscale wireframes, no amount of visual polish will save it. Visual design covers for bad UX more often than people admit."

- JOE SAYERS, LEAD DESIGNER

03

Three decisions that shaped the flow

01 - Pricing as a live receipt, not a final reveal

Most booking sites surface the total only after add-ons. I introduced a "digital receipt" component that updates in real time as the guest customises, supported by back-end work to recalculate on every input change. It made price transparency a feature of the flow rather than an afterthought of the checkout.

02 - Progressive disclosure over progressive scrolling

Hotel pages overwhelm the user with too much detail too early. The new IA prioritised what's needed to decide, hid what's needed to confirm, and held back what's needed to upsell. Information appears as the decision asks for it.

03 - Persistent progress and easy backtracking

A persistent stepper with a save-progress feature means users can leave the flow without losing the work. Small thing, but the testing data showed it was the single biggest contributor to satisfaction.

04

The result

The final prototype sits at mid-fidelity by design — a fully clickable flow with no visual styling. It became the source-of-truth artefact for any hotel client thereafter, regardless of brand or visual treatment.

05

Reflections

Building this in greyscale was the right call for interrogating structure, but it also meant the brief never got tested with a real visual layer. If I'd run a second phase, I'd have layered a brand on top and re-tested - partly to validate that the flow holds under visual pressure, and partly to learn where colour, typography and imagery can do useful flow-level work rather than simply decorate.