Error States
Error states are more than just “something went wrong” messages; they are moments of truth for the user experience. Done well, they reduce frustration, build trust, and guide users confidently to the next step. In recent work, I've designed error states that are clear, empathetic, and actionable, turning friction into an opportunity to communicate with care.
- Year
- 2025
Stack
- Figma
Clear and Meaningful Visuals
Visuals help users to understand what’s happening at a glance. I defined guidelines that included contextually relevant illustrations or icons that directly reflect the scenario. For example, a failed address verification is paired with a house illustration rather than a generic warning triangle. Illustrated-style icons maintain a friendly, human touch while reinforcing the message.
Speaking Sense
As part of this project, I avoided headings like “Something went wrong” because they provide no guidance. Instead, headings are specific, empathetic, and immediately informative, e.g., “We couldn’t verify your details.” Semibold typography is used to help the heading stand out without being alarming.
Providing Empathetical Guidance
The body of an error state explains what the user can do next in a supportive, actionable way: “Please check your details and try again, or contact support if the issue persists.” Technical codes and internal system details are hidden from users and reserved for logs. The focus is always on empowering users rather than blaming the system.