The temptation with any website is to start by picking colours and dragging boxes around. Resist it. The escaperoomswellington.com build worked because the thinking came first: a clear plan of what should convert, and a small set of design decisions locked down before any page was built. This module is that pre‑work — done in Claude‑Chat — and it's maybe an afternoon that saves you weeks.
Step 1 — Audit for conversion leaks
Start by being honest about where visitors give up. For an escape room, the same leaks show up again and again, and naming them gives you your build priorities. The ones that mattered most here, roughly in order of impact:
- No price anywhere. People won't email to ask; they'll just book the competitor who shows it.
- No real social proof. Anonymous testimonials read as invented. A real star rating and review count is the single most persuasive thing you can add.
- A cold booking step. A bare embedded calendar at the moment of highest intent, with no reassurance around it.
- Choice paralysis. Three or four rooms and no help deciding, so the visitor stalls.
- First‑timer nerves left unanswered ("do we get locked in?", "is it claustrophobic?").
Write these down. Every one becomes a section or a feature later in the build.
Step 2 — Set the visual direction
Escape rooms are mysterious, immersive and a little dramatic. The site should feel like that. The direction that worked:
- A dark, cinematic base. A near‑black background (here,
#0A0A0A) makes photography and video pop and instantly reads as "premium experience," not "activities listing." - One dominant action colour. A single high‑contrast accent (here a warm coral,
#FF6A3D) is reserved only for the primary "Book / Check Availability" buttons, so the thing you want people to click is always the most visually dominant element on the screen. Nothing else is allowed to use that colour. - Per‑room accent colours so each room has its own identity while the overall shell stays consistent.
One design system, distinct rooms: the same card, themed per room.
Step 3 — Pull the room colours from the real rooms
This is the single best design decision in the project, and it's reusable anywhere. Don't pick room colours from genre clichés ("spy = grey"). Pick each room's accent from a real, physical element inside that actual room. The site then feels like the place people walk into.
- Operation Beehive is a Cold War spy office — warm tungsten lamplight, manila dossiers, a red "classified" stamp. So: amber‑gold with a crimson accent.
- Diamond Heist has real green laser beams. So: vault blue and diamond white, with electric green used only as a sharp highlight.
- Quest for the Magic Wand is a wizard school. So: mystic purple and teal.
A bonus rule this surfaces: make sure no two rooms lead with the same colour, or they stop feeling distinct. Tie each to something real and keep them clearly different at a glance.
Step 4 — Lock it into tokens
A decision that stays vague gets re‑argued later. The moment you choose something, write it as a concrete value:
- Exact colours as hex codes (e.g. Beehive amber
#C8911E, crimson#9E2B25), not "warm gold." - Typography as named fonts — here a characterful display face for headlines (Bricolage Grotesque) and a clean, highly readable sans for body text (Hanken Grotesk).
- The structural rules — the dark shell, the surface colours for cards, the one‑accent‑for‑booking rule.
This little table of values is your design system. It's what keeps forty pages looking like one site, and it's the precise brief you hand to the designer and later to the engineer.
Step 5 — Decide the page structure
Finally, list the pages and what each is for, grouped by job. For an escape room, this template covers it:
- Homepage — the showcase and the router to everything else.
- Room pages (one per room) — sell each individual experience.
- A "which room?" helper — remove choice paralysis.
- Group bookings — capture the high‑value corporate/party enquiries.
- A speciality / occasion page — the SEO magnet (here, Teenage Birthday Parties, which ranks #1 for its term).
- Deals — the value‑seekers and seasonal traffic.
- Booking — the conversion moment.
- Contact — the reassurance and the "are they real?" check.
That's the spine of the rest of this series. One plan, one design system, one page list — all decided before a single page is built.