Context & Brief
The brief
DesignLab assigned me a travel discovery platform called Wayfarer. The brief was specific: redesign the homepage and fix the onboarding flow. Users found the existing multi-step signup confusing, repetitive, and inefficient. The layout was inconsistent across devices. The visual language didn't match the audience it was trying to reach.
The audience
Adventurous travelers aged 21–30, digitally native, mobile-first, more interested in authentic cultural experiences than resort packages. They research before they commit. They browse before they plan. Wayfarer's job is to help them discover where to go next, not to book the flight.
Design constraint
Wayfarer is a discovery tool, not a booking platform. The brief said so explicitly.
The Problem
Three problems sat inside the brief. Each pointed to a different kind of design work:
The multi-step signup form was the most cited pain point. Users dropped off mid-flow. Steps felt repetitive. There was no clear signal of progress or what the form was building toward.
The existing design didn’t hold together across screen sizes. Spacing shifted unpredictably. The hierarchy broke on mobile. Components that looked intentional on desktop felt accidental on smaller viewports.
The homepage didn’t pull users into the experience. Destinations were listed, not revealed.
What ties them together
Travel content is invitation, not data. The original site treated it like data.
What Not to Build
Four weeks into building with AI-assisted development, I had a working booking interface. Hotels, cars, full detail pages with pricing and availability mockups. The tools made it possible to go from concept to functional UI in hours instead of days. For the first time, I could build things I'd previously only been able to mock up in Figma.
The problem: the brief said discovery, not booking.
Booking UI pulled attention away from the core experience. It introduced a transactional mental model into a platform designed for exploration. A user browsing destinations in Kyoto doesn't need hotel pricing competing for their attention. They need the content that makes them want to go in the first place.
I scaled it back. Removed hotel and car booking from destination pages. Kept the discovery flow, the globe explorer, the trip planner, and the multi-step signup as the center of gravity.
Key insight
AI tools expand what's possible to build. They don't expand what should be built.
Multi-Step Signup
The original form was the brief's most cited pain point.
Before
One long form. All fields visible at once. Repetitive labels. No sense of progression. Users dropped out before reaching the personalization fields.
After
Five steps, each collecting a different type of preference. Light commitment first; personalization later. The form mirrors the discovery experience the rest of the product asks the user to follow.
Account
Name and email. Low commitment. No password yet.
Travel Style
Solo, couple, family, or group. Budget range. Group size. Context for personalization.
Interests
Eight categories: beaches, mountains, city culture, food, history, wildlife, adventure sports, wellness. Maps aspiration.
Destinations
Select from featured options. Anchors the user's sense of where they want to go.
Review
Full summary with edit-back capability. The user sees what they've built and confirms.
The signup is the user's first interaction with Wayfarer. If it mirrors discovery (explore, choose, refine, confirm), it becomes part of the product, not a gate in front of it.
Why staged
Each step asks for one thing. The form earns trust before it asks for preferences.
Discovery by design, not by default
Three features carry the case study: the globe explorer that makes discovery spatial, the destinations grid that offers a filter-first parallel path, and the multi-step signup that turns preference collection into the first act of exploration.
Globe Explorer
A 3D Mapbox globe as the primary discovery interface. Click a region, fly to the continent, tap a pin, preview the destination. The globe makes geography tangible. Users explore space, not lists.
Discovery starts at world view
The globe loads with destination pins visible across continents. The user's first instinct is to rotate and explore.
The camera does the navigating
Clicking a region triggers a fly-to animation. Pins enlarge as the camera approaches. Hover reveals destination name and tagline.
One template, every destination
The detail page follows a rigid structure: hero, info grid, description, gallery, tips, highlights, related destinations, map.
Mapbox GL with 3D projection and atmosphere · The globe feels physical. Fog and lighting effects create depth that a flat map can't.
Bhutan preselected on first load · The detail card is populated before the user clicks. The empty state never shows.
Instructional copy adjacent to the map · The user sees the affordance where the interaction lives, not in a separate hero block.
Parallel Entry · Destinations Grid
The globe is the novel entry point, but not the only one. The destinations grid is the fallback path for users who already know what region they want. Same content, different interaction. Filter by continent, scan visually, click to go deeper. Two entry points matched to different levels of intent.
Count badges on every filter · Users see how many destinations live under each region before committing to a filter. Less blind clicking, more informed scanning.
Hover preselects on the map · Browsing the grid drives the globe in parallel. Two entry points stay tied together instead of being separate flows.
Multi-Step Signup
Five steps that transform a form into a first act of discovery. Each step collects a different type of preference. The review screen at the end lets users see what they've built before committing.
Account. Name and email. Low commitment entry.
Zod schema validation per step · Errors surface before the user moves forward. No surprise failures at the end of a 5-step flow.
Numeric budget ranges, not labels · $50–100/day, $100–250/day, $250–500/day, $500+. Replaces 'Mid-Range' and 'Luxury' so users see the actual commitment.
Review step before commit · Edit-back capability. The user confirms what they built, not what the system thinks they meant.
Information Architecture
The IA question was: how does a curious traveler find a destination they didn't know they wanted? Search-first answers the wrong user. Browse-first answers the right one. Every IA decision flowed from there.
Two entry points, same content
Globe and grid serve different users with the same content. The globe is for curiosity. A traveler who doesn't know where to look spins it, follows pins, lets a region invite them in. The grid is for intent. A traveler who already knows they want Southeast Asia filters to it and scans. Both paths land on the same destination pages. The IA doesn't pick a winner. It picks both. A single funnel would have served the intent user and frustrated the curiosity one.
Six page types, each owns a task
Six routes, six user verbs: orient, browse, explore, evaluate, plan, personalize. Six covers the full discovery cycle without padding.
What was rejected
Three IA approaches lost the filter:
- Search-first. The default for booking platforms. Searching requires a destination already in mind, and the target audience doesn't know yet.
- Booking-integrated taxonomy. Hotels and flights as primary navigation. The information scent shifted from discover to transact the moment hotel cards appeared.
- Tag-based discovery. Pinterest-style filtering by mood. Tags are aspirational but don't reduce decision space. Continent + interest does.
This IA assumes browse-first is what the audience wants. The hypothesis is reasoned from the brief and competitive analysis, not from a card sort with real users. That's the honest gap. The evaluation plan in §08 is built to test it, starting with whether the globe pulls users in or sends them straight to the grid.
Design System
The original DesignLab style guide defined the palette, typography, logo rules, and image direction. Two typefaces, each with a role. Below, each one is shown set in itself.
Space Grotesk for headings.
Display · 700 · -2% tracking
Geometric sans with strong personality. Sized 60 / 48 / 32 / 24 px across H1 to H4 for editorial display moments.
Inter for body and UI. Legibility at scale, optimized for screen reading at small sizes and for predictable rhythm in long-form content.
Sans · 400 · body
Body, UI, and form labels. Sized 20 / 18 / 16 px. The workhorse, used everywhere outside the display layer.
Palette
Anchored in navy, lavender, and terra cotta. Sage green and warm neutrals fill the supporting layer.
Primary
Navy
#3E3C78
Lavender
#C5C7E3
Deep Indigo
#2C2B5A
Secondary
Terra Cotta
#D27A5E
Sage Green
#A3C9A8
Neutrals
Dark Charcoal
#2E2E30
Light Gray
#D8D9E0
Off-White
#F8F9FB
Logo
The wordmark anchors the brand. Two treatments, one set of rules.
Clearspace
Equal to the uppercase W height on all sides
Minimum size
40px (mobile), 60px (desktop)
Background
White on dark; dark on light
Positioning
Top-left across all viewports
Imagery
Hero photography uses full-bleed crops with relaxed focal points. Destination cards stay consistent across card types. Icons follow the secondary palette.
Hero imagery
Full-bleed with relaxed focal crop
Destination cards
Consistent rounded corners across all card types
Icons
Secondary icons in terra cotta (#D27A5E)
Token architecture
The token architecture follows the same three-tier pattern as Men's Sole Revival and the portfolio site: CSS custom properties as the source of truth, TypeScript semantic aliases for component consumption, and Tailwind utilities for development. Same naming convention across all three projects. One vocabulary, different values per property.
Same naming convention, different values per project. The AB Core Library holds primitives for all three properties.
The system, by page
Five pages from the Wayfarer Figma file, exported at native resolution. Each is its own deep dive; together they show the design system at the depth a senior reviewer would want.
Seven sections covering the full brand: wordmark signature, three colorways, three application rules, eight-color palette with role mapping, typography pairing with editorial sample, glyph set for both display and body faces, and four application mockups (business card, social square, web hero, signage).
Two typefaces, two jobs, no decorative middle. Space Grotesk for the display layer (Display 60 through H4 20). Inter for body, small, and label. Three weight chips per family plus a decision note framing why the roles stay structurally separate.
One palette, three roles, two modes. Ten-step primitive ramps for Brand (Navy), Accent (Terra Cotta), Sage, and Neutral, plus utility colors, plus fifty-plus semantic tokens that swap between Light and Dark cleanly.
Eighteen sections of production components in the file, each mapped to its source file in the Next.js app. The Color section is shown here; type styles, buttons, inputs, navbar, footer, modals, and destination cards continue down the page.
Six routes, two flows, one discovery loop. The IA tree shows every route, modal, and overlay; the user flow shows the curiosity-to-commitment path from land through to print-to-PDF export.
Outcomes
A concept project can't claim live-data outcomes. It can claim what shipped against the brief, what's structurally validated without users, and what's deferred to live testing. That's what this section does.
What shipped, against the brief
The brief asked for two things: a homepage redesign and an onboarding fix. The build expanded around both without breaking either.
The expansion isn't scope creep. §03 shows the booking UI that got cut after AI made it easy to build.
What's structurally validated now
These outcomes don't need live users. Design system coherence: tokens hold across every screen. IA where every route maps to one user verb (orient, browse, explore, evaluate, plan, personalize). Per-step form validation with Zod. No layout breakage at standard breakpoints. The artifact tests cleanly on its own.
The honest scope
No live users tested this. No card sort on destination categories. No usability testing on the globe. The hypotheses are reasoned from the brief and competitive analysis, not validated by behavior. This case study can claim design discipline, scope discipline, and system coherence today. It can't claim user-validated discovery. That's what §08 is set up to test when traffic exists.
Evaluation Plan
Concept project. No live traffic. No user testing budget. These are the specific questions the design hypotheses need to answer, and the thresholds that would tell me whether the answers are right.
Test Protocol
Moderated usability test. 5–6 participants matching the target persona (adventurous travelers 21–30, travel research behavior in the last 6 months). Three task scenarios: discover a destination using the globe, complete the signup flow, and build a 3-day itinerary. Think-aloud protocol. 40 minutes per session.
Show metrics + thresholds
Reflection
AI-assisted development changed the process. Figma mockups to functional React components in hours. The hotel booking UI, the car rental pages, the pricing filters: all built, all working, all wrong for the brief.
I'd test the globe interaction model first if I had more time. The 3D globe is the signature feature, but it's also the riskiest. On mobile, a globe is hard to navigate with touch. On desktop, it's engaging but potentially slow for users who already know what region they want. The continent filter grid exists as a fallback, but I don't know yet whether users treat the globe as the front door or a novelty.
What wasn't done
I didn't conduct user interviews before building. I didn't run usability tests on the signup flow or the globe interaction. The design decisions are reasoned from the brief, the style guide, and competitive analysis of how travel platforms organize discovery. Not from observed behavior with real users. Self-initiated timeline, no research budget. The decisions are reasoned, not tested. That's the honest gap.
Source
The whole project lives in Figma.
Style guide, IA, signup flow, destination templates, and the design system tokens. The file is the source of truth; this case study is the editorial cut.
Next Case Study
Men's Sole Revival