Error Roadmap
Empowering users with error notifications and clear guidance for issue resolution.
Project Overview
Technical errors are an inherent part of working with technology. They can manifest in various forms, such as sudden shutdowns, data loss, system freezes, connectivity problems, and more. While some errors are super-resolvable, others may require contacting support. The objective of this feature was to proactively notify our users when an error occurs, and provide them with clear guidance on resolving the issue they encounter. This empowers our users to take effective actions in response to errors, improving the overall experience.
How Might We effectively notify and inform our users when an error occurs on the platform?
My Role: UX Designer
Team: Product Owner, Developers, UX Designers
Client: Centene Corp.
Tools: Figma, FigJam
Project Duration: 5 Weeks
Approach
After meeting with my product manager to gain insights into the requirements and the necessity of the feature, I proceeded to:
-
Created diverse wireframe solutions to address the problem.
-
Collaborated with developers to gain insights into any potential technical challenges.
-
Conducted peer reviews to identify and address errors, ensure platform consistency, and enhance structure, flow, and readability.
-
Ensure alignment with design system guidelines for component consistency.
-
Facilitated design handoff to team members, including developers and the product owner.
Proto-Persona
Tom Berman
Occupation: Care Manager
Age: 40
Location: Atlanta, GA
"I would like more information about the error messages and if I can troubleshoot and resolve them myself."
About:
Tom is a Care Manager who relies on the TrueCare Cloud platform to conduct assessments for members enrolled in different healthcare programs like Medicare and Medicaid. He is dedicated to providing quality care to his members and ensuring their needs are met through accurate assessments. However, Tom often encounters technical errors while using the platform, which can disrupt his workflow and affect his ability to deliver timely care.
Goals:
-
Efficiently complete health assessments for Medicare and Medicaid members.
-
Minimize disruptions caused by technical errors on the TrueCare Cloud platform.
-
Receive clear guidance on resolving technical issues to maintain productivity and provide uninterrupted care to members.
Challenges:
-
Dealing with various types of technical errors, such as sudden shutdowns and connectivity problems.
-
Lack of proactive notification when errors occur, leading to delays in resolving issues.
-
Difficulty in finding clear guidance on how to troubleshoot and resolve technical errors independently.
Wireframes and Sketches
My initial step involved conducting rapid research to understand how other companies effectively communicate errors to their users. Additionally, I consulted our design system guidelines to ensure compliance with established parameters. I explored two design alternatives for addressing this challenge:
Option A: I've implemented a disruptive dialogue box that prompts the user's attention, ensuring they address the issue before proceeding. Additionally, I've incorporated detailed error information and guidance, empowering users like Tom with the necessary resources to resolve the issue efficiently.
Sketch:
Wireframe:
Option B: I implement a banner that promptly notifies Tom of the error and offers additional guidance on its resolution when clicking on learn more.
Sketch:
Wireframe:
Error message banner with the learn more dialogue box.
Final Designs
I have determined that the most efficient design solution for assisting Tom involves implementing a banner with multiple functionalities:
-
Informing Tom of the errors and offering guidance for resolution.
-
Featuring a button for quick access to actions like "retry/refresh/etc" based on the recommended solution.
-
Enabling Tom to access additional information about the error through the "Learn More" link.
-
Effectively communicating actions to avoid and the potential consequences.
-
Incorporating a status indicator on the landing page to inform Tom about the assessments' sync status, differentiating between "not successfully synced" and "successfully synced" assessments.
The designed banners fulfill specific roles in conveying messages across different scenarios, such as error, warning, informational, and success notifications. The error and warning banners remain open until Tom resolves the issue, while the informational banner can be dismissed. For successful actions, Tom can choose to manually dismiss the banner or let it disappear automatically after a successful sync. Clicking on "learn more" triggers a dialogue box offering additional information and guidance to address the error message.
Error message banner:
Warning message banner:
Informational message banner:
Success message banner:
Learn more dialogue box:
Error banner:
When an error occurs, a banner will appear to inform Tom of the error and provide potential solutions. There will be a notification (tag) on the landing page to inform Tom what assessment was "not synced"
Learn more dialogue:
When Tom clicks the "Learn More" link, a dialogue box will appear, offering detailed information and additional guidance on resolving the issue.
Successfully synced banner:
When the problem is resolved, a "successful" banner will appear along with a "successfully synced" status indicator on the landing page to inform Tom that the assessment(s) have been successfully synced. The banner will automatically disappear or can be dismissed by clicking the "dismiss" button.
Reflection
Working on this feature was a significant and rewarding experience for me. As a designer, and anyone who uses a computer, we understand the value of receiving clear notifications to resolve issues efficiently. It's a real-time-saver, allowing users to fix problems independently without seeking external help.
​
I relished the opportunity to schedule meetings and lead workshops with stakeholders, developers, designers, and product managers. This collaborative environment allowed me to explore various error resolution methods and root causes, enhancing my technical knowledge. Effective communication played a vital role throughout the project, ensuring our users would comprehend the language I used.
​
This project has been instrumental in strengthening my leadership, collaboration, and communication skills. My next steps for this feature include:
-
Crafting user-friendly language for addressing different errors users might encounter.
-
Conducting usability tests to gather valuable insights.
-
Sharing the findings with the team for collective growth.
-
Incorporating feedback into the design for continual improvement.