Buddy House

A restaurant site redesigned around mobile booking — fewer steps, thumb-reachable actions, and a brand system that still reads clearly on a phone.

Role

Brand UI Design · Design System · Mobile UX

Impact

Rebuilt the booking path into a shorter, thumb-first sequence and documented it as a design system ready for implementation.

Tools

Figma · Material Design 3 · Material Theme Builder · Tailwind CSS · Vue.js · Recraft AI

Design Highlights

Design System: established a complete Figma system on Material 3 guidelines for consistent cross-platform implementation
Accessible Color: developed a WCAG 2.1 AA compliant palette inspired by local urban colors (MRT Green Line)
Flow Design: rebuilt the booking flow around thumb-zone ergonomics, cutting the path into fewer steps with visible progress

Positioning

A warm restaurant experience built for mobile decisions

Buddy House connects brand identity with actual booking behavior. The point was never just a cosy visual tone — it was letting people scan the menu, find the booking entry, and reserve quickly on a phone. I defined the brand mood, built the color and component system in Figma, and redesigned the reservation flow into patterns that translate directly into Vue and Tailwind.

Problem & Goal

Keep the brand warm while making booking faster

Many restaurant sites have plenty of atmosphere but bury the booking action, require too many page jumps, and present menus that are hard to read on small screens — users leave before they even decide. The goal was to preserve a friendly dining mood while cutting friction: clearer hierarchy, bigger touch targets, and fewer decision points.

Key Decisions

Design around the booking task, not only the homepage look

Settled menu, information, and booking priority in wireframes first, then applied the warmer visual system on top.
Placed reservation actions inside thumb-friendly zones and cut the path into fewer steps with visible progress.
Used Material 3 color roles rather than one-off colors, keeping the palette warm while holding WCAG AA contrast.

Key Screens

Mobile flow and brand system as one experience

These screens explain how flow, wireframe, and system decisions work together instead of treating branding and UX as separate deliverables.

Buddy House wireframe layout analysis. — Wireframe: clarifies layout priority before any visual styling.

Numbered four-step flow captured from the live mobile site: home, category navigation, menu, and the reservation form, with a marked shortcut showing the booking action sits in the header of every screen. — Booking flow on the live site: four steps to reach the form, and a header shortcut that reaches it in one tap from anywhere.

Recording of the Buddy House menu navigation: moving between Menu, Pizza, Drinks, and FAQ cross-fades the photo panel on the right. — Menu navigation in the built site: each item cross-fades its own photo, so the category is confirmed visually before the guest commits to a tap.

Brand Identity Case

Translating warmth into repeatable interface rules

The brand system uses local color inspiration, rounded-but-controlled components, and soft contrast to feel approachable without losing clarity.

Defined color roles instead of one-off colors, so the palette scales across sections.
Balanced food-service warmth against readable typography and spacing.

Design System Case

Tokens ready for implementation

Type scale, tonal palettes, and color roles were documented as a system, so the same rules survive the handoff into code instead of being re-decided per screen.

Buddy House type scale from Display Large 128/128 down to Body Small 12/16, each step listing size, line height, and letter spacing. — Type scale: every step carries a fixed size, line height, and letter spacing, so headings are picked from the scale instead of eyeballed.

Material 3 tonal palettes for primary, secondary, error, neutral, and neutral variant, with the resulting light and dark color role mappings. — Color roles: five tonal palettes resolve into a light and a dark set, so dark mode is derived from the same tokens rather than recolored by hand.

Design Checks

This is a self-initiated concept project, so the items below are design targets I set and reviewed the interface against — design hypotheses, not measured results from user testing.

WCAG AA: Color contrast target
Material 3: Token-based color and component system
Thumb zone: Placement rule for primary booking actions

Reflection

Next iteration should connect booking with operations

The current design solves the customer-facing flow. A stronger next version would add staff-side booking management, availability rules, and post-booking messages.

Add empty, error, and fully booked states for realistic reservation behavior.
Check whether menu scanning and booking actions compete for attention on small screens.