Context & 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. Everything I built had to survive that filter.
The original style guide specified Space Grotesk for headings, Inter for body copy, and a palette anchored in navy, lavender, and terra cotta. I treated these as constraints, not suggestions.
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. For a discovery platform, the signup flow is the first act of discovery. If it feels like paperwork, the product has already failed its promise.
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. Inconsistency erodes trust, and trust is the currency of a platform asking users to plan a trip they haven’t taken yet.
Travel is one of the most visually rich categories in design. The existing site underused it. The homepage didn’t pull users into the experience. Destinations were listed, not revealed. The design treated travel content as data when it should have treated it as invitation.
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. The booking UI was good work. It just wasn't right work.
Key insight
AI tools expand what's possible to build. They don't expand what should be built. When the tools make everything buildable, the design discipline shifts from “can we?” to “should we?”
Design Decisions
Two systems shaped the experience: the information architecture that organizes 40+ destinations into a discoverable structure, and the multi-step signup that turns preference collection into a first act of exploration.
Information Architecture: 40+ Destinations, One Discovery Path
The IA question was: how does a curious traveler find a destination they didn't know they wanted? Browse-first, not search-first. The globe is the primary entry point. Clicking a region flies the camera to that continent. Pins mark destinations. Hovering reveals a preview. Clicking opens the full detail page.
The fallback path is the destinations grid with continent filters. Users who know what region they want can filter directly. Users who don't can explore the globe. Two entry points, same content, matched to different levels of intent.
Each destination detail page follows a consistent structure: hero image with metadata, info grid (best time to visit, language, currency, temperature, timezone), long description, photo gallery, travel tips, highlights, related destinations, and a location map. The structure is rigid by design. When the content varies, the container shouldn't.
Multi-Step Signup: Progressive Disclosure as Discovery
The original form was the brief's most cited pain point. My redesign broke it into five steps, each collecting a different type of preference:
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 design logic: the signup flow is the first interaction a new user has with Wayfarer. If it mirrors the discovery experience (explore, choose, refine, confirm), the form becomes part of the product, not a gate in front of it.
Design System
The original DesignLab style guide defined the palette, typography, logo rules, and image direction. I treated every spec as a constraint, not a suggestion. Two typefaces, each with a defined role. Space Grotesk for headings: commanding without being aggressive. Inter for body: clean and legible at every size. No decorative pairing. The roles are structural.
Typography
Headings (H1-H4)
Space Grotesk Bold
60, 48, 32, 24px
Body
Inter Regular
20, 18, 16px
Usage
Bold for section headings, Regular for body copy
Palette
Primary
Secondary
Neutrals
Logo Usage
Clearspace
Equal to the uppercase “W” height on all sides
Minimum size
40px (mobile), 60px (desktop)
Background
White logo on colored or dark backgrounds; dark logo on light backgrounds only
Positioning
Top-left corner across all viewports
Image Style
Hero imagery
Full-bleed with relaxed focal crop
Destination cards
Consistent rounded corners across all card types
Icons
Secondary icons in terra cotta (#D27A5E) to maintain visual consistency
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.
Site Architecture
Six page types, each designed for a different user task. The information architecture supports a natural progression from orientation to planning without forcing a linear path.
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.
The globe loads with destination pins visible across continents. The user's first instinct is to rotate and explore.
Clicking a region triggers a fly-to animation. Pins enlarge as the camera approaches. Hover reveals destination name and tagline.
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.
Custom markers with hover state and keyboard access · Terra cotta pins with white borders — per brief, the accent color marks interactive elements. Hover triggers a popup with name and tagline. Enter/Space to select. Accessible by design.
Fly-to animation on region click · Smooth camera transition. The movement communicates geography. Users build spatial memory of where destinations sit.
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.
Continent filter pills · Seven regions (All, Africa, Asia, Europe, North America, South America, Oceania). Filter state is preserved as the user scrolls. No page reloads.
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.
Shared destination card component · The same card that appears in the globe's hover state appears here — consistent visual language across both entry points.
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.
Animated background image per step · Each step has a travel image that shifts with the content. The form feels like a place, not a spreadsheet.
Review screen with edit-back buttons · Users can jump to any previous step and return. The review screen is the safety net that makes 5 steps feel manageable.
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.
Qualitative Signals to Watch
→Do participants use the globe or go straight to the grid? The answer reveals whether the globe is novel or just friction.
→On the signup flow, do users read the interest categories or just tap quickly? Reading means the categories feel meaningful.
→After completing the signup, do participants expect personalized results? If yes, the form set the right expectation.
→In the trip planner, do users discover drag-to-reorder without prompting, or do they look for arrows or edit buttons?
Reflection
The hardest design decision wasn't any single UI choice. It was removing working features that existed because the tools made them easy to build.
AI-assisted development changed my process. I went from 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 this project. The brief said discovery. The tools said “you can build anything.” The discipline was holding the line between what's possible and what's right.
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. That question matters more than any visual polish.
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.
If I had more time
Run moderated usability tests with 5–6 participants matching the target persona. Test the globe vs. grid as primary entry points. Measure whether the 5-step signup achieves higher completion than a collapsed single-page form. Validate the destination detail page structure: does the rigid layout help or hinder scanning when content varies by destination?
The bigger open question: competitive analysis of travel discovery platforms (Google Travel, Wanderlog, Inspirock, Atlas Obscura). I designed from the brief, not from a market audit. A card sort on the interest categories. User interviews about how 21–30-year-olds actually research travel. The design reasoning is sound, but reasoning isn't evidence.
Next Case Study
Spotify: Recently Played Controls