Troubleshooting wizard

Co-designed a troubleshooting wizard to improve the user’s experience when they run into issues with their handheld devices.

Project details

Product designer

3 months + ongoing

Design tasks

  • User research

  • Interactive prototyping

  • Information architecture

  • UI design

  • UX design

Project team

  • 2 Product Designers

  • 2 Product Managers

  • 1 UX Researcher

Tools

  • Figma

Background

Every Toast restaurant, regardless of size or type of restaurant, shared one common need—devices to run their operations. When these devices inevitably encountered issues, our clients faced significant challenges in getting them back up and running, depending on the problem.

Before starting the design work, we needed to understand where exactly that pain point was and how they currently try to solve their issues. This way, we could design solutions that actually fit their needs. From this, we started an in-depth research phase to truly understand our customer’s thought process and steps when they run into issues with their devices.

Our hypothesis was that users would want to troubleshoot as soon as they can to fully fix the issue. Therefore, how can we make troubleshooting as easily accessible as possible?

User research

Introduction

I joined the project at the start of the research and customer feedback phase, working alongside another Product Designer and a UX Researcher to define the scope of the research. We aimed to test a diverse group of users, as restaurants had varying needs. For instance, large chains typically have IT specialists managing their technology, while locally-owned restaurants often rely on the owner to handle issues. Any solution we designed needed to accommodate the needs of all users, regardless of the size or structure of their business.

We tested with 3 users who are considered IT specialists and 3 users who are typical restaurant employees.

Testing scenarios

We tested the following scenarios using the share screen function on Zoom. We granted each participation permission to control our screen and had them click through the prototype while asking them specific questions related to each scenario.

1. Walk us through their steps in the current system:

2. Complete specific tasks within the new design prototype:

  • No network connection

  • Printer error

Research analysis

After completing the research analysis, I mapped out each screen and documented all the feedback, along with any ideas sparked during the sessions. This allowed me to plan the design changes and work closely with my PM to prioritize which tasks we would tackle first.

Click here to open the images below in a new window.

No network connection

Printer error

Device status

Design process

Design changes - printer error

The prioritization activity led us to focus on the printer error as the initial project to start with. Here are before and afters for several screens we tested with my design changes implemented.

Printer error

Feedback:

The screen size is a huge pain point for customers because there is competing priorities. They wanted us to reduce the size as much as possible or switch to a pop-up. I decided against a pop-up because if the user doesn’t take action from the printer error, the entire workflow is halted. Even if they’re not ready to troubleshoot, they need to at least pick an alternate printer that is online to print.

Changes:

  • Added in all screen elements to make sure spacing was realistic

  • Removed subline and reduced text to reduce cognitive load

  • Matched UI elements to existing patterns

Error menu

Feedback:

Users said some of the CTA’s weren’t ordered best to their actual process. Also, they felt the “Retry print” would just add additional failed print jobs in their printer queue.

Changes:

  • Reordered CTA’s to best support their workflow

  • Changed “Retry printing” to “Cancel print”

  • Changed heading text to explain the error

  • Matched UI elements to existing patterns

Send to alternate printer

Feedback:

Customers wanted to be able to see which printers were online to make sure the next print was successful. They still wanted to be able to see all printers, especially if there was a specific printer that was commonly used and it was offline. Also, it wasn’t specifically clear that those were printer selections.

Changes:

  • Added printer status to each printer and hid offline printers.

  • Changed UI from arrow to selection buttons and added “Print” button to confirm selection

  • Added space between each printer to better support tap targets

Printer queue

Feedback:

If a user saw many failed prints, they wanted to be able to easily clear everything out, take the printer offline, and start fresh. Additionally, when users looked at this screen, they only focused on the printer queue; they were unfamiliar with the other queues (Take out, Credit card).

Changes:

  • Added “Clear all” button to each printer

  • Removed other queues and made this a focused printer queue view

  • Updated text within each print job to improve readability

  • Moved status to top right hand corner and changed UI to improve readability

  • Added option to troubleshoot printer from here so the user doesn’t have to go back to main screen > re-enter printer menu > troubleshoot printer

  • Added option to “Printer test receipt” so the user can check if printer is online or if something else is going on

Design changes - network error

As a fast-follow, I redesigned the “no network connection” error to make it more efficient and streamline the process to reconnect to the network.

No network connection

Feedback:

The user had to take multiple steps to get to the resolution. It also required the user to analyze their situation before they could take the step to resolve the issue.

Changes:

  • Removed additional steps. If we already identified the error, immediately take them to the troubleshooting step that will resolve the error.

  • Updated the CTA copy in the initial error message to 'Fix it,' making it clear that clicking the button will reconnect them to the internet and resolve the issue.

Final design prototypes

Send to alternate printer

See print jobs + troubleshoot printer

Manual troubleshooting

No network connection

Wrap-up

I thoroughly enjoyed working on this project. Although I didn’t get to see the final product, it was an incredible learning experience. Conducting hands-on user feedback sessions with our customers and implementing their feedback in real-time was both challenging and rewarding. The team collaborated effectively, and together we made meaningful improvements for our customers.