Xenial
7 months | 2022 | Team of 1 UX Designer, 1 Product Manager, 1 Project Manager, 1 Information Architect and 1 Visual Designer
The data was there, they just couldn't see it
Xenial’s back-of-house solution lets enterprise restaurants manage reporting, inventory, and labor costs.
The manager portal collects data from the restaurant POS terminals. Support agents can access some terminal data remotely, but needed better visibility to improve troubleshooting.
Disclosing errors to improve customer support
I collaborated with my UX team to disclose error data that is already being collected, but is not visible to support agents. We had previous research to guide our solution, we conducted additional research to validate our idea, and refine the solution.
Showing more error details up front makes the system more cohesive, provides a better user experience, and eases frustrations caused by software malfunction.
Goals
Users: Xenial support specialists want to be able to troubleshoot POS issues remotely without relying on a store cashier to explain problems to them over the phone.
Business: Xenial wants to improve the customer experience by reducing support call frequency and duration.
Design: We want support team users to see problems and quickly solve them before customers know anything is wrong.
A mix-up at the start, but we got it together in the end
I was assigned this project by my manager and conducted a sketching exercise with my team. One snafu - this project had been started by a designer turned researcher a year previously, but had been paused. We didn't know that until they disclosed it after the workshop. Shoot. So, we resurrected their sketch and conducted a moderated card-sorting exercise with 3 support personnel and 2 managers which
Gave us insight into information hierarchy
Helped us come up with a scalable taxonomy
A few new design system assets and we were in business
The app uses accordions for progressive disclosure. I used design system patterns to group information using headers to show levels of importance. For statuses, we used recognizable labeled icons for quick scanning.
How it works
Errors at a glance
The Site table lists all of a customer’s store locations. Since offline terminals are a common complaint, we added a column to show the number of terminals at a store and their current status, which refreshes every 60 seconds.
Big icons paired with traffic light red, yellow, and green text allow the user to scan to see where problems are quickly.
Progressive disclosure and UX copy
Not every error is an emergency, but the support specialist needs to move fast for those that are.
To help developers decide which are critical and which are less severe, I showed examples of each in the mockups and wrote UX copy that explains to the user how to fix the problem.
Final thoughts
Users feel confident that the new designs will help them to troubleshoot customer POS issues quickly and improve their support metrics.
“This is such a vast improvement over what we currently have. Nice work!”
— Keiley, Xenial Tech Support