UI & UX

Food Case Study

IA

UI & UX

UI

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

Organic Geometry & Thematic Chromatics

  • For the “Occasions” section, I abandoned strict, rigid grid borders in favor of fluid, organic border radiuses and colorful gradient backgrounds. This visually communicates a “fun and relaxed” vibe compared to the more structured informational sections. See it live ↗

Partial Affordance

  • By intentionally letting the Substack teaser card show only half of the image, I provide a visual cue that there is more content living just off-screen, prompting interaction. See it live ↗

Visual

Negative Contrast UI (Dark Theme)

  • Utilizing a unified dark background reduces eye strain and allows highly saturated imagery (food photography, neon signs) to pop dramatically off the screen.

UX

- User Experience (UX) Psychology, Behavior & Empathy

Wayfinding & Anchor Links

  • By placing the 4 primary jump links (Types, Areas, Substack, Occasions) immediately in the hero section, I give the user instant control over their journey, allowing them to bypass irrelevant content and avoid scrolling fatigue. See it live ↗

User-Centric Content Strategy & Trust Building

  • Instead of relying on obvious algorithmic popularity, I applied editorial judgment (e.g., ranking a lower-quality but highly famous spot like Joe’s Pizza further down). This proves I prioritize user benefit over brand names, which builds deep trust. See it live ↗

Immersive Contextualization

  • By placing authentic photos of the actual neighborhoods behind the slider text, I anchor the digital layout in the physical world, making the user feel connected to the geography of the city. See it live ↗

Visual

Contextual Help & Localization

  • I made a “Must Knows” section that decodes menus terminology for other tourists. I identified a vulnerable user persona (the non-local) and proactively designed a solution to prevent their frustration.

Visual

IA

IA

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

Content Chunking

  • Instead of presenting a massive, overwhelming database of restaurants, I broke the architecture down into distinct, easily digestible macro-categories available right from the hero section (Types, Areas, Substack, Occasions).

Descriptive Metadata & Folksonomy

  • I didn’t just list addresses; I built a rich tagging system. The small grey tabs (e.g., Cozy, Best Burgers, Bistro) act as descriptive metadata, allowing users to scan for a specific vibe rather than just raw data.

Visual

Taxonomy & intent-Based

  • Using the Breakfast page for example, I used a strict Intent based hierarchical taxonomy mapped out below: meal type (Breakfast) → intent (Types) → sub category (Bagels/Coffee/Pancakes…) → specifics (shown after hover/click/tap with metadata shown also). See it live ↗