Toast Online Ordering

My second time around at Toast, I got to redesign Toast Online Ordering once again. The original design I had delivered over a year ago had been implemented and we got a lot of feedback from our customers. The goal of this second redesign was to incorporate this feedback, and provide additional UI allowance for features we added to the roadmap.

The biggest request by customers was for additional branding opportunities. This meant more space for the restaurant's pictures and more prominent logos. I was also filled in on the engineering limitations we had. It was up to me to deliver a design which eliminated the engineering problems, and allowed for enhanced branding. All of the screens you see here are screenshots of the actual functioning HTML pages I delivered - not photoshop renderings.

Customizability

The allowance for branding was tricky; customers could upload any picture they wanted, they may not upload a picture, the picture may be blurry, etc. I had to figure out a way to allow customers to upload anything they wanted, yet the design had to be pleasant even in the worst cases.

User Accounts

One of the main features we needed the design to allow for was saved user accounts. The UI had to be lightweight to implement quickly and consistent with the rest of the online ordering site redesign.

Nightly Summary Email

The nightly email is a summary of how a restaurant did that day, which is sent to all the restaurant's managers every night. When customers requested more info on the nightly email, the new rows were simply tacked on to the end of the email or new columns were made. This practice, of course, did not scale and it had reached the point were the email was massive and cumbersome to read.

I took up the task of redesigning the nightly email. We were on a time crunch - the sprint ended in a week. I had to learn how the email was constructed, rework the HTML and styling, make it compatible across email clients and browsers, and then work with an engineer to push it into staging.

 
 
Toast Toast Grill & Tap - MA 
 
 
 
 

View Full Report

Wednesday, January 6

Across All Locations

$18,754.76 $13,580.70
Total (Gross) Sales Total Net Sales

8.7%

65.3%

Total Discount (% of Gross)

Total Labor (% of Net)

Breakdown By Location

Location Total (Gross) Sales Total Net Sales Discount (% of Gross) Labor (% of Net)
The Black Sheep $ 2385.76 $ 1574.09 9.8% 59.9%
The Cheesecake Diner $ 8785.98 $ 6393.85 13.0% 71.5%
Park Drive Bistro $ 7583.02 $ 5612.76 7.8% 64.1%
Location # of Guests Avg Sales/Guest # of Orders Avg Sales/Order Qty Void Items
The Black Sheep 95 $ 25.11 275 $ 8.37 1
The Cheesecake Diner 351 $ 25.03 622 $ 7.41 17
Park Drive Bistro 422 $ 17.97 539 $ 11.53 8

Closeout Summary

Location Credit Card Payments Auto-captured Payments Remaining Open orders Auto-clocked Out Users
The Black Sheep 72 15 0 2
The Cheesecake Diner 302 34 12 19
Park Drive Bistro 206 21 7 14

Manager's Log

Guest Notes - Toast Admin, 2:36 PM

Something about Check #2. This is some text about this comment.

Weather - Toast Admin, 2:21 PM

Rained all day

Excessive Comps/Voids - Toast Admin, 2:19 PM

Walter Waiter comped way too much stuff


You are receiving this email because you are on the 'managers' email list for Toast Grill & Tap - MA. The recipients of this email can be changed by selecting 'Contact Settings' on your Toast home page.
 
 

This was one of my favorite projects because of all the limitations I faced; this email had to be constructed using simple HTML tables, inline styling, no javascript, no external stylesheets, and there were compatibility issues to fix and a shortage of time.

Despite the challenges, I wanted to make it look gorgeous. The most important pieces of information were moved to the top and were the most important in the hierarchy. The tables were grouped by related data points, and I shifted the whole email aesthetic towards a style more consistent with the rest of the platform.

Toast Training Wizard

One day, a product manager approached me and asked if I could redo some of the Toast Inventory product documentation, because customers were getting confused trying to set it up. I began by reviewing the product and its functions, and then went through some of the current documentation it had, which was hosted on Hubspot.

The guide was enormous and daunting at first glance. This dissuaded customers from trying to learn the product and getting in the habit of using it. I felt it was a strategic product decision to spend a good part of two weeks on completely reimagining this documentation; I wanted to make it interactive and easy to digest. The returns would be justified because it seemed the documentation was what customers got hung up on, and fixing it should help this product gain momentum.

Follow Along Side-by-Side

One of the biggest features I was able to build into it was an iframe which loaded the Toast Managers' login. This could be opened by clicking the arrow on the right, and the manager could sign in and follow along right there, without switching tabs or windows. You can see a documentation page here.

Iterating a Sidebar

Below are all the iterations of the left sidebar used to select a step. Looking at these side by side reveals how the design evolved with feedback from the team as I played around with the contrast of elements, increased and decreased padding, and played with the font weights to make sure it was just right.