404 Error Page

This is the PiggyBank's 404 error page. This page from a bank incorporates a broken piggy bank, consistent with the brand name, to communicate that something has gone wrong. The text clearly explains the situation without using “404”, as many users would not understand its meaning. Two options were provided to take user into action such as, such as going home or finding what they were looking for. The design uses simple typography and appropriate contrast, with a pink color palette inspired by the skin of a piglet.

Relevant illustration. I chose an illustration of a piggy bank and broke it down to communicate that something went wrong, making sure it remained consistent with the brand personality.

Guiding to action. CTAs on empty state pages are essential in guiding user interactions. To do that, I have included a ‘go home’ button, and this is the most prominent method that guides the user to action.

Help find what users were looking for. According to Nielsen Norman group guidelines I have included also a search box as a second action method so that users can find what they were looking for without having to get the exact URL right.

Typography. The typography hierarchy is very simple. For the title I used an Inter Extra Bold 80, for the headline an Inter Semi Bold 30, and for the body copy an Inter Regular 20. I used a single typeface 'Inter' and distinguished the titles from the body through boldface, creating a clear visual hierarchy.

Pink palette. As color I chose to use pink (lavender blush, tea rose and melon) this is because it reminds of the pig skin. I chose to use eerie black instead of solid black. Solid black is often associated with formality, seriousness, and sometimes even austerity. Conversly, a lighter shade of black can loosen this perception, adding an element of spontaneity or playfulness.