Buddy House

Project Positioning

A warm restaurant experience built for mobile decisions

Buddy House is a restaurant website concept that connects brand identity with practical booking behavior. The design balances a homey visual tone with a clear path to menu browsing and reservation.

Role & Scope

Owned brand UI, mobile UX, and component rules

I defined the brand mood, built the color and component system in Figma, redesigned the reservation flow, and prepared interface patterns that can be translated into Vue and Tailwind components.

Problem Context

Restaurant websites often lose users during mobile booking

Many restaurant sites prioritize atmosphere but bury booking actions, require too many page jumps, or present menus that are difficult to read on small screens.

Design Goal

Keep the brand warm while making booking faster

The design goal was to preserve a friendly dining mood while reducing friction in the mobile flow through clearer hierarchy, touch targets, and fewer decision points.

Flow Insight

Mobile booking fails when the path asks too much

Competitive review and flow analysis showed that restaurant sites often split menu reading, date selection, and confirmation across too many steps. I used wireframes to reduce decisions before applying the warmer visual system.

Challenge & Trade-off

Make the brand feel soft without weakening usability

The trade-off was balancing a homey restaurant tone with clear mobile actions. I used Material 3 color roles, WCAG-aware contrast, and thumb-zone placement so the visual identity stayed warm while booking remained fast.

Key Decisions

Design around the booking task, not only the homepage look

• Placed reservation actions within thumb-friendly zones to reduce reach cost on mobile.
• Used Material 3 color roles to keep the palette warm while maintaining WCAG AA contrast.
• Reduced the booking path into a small number of clear steps with visible progress.