PAPER AND PIE
Paper & Pie is a cozy local café, but its existing dine-in ordering website had a confusing flow and cluttered layout, which often led to delays and drop-offs. My goal was to redesign the platform for a smoother, faster ordering experience while reflecting the café’s warm and welcoming brand.
The Challenge
The existing Paper & Pie dine-in ordering website had a confusing user flow, making it difficult for customers to browse the menu, customize items, and place orders quickly. The lack of hierarchy and cluttered interface not only slowed down the ordering process but also failed to reflect the café’s cozy and welcoming brand experience.
Goal(s)
To redesign Paper & Pie’s dine-in ordering website with a simplified user flow, clear menu hierarchy, and a warm brand-driven interface that makes ordering faster, more intuitive, and aligned with the café’s identity.
Client
Design Exercise
Year
2025
Duration
1 week
Platform
Mobile
Role
UI/UX illustrations
Tools
Figma
Illustrator
Target Users
Local café visitors – People who live or work nearby and frequently visit the café for meals, coffee, or desserts.
Young professionals & students – Users who prefer quick, contactless ordering to save time during lunch breaks or study sessions.
Tech-savvy diners – Customers comfortable using apps or websites to browse menus, customize orders, and pay digitally.
Groups & families – Users who come in small groups and want to place orders efficiently without waiting in line.
Repeat customers & loyalty seekers – Patrons who value convenience and may want features like Recommended section, Repeat your order, etc.
Assumptions
NEEDS
Quick & convenient ordering – Users want to place orders without waiting in long queues.
Easy menu navigation – Clear categories, images, and descriptions for each item.
Real-time order updates – Knowing when the order is ready or if there are delays.
FRUSTRATIONS
Slow or confusing ordering process – Users get frustrated with multiple steps or unclear navigation.
Limited menu visibility – Small images, missing descriptions, or hard-to-find options.
Research
Why?
Validate Assumptions
Find Needs
Discover Problems
5
Interviews Conducted
User Insights
Navigation Confusion: Users feel lost on the ordering website ("everything is everywhere"), which indicates lack of orientation cues.
Visual Limitations: Small food images make it hard for users to know what they’re ordering, suggesting a need for larger, clearer visuals.
Time to Order: Users find it takes too long to locate what they want, showing inefficiencies in search, categorization, or filtering.
Surprising Observations
Phone Number Issue: A critical but unexpected frustration is that users can’t easily correct mistakes (like editing their phone number) without restarting — a surprising usability gap.
Overlap in Pain Points: While different users voiced different frustrations, many point back to one root issue: poor UX design (navigation, visuals, and efficiency are all connected).
User Persona
The primary persona is a tenant or roommate who shares accommodation and struggles with managing rent, utilities, and chores.
Ideate & Sketching
In this phase, I explored multiple directions through quick sketches and rough layouts. The goal was to translate ideas from research into tangible concepts, visualize user flows, and iterate rapidly before moving into detailed wireframes.
Existing Design
Highlighting the problems in the existing design.
High Fidelity Prototype
A high-fidelity prototype of the website, which i redesigned based on all the research and the pain points discovered i the existing design.
PROTOTYPE