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.
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.
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.
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.