NATTK

UX case study · UX Design Institute · 2025–2026

Roami

Designing a simpler, more transparent hotel booking experience.

A mobile booking concept shaped by usability research, synthesis, journey mapping, wireframes and interactive prototypes.

RoleUX Designer

PlatformMobile app

ScopeResearch to prototype

MethodsUsability testing, synthesis, flows, prototyping

Roami mobile app landing screen showing a London city image and Find Your Next Stay actions

The Challenge

The UX Design Institute brief imagined an established hotel review company adding direct bookings. I researched existing booking experiences and designed a mobile journey to help travellers find, compare and book a hotel with greater confidence.

How might we help travellers compare options and book with greater clarity?

Animated Roami hotel listings scrolling to the Compare 2 Hotels button, then opening a two hotel comparison

Research

I documented three usability tests across Booking.com, Hilton, Marriott, Airbnb and Hotels.com. Participants worked through a task to find a London hotel near a Tube station for a Friday-to-Monday stay in May. I reviewed their behaviour alongside competitor interfaces, then grouped recurring issues in an affinity diagram and mapped the booking journey.

3Usability tests documented

5Booking platforms examined

1Journey mapped from search to booking

From the test notesPer-night and total prices were unclear

Multiple room rates and unclear tax treatment made the true booking cost hard to judge. The participant turned on “show with taxes and fees” to avoid a surprise.

From the test notesLocation was a decision, not a detail

The task required a hotel near a Tube station, yet walking time was small or buried and an effective proximity filter was missing.

From the test notesDates needed a familiar interaction

The participant expected horizontal swiping and was unsure whether to drag across a calendar to select the stay.

From the test notesToo much information slowed comparison

Dense hotel details, long filters and repeated content made important room information difficult to scan on mobile.

Key Insights

Price transparency

Nightly rates, total prices, taxes and multiple deal options were difficult to compare.

Information overload

Dense listings hid room photos, amenities and cancellation details.

Location matters

Station proximity mattered, but was often hidden or hard to filter for.

Dates & filtering

Date-range selection and long filter lists interrupted the journey.

From research to structure

I recorded observed behaviour and moments of hesitation, clustered the notes into themes, then mapped the journey before drawing the booking flow and early screens. These are the original artifacts from the diploma project.

Notes from a hotel booking usability test — **01 / Usability test notes**Recorded participants’ actions and questions while they searched, filtered, compared rates and moved toward checkout. Price ambiguity, calendar uncertainty and buried station information recurred.View full image ↗

Affinity diagram grouping hotel booking observations — **02 / Affinity diagram**Grouped observations around dates, search and filters, price and rate communication, information hierarchy, and location. This helped move from isolated comments to recurring needs.View full image ↗

User journey map showing stages of the hotel booking experience — **03 / User journey map**Mapped eight touchpoints and changes in confidence across the experience. Frustration appeared early and again later in the journey, helping identify where clarity mattered most.View full image ↗

Flow diagram for a mobile hotel booking journey — **04 / User flow**For this project, I focused on one user flow: searching for a hotel, comparing options and completing a booking. I mapped the journey before designing the screens.View full image ↗

Early sketches for Roami mobile booking screens — **05 / Sketching**Explored possible screen arrangements before building and annotating the low-fidelity prototype.View full image ↗

Design direction

Show the full cost

Make total stay price and what is included easier to see before the final step.

Bring location forward

Help travellers compare hotels against the places and transport they care about.

Reduce decisions at once

Keep dates, filters and room choices understandable on a small screen.

Explore the Design

Interaction & behaviour

Annotated lo-fi

Lo-fi wireframes and interaction notes across the booking journey.

Overview of Roami low-fidelity mobile wireframes and annotations

Visual interface

High-fidelity design

High-fidelity mobile screens for the Roami booking journey.

Overview of Roami high-fidelity mobile booking screens

Roami search screen with destination, dates, rooms and guests

Roami comparison screen showing two hotels side by side

Roami booking review screen showing stay details, total price and Confirm and Pay button

Search, compare and review a booking. Swipe across the screens on mobile.

Reflection

The project connected observed booking difficulties to a clearer mobile journey. This case study will be expanded with final screen exports and a more specific account of what changed after prototype testing.