Popmenu
Redesigning the Online Ordering Experience
Project: Complete redesign of the current food ordering experience for our restaurant clients that offer online ordering to their guests
Role: Sole Designer
Impact: ~12k+ restaurants
Why redesign? (Problem)
Previously designed and built 6+ years ago
Opportunity to improve the ordering experience for guests and increase direct online orders for clients
Research + User Journey
System Mapping
We first mapped out the product areas to help scope the project and identify other product areas the project would affect.
Research
We conducted over 40 interviews with restaurant staff and guests and mapped the resulting feedback into themes along the user journey.
Solution
Old ordering
We found that old ordering flow had three main issues:
Confusing menu. The view only menu and the online ordering menu had very similar UI. Users often get confused trying to add items to their online order.
Inconsistent, inaccessible design. The ordering flow lived inside each restaurant's website, and so uses custom colors, fonts, and styles. This made accessibility unpredictable for many clients
Performance issues. Old, outdated code and being embedded in the main client website made for slow, poor experience for users solely wanting to place their online order
Take ordering out of the restaurant's website
The three problems had one root cause: ordering lived inside each restaurant's custom site. I proposed pulling ordering out into its own standardized flow.
What restaurants kept: their logo and name
What they gave up: large header photo, custom fonts, colors and layouts inside the ordering flow
Why this was hard. Clients use Popmenu for custom branding and elevated website experiences. While we had some push back from the sales team, I made the case with research and a prototype showing how the new design fixes many of the recurring client feedback and how new experience can help increase the restaurant base line — their ordering revenue.
Key design decisions
1. Differentiate "browsing" and "ordering" experience
The old menus were near-identical, so guests get stuck trying to order from the wrong one. The redesign focused on a simple, minimal-step UI, with clear visual separation between the main client website and the online ordering page.
I pulled the ordering experience out of each restaurant's custom-branded website and standardize it into its own clean, consistent flow — decoupling it from the visual noise (and accessibility risk) of embedded site styling. This gave every restaurant the same clean, accessible ordering experience, instead of being dependent on custom site styling.
2. Accessible by default
Because restaurants no longer styled checkout, I could design one system that met accessibility everywhere: contrast-checked colors, readable type sizes, large tap targets, keyboard and screen-reader support.
Result
Rolled out to 12,000+ restaurants, driving a ~25% increase in orders.
New, optimized ordering experience
