Project Overview
A local café needed a cohesive digital presence that felt true to its brand while being intuitive to navigate across devices. The project involved designing an end-to-end interactive prototype for both desktop and mobile. Covering everything from browsing the menu to making a reservation, alongside a reusable design system built in Figma. The goal was to ensure visual consistency, scalable components, and a user experience that felt warm and considered from the first click.
Cafe Case Study & Prototype
Phase 1
Design System & Information Architecture
Design System & Brand Identity
Building on the café’s existing motorcycle-inspired logo, already established across its social media and storefront signage, I developed a complementary design system to extend the brand across its digital experience. The system carries the existing identity into typography, color, buttons, and other interface elements, creating a cohesive visual language that connects the café’s physical presence with its online experience.
Existing Branding
Brand Fonts
Design System
Brand Color Palette
Brand Graphics
Information Architecture
User Flowchart
Information Architecture & User Flow
The information architecture and user flow map the structure of the shopping experience, showing how users navigate from the homepage to product discovery, product details, and checkout. The flow outlines two primary browsing paths: exploring featured products on the homepage or navigating through the menu. Users can select product cards to view additional details, make edits, and add items to their cart. The process concludes with the payment and checkout experience.
This structure helps establish a clear navigation hierarchy, simplify the shopping journey, and create an intuitive path from product discovery to purchase.
Phase 2
Visual Design
High-Fidelity Wireframes
Phase 3
Final Design Prototype
Juliana Piotrowski