How can we turn an error page into a help? A first approach to solving the problem with the user in mind.
In this case, we start from an almost non-existent error page. We have just done an action in our customer area without success and the feedback is zero, there is no error message or minimum information to tell the user where it is.
Empathize with the user
After performing the action and without apparent feedback the user is frustrated, this time he needs some bills urgently which can cause serious problems and it seems that they are not going to put anything easy.
In this case we have two serious mistakes:
1. The error message indicating that the action was not successful is missing.
2.The lower cards have false affordance, as they cannot be interacted with in any way, and by their design it seems that they could be consulted through a click.
Without entering into the aesthetics, we have a lot of room for improvement to make the action easier and more usable.
Redefining the flow
Our first step will be to give the user a new flow, providing the necessary feedback after the error and providing solutions to prevent them from leaving the page or getting frustrated in the process.
As we can see with this new user flow we can solve the problem thanks to the help section we have provided and prevent from leaving the process.
Based on the flow we have designed for the user we propose a new way to represent this error page, we correct several false affordances and offer the user a solution to the problem.
With small gestures like this we bring the user closer to an improved user experience that will alleviate their frustrations and allow them to perform the task for which they had accessed the web.
Thanks for reading and feel free to leave a few claps 😉