Error Handling in the CAO Design System
Designed user flow for managing invalid inputs in the Returns 2.0 system and other CAO products, standardizing error/warning messages and providing developers with clear error-handling guidelines.
Skills: Figma, UI Design, Design System, Angular design
September 2023 - Present
Overview
I designed a user flow for managing invalid inputs in the Returns 2.0 system, part of the CAO’s suite of products. The project standardized error and warning messages, aiming to reduce user confusion around data input and provide consistent guidelines for developers handling validation across all CAO products.
Problem Statement
The current Condo Returns system has a single-page layout that validates the data after submitting the form, discovering mistakes or incorrect fields too late. This causes frustration over potentially overwhelming number of errors and correcting multiple fields at once. The goal was to implement a system that provided immediate feedback to alleviate this frustration.
Impact
🚀 Reduced development time by 5% by creating clear guidelines and reducing inconsistencies in interactions
⭐️ 92% acceptance score during usability testing, validating the effectiveness of the new error system
🧱 Created a standardized error-handling method with micro-interactions for system status and feedback
Errors & Data Validation in Popular Applications
-
✨ Chosen Approach: Field & Page Level Error (H&R Block)
When a user inputs invalid data, the system displays a banner summarizing the issues and highlights the affected fields. This approach meets the CAO's preference for detailed descriptions while clearly indicating where the errors are.
-
Field Level Error (Click Out) Facebook
Displays an error when users exit a required field without entering data, prompting them to fix the issue immediately.
-
Page Level Error (H&R Block)
A banner error appears when the user clicks "Continue," summarizing the issues across multiple fields. This works well for smaller forms but may be overwhelming for larger ones.
-
Pop Up Error (Gmail)
If a user clicks “send” without inputting a recipient, a pop-up error stops the user flow and prompts them to correct the mistake.
Error Handling in the current Condo Returns system
Returns 2.0 Error User Flow
-
1. Side Navigation & Grouped Data
Minimize the number of inputs on a single page and allows for more immediate validations, reducing cognitive load
-
2. User exits a field without inputting data
A field-level error appears immediately, explaining the problem and how to fix it (e.g., missing data)
-
3. User clicks continue
Business-level logic validations are triggered and if any issues are still present, a banner error at the top of the page summarizes the problems. Field-level errors offer more specific details.
The Rules
1. Click out field
Field-level errors will appear immediately after the user exits a field, validating data completion and type.
2. Click Continue
A generic banner error will display upon clicking "Continue," informing the user there are issues with form completion and business-level logic.
Specific errors will be highlighted within the affected fields, with clear explanations of what needs to be corrected.
Challenges…
Difficulty with migrating the validation design from the existing system which required the devs to stack errors as an initial launch plan
Writing concise, understandable error messages that gave the requisite legislative context
Simplifying business-level logic to ensure that complex validation rules were simple and user friendly on the front—end
Results
During moderated usability testing, 14 out of 15 users felt confident in understanding the error messages and appreciated the immediate feedback. This approach resulted in reduced user frustration and improved form completion accuracy.
Following the April 2025 launch, full implementation of the error-handling system will be prioritized to ensure continued improvements while maintaining high development velocity.