Toast Online Ordering
Toast's Online Ordering is a white-label pickup and delivery experience that lets restaurants keep revenue without third-party fees. Customers were avoiding it because of dated UI, clunky modifiers, and poor mobile performance. As Toast moved from Angular to React, we rebuilt the guest experience around a cohesive design language.
A revenue product with an experience gap.
Online Ordering represents a significant revenue stream for restaurants, but the legacy product felt dated, was hard to customize, and was not optimized for mobile. Our team conducted interviews and quantitative research to define an MVP roadmap focused on four critical flows.
- Landing page blocked guests from browsing menus before choosing pickup or delivery
- Modifiers lacked hierarchy; required options were inconsistent
- Two-column modifier layout failed on mobile
- Cart access and item editing were unclear on small screens
- Checkout forms did not use the emerging React component library
- Menu-first landing with delivery method selection integrated into the page
- Mobile-first modifier patterns with clear required-item treatment
- Dedicated item photo area using existing menu photography
- Redesigned cart with easier item access and editing on mobile
- Guest checkout built on the new React component library with improved confirmation hierarchy
Modifier redesign
The updated modifier experience prioritized mobile layout, clearer required selectors, and item photography from Toast's existing database. Legacy two-column patterns were replaced with scannable single-column flows.
"I've been using Toast online ordering for a couple years and it's one of the best decisions I've ever made. Our customers love it, and we just had an epic lunch rush because of how easy it is for us and our customers."Mari Harries, Owner of River City Eatery
Four MVP focus areas
Restaurant page layout and exploration
The legacy landing page prevented guests from browsing menu items before selecting pickup or delivery. We explored concepts that immersed guests in the menu while keeping order method selection visible, including spotlight photography, cart placement, and menu hierarchy.
- ·Multiple desktop layout explorations before wireframes
- ·Information architecture aligned with frontend pattern audit
Item details: making modifiers the star
Modifier screens were the highest-friction moment in ordering. Quantitative data and interviews surfaced hierarchy, required-state, and mobile layout as the core problems.
- ·Lack of hierarchy and embedded expand/collapse modifiers
- ·No dedicated space for item photography
- ·Inconsistent required modifier treatment
Improving the cart
Cart work focused on how line items appeared, how guests edited modifiers after adding items, and how the cart surfaced on mobile throughout the flow.
Optimizing guest checkout
Checkout added input validation, standardized form controls from the React library, and a clearer confirmation page with pickup timing and location instructions.
Impact at launch
Restaurants responded to the cleaner design, faster mobile experience, and simpler checkout. The MVP gave Toast a foundation to iterate quickly, including gift card integration during the Covid-19 takeout surge.