Reimagining DCL Booking Site
- 01Where the booking flow fails users
- 02Wireframes before Figma
- 03Building a design system from a live site
- 045 High Fidelity Screens 1 Library
DCL Booking
Designing for Better Decisions Reimagining the DCL Booking Experience.
DCL Booking · Wireframes
Decisions before pixels.
Beat 01
Catalogue the pain.
Walked the live booking flow end-to-end. 22 friction points, severity-rated low-high.
- 22 friction points logged
- Low-high severity rating
- Linked to evidence screenshots
Beat 02
Cluster, then route.
Grouped friction into journey beats: discover → compare → decide → personalize → checkout. Each beat asks one question.
- 5 journey beats from 17 frictions
- One decision per screen
- Comparison promoted to a first-class moment
- Itinerary reframed as decision tool
Beat 03
Sketch the answer.
Wireframed the five high-impact screens: listing, compare modal, itinerary, travel party, mobile listing. Greyscale only; locked the IA before any color.
- Listing + persistent filters
- Compare drawer + 3-up modal
- Itinerary as a decision tool
- Live demo: the actual wireframes in Figma
DCL Booking · Foundations
Read what's there before you redraw it.
Beat 01
Listen, don't draw.
Scraped the live DCL site for color, type, spacing, and imagery. The brand has a voice; start as a listener, not a redrawer.
- Color palette extraction
- Display + body type sampling
- Spacing & grid audit
- Imagery library logged
Beat 02
75 primitives.
Turned observations into a token graph: color ramps, spacing scales, type ramp, radii. All primitives, all named.
- Color ramps (navy / cyan / neutral / Halloween)
- Spacing scale 4 → 96
- Type ramp 12 → 32
- Radii / strokes / feedback states
Beat 03
One swap, every screen.
Layered 58 semantic aliases on top: color/action/primary, color/text/price-best, color/feedback/*. Brand swap = one variable.
- 58 semantic aliases on top of 75 primitives
- color/text/price-best introduced as a first-class concept
- Halloween theme pre-wired (1-variable swap)
- Live demo: open Figma, change one variable
DCL Booking · Components
11 components. Zero hardcoded values.
Beat 01
Smallest reusable units.
Single-purpose pieces. Every fill, stroke, radius bound to a semantic alias. Zero hardcoded hex.
- Button · Input · FilterChip
- Stepper · Switch · Checkbox
- StatusPill · Tag · Badge
- Divider · Icon · Image
Beat 02
Compose, don't redraw.
Reusable units made from atoms. CruiseCard exposes Image as INSTANCE_SWAP; 17 real DCL photos wired in.
- TopNav · SearchBar
- CruiseCard (INSTANCE_SWAP, 17 images)
- DateCard · ItineraryDayCard
- StateroomPicker · PromoBanner · Modal
Beat 03
Page-level scaffolds.
Layouts that consume modules. ComparisonModal is a new Pattern/Overlay, introduced because comparison was a missing first-class moment.
- HeroSearch · ListingResults
- CruiseDetail · TravelParty
- ComparisonDrawer + ComparisonModal (new)
- Live demo: instance swap + token cascade
Beat 04
Engineers can build this without asking a designer.
Every component ships with annotated token specs. Tokens compile to CSS custom properties, Tailwind config, and typed component usage. Zero ambiguity at handoff.
- Annotated specs: BG · BORDER · RADIUS · PAD · GAP
- CSS: --color-action-primary, --radius-card…
- Tailwind: extend.colors.action, borderRadius.card
- ·
DCL Booking · Screens
Five screens. One library.
Beat 01
Find a cruise, fast.
Persistent active-filter chips, no hidden metadata. Pinnable cards feed the comparison drawer.
- Active-filter chip rail (removable)
- Pin-to-compare on every card
- Best-value badge using color/text/price-best
- Sticky filter sidebar
Beat 02
Decide between three.
New ComparisonModal pattern: 3-up side-by-side. The modal exists because comparison was a missing first-class moment in the live site.
- 3-up side-by-side comparison
- Sticky decision rail
- Mobile stacked layout w/ tab-pill switcher
- Pinned cards survive across pages
Beat 03
A decision tool, not a brochure.
Map at ~60% viewport. Day cards redesigned for context. Sticky CTA rail keeps the booking action one tap away.
- Map-led layout (~60% viewport)
- Contextual day cards
- Sticky CTA rail
- Travel-party screen documented; same library
Beat 04
Same library, 375px.
Mobile listing + comparison reflow; same tokens, same components, no parallel design system.
- 375px viewport
- Stacked compare with tab-pill switcher
- Same component instances as desktop
- Live demo: build a screen live in 90 seconds
DCL Booking · Wrap