Toast Online Ordering

Launching a unique MVP to improve the ordering experience for restaurants.


UX/UI design

Methods and tools






Toast’s Online Ordering is a robust out of the box white label experience which gives guests the ability to easily order directly from restaurants for pickup or contactless delivery. This allows restaurants to fulfill orders without third party fees. Although this product represents a significant portion of revenue for restaurants, customers were reluctant to utilize it based on its lackluster design, challenging UI and limited custom branding. In addition, it was built on an Angular platform. Since we were moving to a React based framework, we had a great opportunity to create a cohesive user interface, improve loading speeds and optimize it for mobile usage.

Discovery and research

Our team began by conducting interviews and compiling quantitative research from our users to find the primary areas of concern for the existing product. We put together a roadmap of the MVP release based on those findings. The design sprints focused on improvements in four key areas of the product:

In order to streamline development, I worked with our front end developers to audit existing patterns to prepare us for the updated design language and conversion to React based components. I also collaborated with our lead product designer on wireframes and information architecture before moving to high fidelity visual design.

The design process

1. Restaurant page layout and exploration

The legacy version of Online Ordering included a landing page which we found was preventing users the ability to quickly browse menu items before selecting their method of delivery or pickup. So we went to work on a newly thought out landing page which included the ability to select method of ordering while immersing the guest in the restaurant menu. I explored several different concepts to utilize elements of the page, including spotlight photo, cart placement and menu item location.

OO Wires

The design process

2. Item details - Making modifiers the star

When a guest clicks on a menu item they are given a screen with several modifier options, depending on the item. Based on quantitative data and user interviews we identified the main problems with the legacy version were:

The resulting design put a greater focus on mobile first and more clear selectors for modifiers. We also included an area to include a photo utilizing item images in our existing database and increased visibility of the item header.

Legacy modifiers

In this legacy screenshot the two column approach was not optimized for mobile usage. Users also struggled with expand and collapse items to see embedded modifier options.

Redesigned modifiers

The updated design was optimized for mobile and required items utilized clear visual motion interaction.

The design process

3. Improving the Cart

Those items that needed to be addressed in the cart include how items appeared in the list, how to access and modify those items and how to access the cart on mobile.

The design process

4. Optimizing guest checkout experience

In addition to adding some input validation features we made sure all of our form inputs came from our newly designed React component library. We also improved the hierarchy of the order confirmation page with clear instructions on when order was to be completed and where it could be picked up.


“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

The result

10% overall increase in GMV

Our users were pleased with the improved usability, easier checkout process and clean design refresh upon release of the MVP and we saw a significant increase in mobile usage for online orders. We have continued to iterate on the new design with updated features like gift card integration. This was especially critical in the wake of Covid-19 and allowed us to pivot quickly to meet the demand for takeout and delivery.

Up next...

Toast Design System

Creating a cohesive, scalable and iterative visual experience across a complex product