Challenge

Many restaurant websites prioritize visual polish over real usability, resulting in static pages that break down once interaction, accessibility, or mobile behavior is introduced. The challenge with Dragon Den was to design and build a responsive, interactive restaurant web app that behaves like a real product — supporting menus, cart interactions, modals, and mobile navigation — while remaining scalable for future extensions.

Goals

Treat the project as a product system, not a static site.
Build reusable, scalable UI components in React.
Design interactions that reflect real user behaviour.
Ensure accessibility and keyboard support from the start.
Create a responsive experience that works across devices.
Lay architectural groundwork for future mobile and operational tools.

Role

I led the project end to end as a designer–developer, owning product direction, UI and interaction design, component architecture, and frontend implementation.

DESIGN PROCESS

Design Process.png

01 Research & Empathize

This phase focused on understanding the problem space and setting the foundation for Dragon Den as a real product rather than a static marketing site. Early on, I defined the overall brand direction, tone, and target audience while also thinking through how the interface would need to behave once interactive features were introduced.

Instead of designing isolated pages, I approached the project with a component-based mindset from the start. This meant considering reuse, state, and future expansion even before interactions like menu selection, cart logic, or modals were implemented. These early decisions shaped both the design direction and the technical architecture that followed.

User Persona