UI & UX

Hotel Case Study

IA

UI & UX

UI

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

Iconography & Glyph UI Patterns

  • By using universal emojis for the “Overall Best” hotels, I replaced bulky text descriptions with instant visual shorthand. This caters perfectly to mobile users who scan rather than read. See it live ↗

Visual

Strategic Visual Omission (UI for Conversion)

  • I intentionally stripped those emojis and extra details away from the 3 secondary hotels. In UI design, this creates a strict visual hierarchy. By making the “Overall Best” look richer in data, I naturally draw the user’s eye and clicks toward your highest-converting affiliate recommendation.

Legal Compliance & Trust UI

  • Prominently displaying the affiliate disclosure and the explicit “Source: Expedia” tags isn’t just about following rules; it is a UI pattern that builds immediate credibility and brand safety.

UX

- User Experience (UX) Psychology, Behavior & Empathy

Qualitative Research & Empathy Mapping

  • I didn’t just guess what users wanted; I used “social listening” (analyzing TikTok/social media comments) to identify exact user pain points (e.g., “Where to stay for X?” or “I booked, now what?”). I then designed the entire page to answer those specific questions.

Hick’s Law & Decision Fatigue

  • By strictly limiting the neighborhood recommendations to just 3 hotels, I applied Hick’s Law. Giving a user 50 options causes paralysis; giving them 3 curated options creates confidence and drives them to actually click and book.

The "Next Best Action" (NBA) & Ecosystem Looping

  • The “Itineraries to pair it with” link and the bottom orange Itinerary section solve the post-booking UX drop-off. Instead of the user booking a hotel and leaving my site, I anticipate their next thought (“I booked, now what?”) and loop them directly back into my ecosystem.

Visual

Contextual Friction Reduction (Helpful Tips)

  • Providing a specific, highly localized tip (e.g., “Ask for a high floor to avoid noise in Times Square”) and the “Focus” acts as contextual help. It reduces the user’s anxiety about making a bad booking decision. See it live ↗

Visual

Interaction Cost Reduction

  • The Intro Nav anchor links allow users to instantly bypass generic lists and jump exactly to their specific intent (Views, Transit, etc.) with a single click. See it live ↗

IA

IA

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

Intent-Based Taxonomy

  • •Most travel sites categorize purely by Geography (e.g., Manhattan vs. Brooklyn). I built an Intent-Based Taxonomy (Location, Views, Transit, Specifics). I architected the data around the user’s internal goals rather than just a map.

Relational Content Architecture

  • By linking specific hotels to specific itineraries (e.g., linking Pod 39 to the Midtown itinerary), I created a relational database model. The content doesn’t live in isolation; it speaks to the other nodes in my digital ecosystem. See it live ↗

Macro-to-Micro Data Aggregation

  • I structured the content by setting the macro “Focus” (the overarching neighborhood vibe) before drilling down into the micro details (the 3 specific hotels). See it live ↗