Workflow
Redesign troubleshooting experience of Workflow, a business process automation product.
Background
Workflow is a widely popular product within the Zuora Suite that enables hundreds of customers to automate their business processes.
However, when a task fails, their IT teams or our Solution Architects (SAs) must step into the Workflow swimlane to diagnose and resolve the issue. The troubleshooting experience in the swimlane plays a critical role in ensuring business continuity and directly affects the efficiency of SA users.
My Role
Solo designer collaborating with a solution architect through participatory design
Timeline
July 2022
Result
Improved troubleshooting efficiency by reducing clicks
Team
1 Product Manager
1 Solution Architect
1 Frontend Engineer
Why is it important?
A better troubleshooting experience can improve solution architects' efficiency, thereby reducing disruptions to customers' businesses.
Understanding current experience
A solution architect helped me understand the troubleshooting experience. He walked me through his troubleshooting process step by step, allowing me to observe how he identified issues, pinpointed the root cause, and ultimately adjusted the configuration. Throughout the process, I took notes on areas where the experience could be improved.
Troubleshooting Process
Ideating
The ideation process involved daily meetings with the solution architect to review the design and gather feedback.
One of the most significant changes that emerged was shifting from a vertical split view to a horizontal one. We think the original layout displayed too much information at once, making it difficult for users to focus on the key details needed to diagnose the root cause. To address this, we plan to switch to a drawer-style layout, which will allow content to be displayed in a cleaner way.
Additionally, we aim to hide unnecessary information and functions (such as the liquid tester) until they are needed, helping users stay focused on the task at hand.
Solution
1
Surface API calls and display an error info banner to ensure critical diagnostic information is easily accessible
2
Give full vertical space to liquid tester
3
Provide one-click sync (Promote button) from instance to master task configurations
Iterating based on feedback
What Worked
The changes to the API calls and liquid tester are generally perceived positively.
What Needs Attention
The horizontal split layout makes it difficult to navigate the canvas.
The liquid tester lacks sufficient horizontal space.
Final Design
Reflection
What would I do differently?
Engage more users early on.
Prioritize interactive prototypes to ensure designs are tested in context—static mockups overlook real usage scenarios.
Hello, I'm Xinhui, a UX designer.
For the past 5 years, I’ve worked on consumer-facing mobile design at ByteDance and enterprise-facing web design at Zuora. Throughout my journey, I’ve been driven by a passion for bridging the gap and transforming complex systems into intuitive, user-centered experiences.
Please check out my portfolio on a desktop 🖥️