01 — The Challenge
One brand, two surfaces
The booking app and its marketing landing page were being designed by different teams on different schedules. The result was predictable: app and website looked like cousins at best. The brief was to bring both surfaces under a single, opinionated visual system.
"The site sells one product, the app delivers another. We need them to be the same product."
01
Mismatched Visual Languages
App and web had drifted to different colour treatments, type scales and component shapes.
02
Mobile-First, Then Desktop
Most users encountered the brand on mobile first — the desktop landing had to scale up gracefully.
03
Variety of Categories
Hospitality, food & drink, travel — the system had to flex across very different content.
04
No Shared Components
Buttons, cards, headers and form elements were redrawn for each surface.
02 — Strategy
Design the system, not the screens
A single set of tokens and a small, opinionated component library. App and web both compose from the same primitives, so they look related by construction.
3
Categories
2
Surfaces
40+
Components
1
Source of Truth
01
Audit & Token Definition
Defined a shared token set — neutral background, single warm accent, two type families, a tight spacing scale.
02
Category Templates
Three category templates, each composing the same primitives in a layout tuned to its content.
03
Landing Page — Mobile-first
Designed at 375px first, then scaled to a wider desktop layout — a different composition, not a stretched mobile.
04
Component Library
A reusable Figma library — cards, list rows, search bars, badges, CTAs — imported by both app and web.
05
Prototype & Handoff
Clickable prototypes for the core booking flow, annotated specs tied directly to the token set.
