Error Message Page (tiny project)
A page that hopefully will never be seen by customers but in case it does, it now has become shop-able to ease frustration.
My role:
Design strategy, Project scoping, UX & UI Design, Launch
Results:
Hoping no one will be redirected to this page
The teams I worked with:
Content design, Product management, Engineering iOS and Android
What happened?
Through a broken deep-link we learned that we had sent approximately 50.000 customers to a site that didn't exist. Leaving them confused and frustrated.
After multiple iterations of telling customers that something went wrong and they are not on the page they should be one, the design still didn't feel right. We all know how frustrating it is to land on a page we can't do much on.
Once this pain point was identified a new idea came to light. To ease the frustration of landing on an error page, let's make it shop-able!
Trying to find the right balance between letting customers know something went wrong and given the right amount of shop-able items was a little challenging.
At end we decided on a big label to help customers understand that the landing was not intentional and a carousel of products that is personalized to them. Depending on their previous browse, purchases or items that they have added to their wishlist.
Cutting into the product carousel a little below viewport was intentional to give enough room for the initial message in all languages and still ensuring the visibility of the product images.
I had a lot of fun on this project, sadly it is one that hopefully no customer will ever see.
Final error state
Default, when recommendations are not available
Challenges
I faced two main challenged in this project. The first challenge was the time crunch. This project went from identification to design and launch within 2 weeks. So I had to quickly figure out which of my projects could get temporarily de-prioritized.
The second challenge was to find the right balance between being informative but still fun to discover new items.
Product Goal
The main goal of the error screen is to inform the customer that something has gone wrong and the screen does not exist (e.g. because it was moved or deleted). To not send them to a dead end, we included a browsing section (recommendations) that is relevant to the customer. This content block can be adjusted by any team that needs to let users know that the screen does not exist (e.g. customer lands on a PDP for a product that was deleted).