Cafe at 407
Kiosk design turning cafe chaos into a smooth, speedy experience
Performed a UX evaluation of Café at 407’s ordering workflow and designed a kiosk-based solution that streamlined the ordering process and minimized friction points for customers.
Role
UX / Product Designer
Software
Figma, Adobe Illustrator
Timeline
3 months (Solo project)
The problem
Café at 407's single register created chaos during peak hours
Long lines made customers uncomfortable, the queue backed into the seating area, and staff couldn't keep up with demand.
Long Queues
15+ customers waiting in line to order during the busy hours.
Space Constraints
Limited space caused crowding and discomfort for seated diners.
Staff Bottleneck
One cashier handling orders, payment, and customer questions.
Heuristic Evaluation
Starting with what already exists
I began by evaluating an existing kiosk experience (Panera Bread) using Nielsen’s heuristics. These insights shaped the kiosk’s structure before I touched layout.
Research
Understanding the customer experience
I observed customer behavior during both peak and off-peak hours to understand the crowd patterns, service speed, customers during different times of the day.
Finding #1:
Most orders were simple grab-and-go items that didn't require staff interaction.
Finding #2:
Customers seemed comfortable with technology (the existing iPad POS system used for checkout).
Finding #3:
The reasoning
Why implement a kiosk?
Fast to use
Uses familiar patterns from devices people use daily, eliminating the learning curve.
No staffing increase
Small tech investment, then the self-service model eliminates additional staffing needs.
Client comfort
Minimizes any stress or discomfort some customers might experience while ordering food.
Café at 407 is known as "A Café with a Cause" because they donate all proceeds to Ophelia’s Place, an organization supporting and facilitating healing for those with eating disorders.
Sadly, the business closed at the start of 2024.
Mapping the Experience
Before designing screens, I mapped out the entire journey
The menu browsing, customization, cart review, and checkout - Establishing the backbone of the project and ensuring every screen had a clear purpose.
Beyond the screen…
The kiosk must be considered within its physical context. Its placement directly influences spatial layout, traffic flow, and the overall in-store experience.
Prototyping
Designed before Figma components and variables existed
To create a realistic experience and make the flow come to life, the kiosk was prototyped frame-by-frame. At the time, this was the only way to simulate a complete system.
What this gave me
deep control over each state
forced clarity in decision-making
strong understanding of interaction sequencing
What it limited
rapid iteration
scalable updates
real-time usability testing
reflection
Feedback, without formal testing
Throughout the project, I gathered ongoing peer feedback via walkthroughs, critiques, and iteration based on observed confusion.
This helped refine flow clarity, but it also surfaced a major gap.
Feedback is valuable.
Observing real users reveals what feedback alone can’t.
The missing piece (and why it matters)
Because of tooling constraints and the frame-by-frame build, this project did not include structured usability testing with real users completing tasks.
That absence became one of the most important lessons of the project.