This post is originally posted on Linkedin.

This is the advantage of having a designer handle error messages in detail. I’m working on my own product beadyapp.com

Too often, designers don’t have the time (or access) to check every small interaction, including the error messages in a login flow. Some technical issues are also uncommon and can’t always be anticipated or represented in design states when creating it on Figma.

For example, I encountered this “Invalid login credentials” message triggered by Supabase (used as the authentication tool). Since this message came from the backend and not from the designed front-end UI, I might have missed accounting for it initially when building this with a vibe coding tool as a designer.

After testing and trial-and-error (I’m not a developer myself), I realized the message could confuse users especially non-technical ones. So I added a contextual explanation below the error message to reduce confusion and provide a clear next step.

I truly hope that every developer or anyone who handled the product, when encountering errors or unexpected bugs like this, collaborates with designers (or UX writers!) to refine every error state when finding a new one. Because not all error states are predictable, and not all users are tech-savvy. 🤷‍♀️

I still often find unclear error messages sometimes, the system doesn’t even show them as errors, even in big, well-known products.