Printer error re-design

I led the printer error redesign project across both terminal and handheld Point of Sale (POS) devices, contributing to $2M in savings for Toast.

Project details

Lead product designer

6 months

Design tasks

  • Design audit

  • User research

  • Information architecture

  • UI design

  • UX design

Project team

  • 1 Product Designer

  • 2 Product Managers

  • 2 Developers

  • 1 QA

  • 3 Subject Matter Experts

Tools

  • Miro

  • Figma

Background

The problem

Printers play a pivotal role in the restaurant operations. When a server places the customer’s food order, a ticket is printed in the kitchen. When a guest wants to pay their check and continue with their day, the receipt is printed and brought to them. You can imagine how frustrating it was for our restaurants when the printer wasn’t working as expected. However, what was more frustrating was the lack of information about the error or troubleshooting steps to resolve it. 

Printer issues accounted for 25% of hardware tickets and 6% of all customer support tickets. This means, customers had issues with their printers and did not know how to fix the problem, leading them to call into the customer service team. Each time the customer needs to call in, it takes time out of their extremely busy and hectic work environment when they could be focusing on their restaurant operations. Oftentimes, it was a simple troubleshooting step that fixed the problem. 

In order to help resolve this pain point, I wanted to completely redesign the printer errors to a) inform the user on what the issue was and b) give them the troubleshooting steps to resolve the issue and continue operations.

Our main goal was to give customers the tools they needed to be self-sufficient and reduce the need to call into our customer service team.

Defining the users

The users were anyone in the restaurant who interacted with the day-to-day operations. This included Front-of-House (FOH) and Back-of-House (BOH) staff members. FOH included servers, bartenders, hostesses, managers, and cashiers. BOH included chefs, line cooks, and kitchen managers. Each step of the restaurant operation depended on the printers working properly and received a printer error if it wasn’t working as expected. Additionally, it was important to work closely with the Toast customer service team to ensure they were aware of any changes to the process in case a customer called customer support and needed more support. 

Design process

Design audit

Before diving into any design work, it was important to understand where the current design was failing to support our customers needs. This led to a full design audit of the current design and understanding the scope of the existing error messages.

Original error message

My key takeaways from the current design:

  • The error message was not tailored to the user. It was technical and provided an abundance of information, causing the user to gloss over the message.

  • Users often thought all errors were the same.

  • The CTA’s (call-to-action) were not tailored to the error message. The same CTA’s always displayed, even if they were not relevant for that specific error. This led the user to continuously following the same steps regardless of the error, even if it wouldn’t necessarily help the situation

Information map-out

I worked closely with my PM’s and SME (Subject Matter Experts) throughout this process to ensure the information was accurate and streamlined. I conducted several workshops with the broader team to understand the landscape of the current error messages and we brainstormed ways on how to improve the process. 

The first step was consolidating all the errors into one place. I worked with a developer who was an expert in the printer errors to list all the errors and the corresponding troubleshooting steps.

Consolidated view of error messages

Zoomed-in view of the error messages

The next step was categorizing the errors on how easy they were to troubleshoot.

There were some errors that required technical and involved troubleshooting. For these errors, we actually wanted the user to call into customer support to have one of our agents walk them through the steps to prevent further issues. Therefore, it was critical for me to separate these out and provide a different experience. However, there were several errors that required simple and straightforward steps.

I used the following categories:

  • Easy to troubleshoot

  • Somewhat easy to troubleshoot, will require some steps but most can do it

  • Can try some troubleshooting, but might need to call Care (customer support) anyways

  • Difficult to troubleshoot, just call Care (customer support)

Error severity categories

UX changes

Once I understood which errors fell into each bucket, I worked on translating the troubleshooting into easy to follow steps for our users. Throughout this process, I was consistently working with the SME’s and developers to make sure the steps were accurate.

I updated the information architecture within the error message to facilitate readability and troubleshooting. This also included identifying which CTA’s would be applicable to each error message to better support the troubleshooting process.

The general pattern I established was:

  • Title Line: Quick summary of what the error is

  • Body Text: Immediate troubleshooting step related to the error

  • Relevant CTA’s

Example of UX changes

Handheld errors

Design implementation

A significant use case involved a user being on the wrong WiFi network. We developed a simple solution to switch them to the correct network, resolving their printer issue and allowing them to resume normal operations.

I crafted a clear, easy-to-understand message that quickly informed the user of the issue and reduced cognitive load by providing a button that, when clicked, automatically switched them to the correct network.

Wrong network error

UI changes

I updated the UI to match the rest of the error messages across the Toast experience for both handheld and terminal devices. Additionally, I created two different dialogs based on the two main types of troubleshooting - simple and complex.

For the complex troubleshooting, I included the troubleshooting steps but an additional option of scanning a QR code to see the steps on the Toast central troubleshooting site.

Terminal errors

Results

This entire process was more involved than everyone originally anticipated.

It required working with several different groups, sifting through a large amount of information, and multiple rounds of iteration. My biggest takeaway was: do not underestimate the impact of what a seemingly small change can bring. Additionally, what seems like quick and easy design work actually requires a thorough design process. I learned how to better estimate a design project as well as manage the scope and timeline.

This “small” project resulted in a significant reduction in support calls, which corresponded to $2M in savings for Toast.

However, this was never intended to be the final design. We continued testing and improving these designs after we received customer feedback. Check out this project to see where the printer errors are seen next.