Illustrative imagery

Hospitality20245–8 months

Hotel direct booking, built as a product

Client: A group of independent hotels

Read the story
  • Product & Experience Design
  • Marketing Technology
  • Technology & Intelligence
Sun loungers and parasols beside a hotel pool at dusk, a stone building with a lit terrace behind.

At a glance

The brief. Move bookings from aggregators back to the hotels’ own site.

Client
A group of independent hotels
Year
2024
Duration
5–8 months
Scale
Search to checkout

From brief to result

How the booking flow was built, starting with the price.

The brief in full, our approach, what we built and what it set out to change.

The brief, in full

Most bookings came through aggregators, at a commission, and the hotels learned little about the guests they paid to reach. Their own site showed a low price that grew at checkout, so guests went back to the aggregator to compare.

The brief: move bookings from aggregators back to the hotels’ own site.

Our approach

We treated direct booking as a product, not a page. We redesigned the flow from search to checkout, with the all-in price shown from the first step.

Behind it, the booking front end connects to the property and channel systems.

How it ran

  1. Weeks 1–3Diagnose

    Drop-off at each step of the old flow, and what guests compared it with.

  2. Weeks 3–10Design

    The search-to-checkout flow and its design system, tested with guests.

  3. Weeks 8–20Integrate

    Property and channel systems, payments and confirmations.

  4. Months 5–8Journeys

    Pre-stay and post-stay journeys built on the guest profile.

What we built

A booking front end connected to the property and channel systems, with all-in pricing and guest profiles that keep preferences between stays.

What we delivered

  1. Booking flow and design system
  2. Property-system integrations
  3. Pre-stay and post-stay journeys
  4. Conversion analytics by step

What changed

The flow is designed to show the all-in price from the first step and to recognise guests when they return. Each step is measured, so the next change has evidence behind it.

Direct share and conversion are read by property. The figures are the client’s to publish.

How it is measured

Picture story

The stay, as guests will find it, from room to reception.

These pictures are illustrative: licensed stock photography and code-built mock-ups that show the setting, not the client’s own work. Credits are at the foot of the page.

A hotel sitting room with armchairs, a writing desk and tall curtains, lit by warm lamps.
Fig. 01Rooms shown as guests will find them, with the all-in price beside them.Antonio Araujo on Unsplash (opens in a new tab)
A bright hotel room: a made bed with a blue throw, an armchair and sheer curtains over a tall window.
Fig. 02Preferences carried from one stay to the next.Wes Hicks on Unsplash (opens in a new tab)
A brass wall lamp lights a white bed and a wooden side table.
Fig. 03Small requests, kept in the guest profile.ubeyonroad on Unsplash (opens in a new tab)
A dim hotel room with a stone wall, a small round table and a window.
Fig. 04Every room type described in the booking flow.Yanhao Fang on Unsplash (opens in a new tab)
A hotel reception desk in warm wood beneath a curved golden wall, leather armchairs in front.
Fig. 05At arrival, the guest profile is already at the front desk.Neon Wang on Unsplash (opens in a new tab)

On screen

The all-in price from step one, on phone and desktop.

Illustrative, code-built screens of the kind the programme produced, not the client’s own. Open any of them full screen.

Illustration: a hotel booking page with dates, guests and a list of rooms, each with a photograph and an all-in price including taxes.
DesktopSearch to checkout on the hotels’ own site.
Illustration: a phone at the room step of a booking flow, a room card with its photograph and the all-in price per night shown before the guest continues.
PhoneThe all-in price from the first step, on the phone where most guests book.

Before and after

The same stay, with the price that grew and the all-in price.

An illustrative, code-built before and after of the kind of change the work made, not the client’s own screens. Drag across the picture to compare.

Illustration: the old booking page. Rooms show a low price per night; the summary adds city tax, a service charge and a booking fee at the last step. Before · the price grows at checkout
Illustration: the new room step. Each room shows its all-in price per night and the total for the stay, taxes included, from the first step. After · all-in from step one
Before · the price grows at checkoutAfter · all-in from step one The same stay priced before and after the redesign. Illustrative figures.

Brand kit

Colour and type, chosen to sell the stay itself.

The colours with their roles, share of use and contrast, and the typefaces with their jobs. Press a colour to copy its code.

Colour

  • Forest #22302B

    Text and buttons

    On white
    13.8:1 AAA
    On near-black
    1.3:1 Fails
  • Linen #F6F1E7

    Backgrounds

    On white
    1.1:1 Fails
    On near-black
    15.6:1 AAA
  • Brass #B8874B

    Highlights

    On white
    3.2:1 AA large
    On near-black
    5.5:1 AA
  • Sage grey #6E7F72

    Secondary text

    On white
    4.2:1 AA large
    On near-black
    4.1:1 AA large
  • Terracotta #C4533A

    The all-in price

    On white
    4.5:1 AA
    On near-black
    3.9:1 AA large
Share of use Forest 30%, Linen 40%, Brass 15%, Sage grey 10%, Terracotta 5%

Type

  • DisplayMedium 500

    A warm grotesque

    Stay with us, book with us.

  • TextRegular 400Semibold 600

    A humanist sans

    All-in price per night, taxes included.

Specimens are set in this site’s own typefaces as stand-ins; each card names the project’s family.

Outcomes

Each property, judged on share, conversion and return stays.

What each measure is compared with, when it is read and who reports it, with results once the client approves them.

The measurement plan

  1. Direct share of bookings

    Compared with
    Each property’s channel mix for the year before
    Read
    Monthly, by property
    Result
    Awaiting approval Reported by The client’s revenue manager
  2. Booking conversion by step

    Compared with
    The old flow’s drop-off, step by step
    Read
    Weekly for the first quarter, then monthly
    Result
    Awaiting approval Reported by The product lead, from the step analytics
  3. Repeat-stay rate

    Compared with
    Repeat stays in the year before launch
    Read
    Twelve months after launch
    Result
    Awaiting approval Reported by The CRM strategist

Results

Figures pending client approval

We publish results only with the client’s written approval. Until then, the programme is judged on the plan beside this, which we can walk you through under NDA.

Credits

The team and the pictures.

People are named only with their agreement.

Team 7 people

  • Product lead × 1
  • Product designers × 2
  • Engineers × 3
  • CRM strategist × 1

Credits

Strategy, design and engineering
Xterra Edze
Screens and before-and-after views
Xterra Edze (code-built illustrations)
Photography
Licensed stock from Unsplash, credited picture by picture

Next case · 07 · Telecom & media

One data platform for network, marketing and care

Give network, marketing and care the same figures for the same customers.

Read the next case

Tell us what you need built.

You will speak to a lead who would run the work, and get a straight answer on fit.

Book a call

Three ways to start

  1. 01About 2 minutes

    A quick question

    You get A reply from a named lead

  2. 02About 8 minutesRecommended

    A project brief

    You get Options and a first scope after one call

  3. 03About 15 minutes

    A formal RFQ or RFP

    You get Receipt confirmed and a named bid lead

Every engagement starts with a written scope and a quote agreed before work begins. How each package is priced