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:
No network connection
Printer error (follow-up from Printer Error Redesign project)
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.