“Um, that looks scary!” — Designing a user friendly error message (2020)
Designed using Adobe XD
Context and the problem
As we find on the web, there are many things that have a “default” design. Most of them are not user friendly, and don’t provide helpful information.
The problem we faced
- After a church service we often have users who bookmark the page and comeback week after week,
- If they don’t refresh each week when they return to play the Sunday Church service, they would get an error message.
- The error message didn’t say much — plus it was scary, stark, and confusing.
- Users would then write in to our Customer Contact Center and ask for help because they thought something broke on their computer or on our website.
My goal was to implement something that was less scary, helped users know what to do, and would reduce confusion.
- In my mock ups I designed an error message that wasn’t dark or scary (Tool used: Adobe XD)
- Our team came up with copy that provided users with information to help them problem solve or give them next steps.
- The error message also documented the error code, but in a smaller fashion. That way if a user received the message and emailed us we could find out what the problem was.
- We used to get messages 3-5 times a week.
- After the redesign messages dropped by nearly 90%.
- Now we only see 2-4 messages a year regarding these types of error messages.