A discovery-first travel platform with an interactive globe and a 40-destination library. Four-week DesignLab brief expanded into a working product with a documented design system.
wayfarer.barreiro.com · live
“Travel content is invitation, not data. The original site treated it like data.”
Three problems sat inside the brief. Onboarding friction (the multi-step signup form was the most cited pain point; users dropped off mid-flow). Layout inconsistency (the existing design didn’t hold across screen sizes). And no visual storytelling (the homepage listed destinations instead of revealing them). What tied them together: travel content is invitation, not data. The original site treated it like data.
Phase 1
Heuristic evaluation + site audit
Phase 2
Card sort, IA, personas
Phase 3
The discovery pivot
The Figma source carries the full design history. Research clusters became personas. Personas became an IA. The IA became wireframes. Wireframes became hi-fi explorations. Hi-fi became code. Three phases below. The shipped product is the last frame in the chain.
→ Click 01 · 02 · 03 to switch phases
Three personas synthesized from interviews. A heuristic audit of direct and adjacent travel platforms across discovery, planning, and booking. Together they answered two questions: who is this for, and what is already broken in the category. The site map and user flow that came out of this work get their own section below.
The Curious Drifter
Has 14 days off, no idea where to go.
Browses moodily, Pinterest, Instagram saves, Reddit. Decision criteria are aesthetic + emotional ("feels like an adventure") more than budget-led.
Want / friction
Wants: A way to translate vibe → place. Loses: Hours to algorithmic feeds that show only what is already popular.
The Planner
Specific dates, two adults + two kids, $8K budget.
Comparison-shops. Has spreadsheets. Tracks visa requirements, vaccinations, school holidays. Decision criteria are logistical first, aspirational second.
Want / friction
Wants: Structured comparison + planning. Loses: Trust in sites that bury the practical info (visa, weather, language) below booking widgets.
The Returner
Has traveled extensively. Saves destinations for later.
Wayfarer is her commonplace book. Bookmarks destinations she might pitch as future stories. Decision criteria are professional + curatorial.
Want / friction
Wants: A place to bookmark + annotate, no auth pressure. Loses: Trust in any platform that gates content behind sign-up.
Personas · three traveler archetypes
The taxonomy is the product. Every place is tagged with categories (hidden, ruins, natural) that drive cross-linking.
Lift
Tag-led navigation feels editorial, not algorithmic.
Skip
Density of content is overwhelming for casual users.
Best Time to Visit is the most-quoted field. Travelers cite it back as if it were the destination's headline.
Lift
Promote that one fact above all others in the sidebar.
Skip
Long-form essays bury the practical info.
Photo-first grid with light filters. Hover reveals price and location.
Lift
Photo-led grid as the primary discovery surface.
Skip
Booking-first framing. Wayfarer is upstream of that decision.
Competitor audit · three lifts, three skips
Every screen started as a paper sketch. Seven hand drafts mapped the signup flow before a single Figma frame. Below: Step 1 in its original sketch and its v.4 hi-fi, then the iteration trail (seven mobile homepage versions, four signup versions) kept in the Figma source as proof of the work.
Step 1 · paper to product
Left: v.4 hi-fi · right: pencil draft
Homepage · mobile v.7
Multi-step signup · desktop v.4
Four key surfaces wireframed before the hi-fi: homepage as editorial cover, globe as discovery surface, trip planner with the three primitives, and the multi-page signup. Each ships in the live product.
Wayfarer’s IA is intentionally shallow. Every primary destination is reachable in one click from the navbar. The deeper structure is the discovery loop: Home → Discover (or Destinations) → Detail → Planner → back. Each route in the map corresponds to a file at src/app/{slug}/page.tsx. Modals and overlays are separated from the route layer because they sit above route state, not within it.
Site map
Primary user flow
STEP 1
Land
Homepage
STEP 2
Browse
Discover · /destinations
STEP 3
Decide
Detail · /destinations/[slug]
STEP 4
Save
Saved Locations rail in /planner
STEP 5
Commit
Promote saved → segment
STEP 6
Export
Print-to-PDF
Six steps. Each step maps to a route or a state. No skip from Land to Commit; saving precedes committing on purpose.
Globe explorer · Bhutan selected, sticky card on the right
Cut
Kept
Four weeks into building with AI-assisted development, I had a working booking interface. Hotels, cars, full detail pages with pricing. The tools made it trivial to go from concept to functional UI in hours. The brief said discovery, not booking. I scaled it back. Removed hotel and car booking from destination pages. Kept the globe explorer, the trip planner, and the multi-step signup as the center of gravity. AI tools expanded what was possible to build. The discipline was deciding what not to build.
Navy + coral on paper. Globe wordmark anchors the brand. Voice borrows from National Geographic and Apartamento more than from Expedia. The token names matter: every brand color in the system maps directly to a CSS variable in production. The Figma file IS the source of truth; this case study is the editorial cut.
Four color ramps, nine type styles, eighteen documented components. Every component in the Figma source carries a ‘MATCHES src/...’ cross-reference to the production file it ships from. Design system coherence isn’t a claim; it’s a paper trail.
→ Click 01 · 02 · 03 to switch panels
Eighteen documented sections in the Figma source: Color, Typography, Button, Icon Button, Link, Search Pill, Kbd, Eyebrow Label, Badge, Text Input, Destination Card, Section Header, Navbar, Footer, Map, Mobile Nav, Sign In Modal, Destination Image. Each one carries a code cross-reference. The Destination Card (Section 11) is shown.
Same token names, different values per project. Wayfarer ships navy + coral. The portfolio system (AB Core) and Men’s Sole Revival share the same primitives at different points on the ramp. The naming convention is the contract; values are the variable.
| Token | Wayfarer | AB Core | MSR |
|---|---|---|---|
| brand-500 | #3E3C78 | #1C3F5E | #1C3F5E |
| brand-900 | #2C2B5A | #091016 | #13100C |
| accent-500 | #D27A5E | #C4703A | #C4703A |
| neutral-50 | #F8F9FB | #F8F7F7 | #F8F7F7 |
| neutral-500 | #6B6560 | #6B6560 | #6B6560 |
Token table excerpted from the AB Core Library. Same naming convention across all three projects.
wayfarer.barreiro.com is live. Homepage, globe explorer, destinations grid, destination detail templates, trip planner, 5-step signup. Six-page IA mapped to user verbs: orient, browse, explore, evaluate, plan, personalize. Eighty-seven destinations live on the globe. Full design system documented and code-cross-referenced.
Destination template · live
Every destination ships through the same six-block template: hero, about, gallery, highlights, location, quick info. The template is the contract; content is the variable.
Trip planner · annotated
Four decisions visible on one screen.
Three primitives in the header.
Segments, days, saved. Three counters surface the plan’s shape at a glance. Each one is a unit of commitment: segment is high, day is medium, saved is low.
Plan without dates.
Each segment has a duration in days and a soft ‘When’ field set to Flexible by default. Dates are optional, not required to save the plan.
Transit between segments.
Distance and travel time render between adjacent segments. The plan models the gaps, not just the stops.
Saved sidebar stays separate.
Bookmarked destinations live in a sidebar below the segment list. A ‘maybe’ doesn’t pollute the plan until promoted to a segment.
Planner journey
Multi-step signup · live UI
→ Click a step to view it full size.
Step 01 · Account. Account precedes preferences. Three fields, one primary action, soft tropical photography behind. The cover sets tone before it asks for data.
Step 02 · Travel style. Three preference rails: travel style, budget range, group size. The first preference question is identity, not data: how do you travel?
Step 03 · Interests. Eight interest tags. Multi-select. No required minimum, no maximum. Skip is allowed. Drives destination feed weighting.
Step 04 · Dream places. Six aspirational destinations as seed data. The system asks where you want to go before it tells you where to go.
Step 05 · Review. Edit-back review screen. Account, preferences, interests, destinations — each block has its own Edit link. Any answer can be revisited without losing the others.
Step 06 · Welcome. Confirmation modal. Green check, single warm sentence, one primary action: Start Exploring. The handoff drops the user into a personalized feed, not a generic homepage.
Each step independently validated. The review screen lets the user jump back into any step without losing input. Preference data drives the post-signup home feed.
Brief vs delivered · scope discipline
The brief asked for a homepage and an onboarding fix. The build expanded around both without breaking either. The expansion isn’t scope creep. §02 The Bet shows what got cut to make room for it.
| Brief asked for | Delivered |
|---|---|
| Homepage redesign | New homepage with editorial cover, globe entry point, and feature highlights |
| Onboarding fix | 5-step signup with per-step validation, edit-back review, and welcome screen |
| (beyond brief) | Interactive 3D globe with 87 destinations across 8 continents |
| (beyond brief) | Six-page IA mapped to user verbs (orient, browse, explore, evaluate, plan, personalize) |
| (beyond brief) | Destination detail templates with hero, gallery, highlights, quick-info side rail |
| (beyond brief) | Trip planner with three primitives (segment, day, saved) and transit estimates |
| (beyond brief) | Full design system (tokens, type, components) cross-referenced to production code |
Two rows hit the brief. Five rows expanded it. The build held discipline against what was cut, not against what was added.
Dedicated A11y system audit page in the Figma source. Contrast ratios for every color pairing (the warm off-white over navy pair clears 15:1; the muted variant clears 10.5:1). Focus orders documented per page. Keyboard nav patterns for the globe (continent-grid fallback). Screen-reader labels on every icon button. The artifact is the receipt.
Discovery has to survive the phone. Hierarchy holds, the globe reduces to a continent grid, and the signup keeps its progress meter.
Mobile screen captures from the live site at wayfarer.barreiro.com pending. Wireframe source in the Figma file (Responsive · Mobile Breakpoints page).
