UI & UX

Itinerary Case Study

IA

UI & UX

These pages are an absolute powerhouse. I’m not just doing web design here; I’m  doing Product Management, Interaction Engineering, and Deep User Research.

UI

- User Interface (UI) Visuals, Aesthetics & Interaction Engineering

Dynamic Viewport Centering (Focus UI)

  • When a user clicks a card, my JS calculates the element’s bounding rectangle (getBoundingClientRect) and automatically scrolls the window to perfectly center the newly opened description. This is a highly advanced, app-like micro-interaction that provides a premium, guided feel. See it live ↗

Skeuomorphic Micro-Aesthetics

  • The background dots in the intro section aren’t just texture. I designed them mimic map location pins with fading radiuses. This matches the travel and routing theme. See it live ↗
  • Also: The color of the dots change based on the type of itinerary page .

Visual (Zoomed In)

Thematic Color Psychology

  • Using the orange, red, and yellow palette specifically for the itinerary pages evokes energy, movement, and activity—perfectly matching the itineraries vibes and expectation.

Explicit Affordance

  • The “+” button at the bottom of the card acts as a clear visual signifier (an affordance), letting the user know without guessing that the card is expandable.

Visual

UX

- User Experience (UX) Psychology, Behavior & Empathy

Scenario-Based Design & Persona Mapping

  • Building 15 different itineraries based on the “What If?” method is the definition of Persona Mapping. I didn’t just build a generic tool; I designed specific product variations for specific user archetypes (Tourists vs. Non-Tourists, Women-only, Nightlife seekers and Food Trail only).

Predictive / Anticipatory Design

  • I didn’t just list times; I anticipated the logistics. Padding the gym class by 15 minutes and sequencing the coffee run beforehand shows deep user empathy. I solved the logistical friction before the user even had to think about it. I also did the same for the itineraries dealing with shows (showing the best days) thats requires perfect timing! See it live ↗

Cognitive Load & Stress Reduction

  • By actively hiding the heavy text of the itinerary details until the user clicks, I drastically reduced visual clutter. I understood that showing 7 full stops worth of text at once causes “user stress.” This is only activated when the user clicks on the plus icon! This is the user saying: “I am interested”.

Immersive Storytelling (Contextual Imagery)

  • Changing the transit background image to match the actual mode of transport (a subway car for the train, a street for walking) creates a highly immersive narrative flow. The user can visually “feel” the transition between stops.

Visual

Expectation Management

  • Placing “7 Stops Each” right before showing the itinerary stops and details immediately sets the boundaries of the experience, preventing the user from wondering how long the itinerary will go on.

Visual

IA

IA

- Information Architecture (IA) Structure, Sorting & Data Categorization

Ecosystem Looping (Retention Strategy)

  • I Strategically placed the “Week 2” and “Week 3” pills at the top to ensure that when the user finishes reading Week 1, their next immediate step is to stay within my digital ecosystem rather than bouncing off the site.

Visual

Progressive Disclosure (The Hidden Details)

  • Hiding the specific “Must-Do” text and descriptions behind the clickable trigger container is textbook Progressive Disclosure. I gave the user the macro-data first (Time, Place, Image) and let them request the micro-data (the description) on demand.

Persistent Wayfinding (The Sticky "Days" Nav)

  • Making the “Days” pill sticky with anchor links allows users to bypass linear scrolling. If they only care about Sunday, they don’t have to scroll past Monday through Saturday to get there; they can jump where they want instantly.

Visual

Microcopy for Intent

  • Using clear, descriptive microcopy like “Fast & Diverse + The Local Explorer” and “Week 1” instantly communicates the category of the data they are about to read, ensuring they are in the right place before they invest time scrolling. See it live ↗