DCL Booking Experience
OUTCOME
Reimagined the Disney Cruise Line booking experience to help users make faster, more confident decisions through clearer filtering, comparison, and itinerary planning.
FEATURES
Active Filter Chips, Pin-to-Compare, Comparison Modal, Itinerary Decision Tool, Reusable Component Library, Semantic Token Theming, Desktop/Mobile Parity, Developer Handoff, Live Prototype
The Problem
The live Disney Cruise Line booking flow asks people to choose from 467 cruises with no clear hierarchy, so the journey starts in decision paralysis. There's no way to compare sailings side-by-side, itinerary details are buried at the exact moment people need them, and active filters disappear from view, so users lose their search context halfway through. Walking the flow end-to-end surfaced 22 friction points, each rated for severity.
The Solution
Decisions before pixels. I clustered the friction into five journey beats (discover, compare, decide, personalize, checkout) and wireframed the five highest-impact screens in greyscale before touching color. Then, instead of inventing a new look, I read the brand that already existed: I audited the live site for color, type, spacing, and imagery, and used AI to extract those into reusable components and tokens. That let me organize and build out the full system and screens far faster than a manual rebuild. The result is five redesigned screens running on one shared library.
The Product
The DCL Booking System is a complete, reusable design system plus five high-fidelity screens, all built from the live Disney Cruise Line brand. It turns a sprawling catalogue into a guided path toward one confident booking decision.
Underneath the screens sit 75 token primitives and 58 semantic aliases, so every fill, stroke, and radius points to a named variable with zero hardcoded values. Comparison, which the live site never offered, becomes a first-class moment through a new Comparison Modal. The same tokens and the same components power both desktop and mobile, so there's no second design system to maintain.
Key Features
- Decision-First Information Architecture: Five journey beats with one decision per screen, so people always know what to do next.
- A Design System Read From a Live Site: 75 primitives and 58 semantic aliases extracted from the real brand, not invented in a vacuum.
- First-Class Comparison: A new Comparison Modal puts three sailings side-by-side, the exact moment the original flow was missing.
- Itinerary as a Decision Tool: A map-led layout with contextual day cards and a sticky booking action, instead of a static brochure.
- One Library, Desktop & Mobile: The same component instances reflow to 375px with no parallel design system.
- Themeable in One Variable: A Halloween theme is pre-wired, so a full seasonal reskin is a single variable swap.
- Built for Engineer Handoff: Every component ships with annotated token specs that compile to CSS variables, Tailwind config, and typed component usage.
- AI-Accelerated System Build: Used AI to extract components from the live brand and quickly organize, assemble, and build out the screens, replacing a slow manual rebuild with a fast, repeatable workflow.