The 411 on the 404

Disrupting the 404 page

October 9, 2021

 / 

Design Challenge

The 411 on the 404

Redesigning the page no one wants to see.

"Design Hint...Design a 404 page. Does it suit the brand's style? Is it user-friendly? It might sound mundane, but not evertyhing can be flash or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that's useful and asthetically pleasing.(It's up to you!)" -- Daily UI Challenge

Design focus: Modern greenery, with a visual focus on the message

In this challenge, I designed a 404 page for a houseplant e-commerce brand. Originally, I kept the design quite simple, with the focus being on the error copy, as well as the 404 imagery. Later, I began to think the design seemed a little bare and could use something to elevate it for a user. I thought about the actions a person would take when they see a 404 screen. Speaking from personal experience, I usually click the back button on the browser, use the search feature, click to go to the homepage, or exit the webpage completely. I decided to implement a call-to-action button that would take the user directly to the homepage of the website. This guides the user to a safe and logical place to restart their search or to browse other options or actions found on the website.

Left: Version 1; Right: Version 2

After some time, I thought the UI could use even more refinement and personality to complement the brand identity even more. In the previous versions of the 404 page, I included numbers comprised of greenery. I decided to add even more plants within the design as a nod to the brand's core products.

Additionally, I began to think about natural environments and the many soft, rounded shapes found within nature. Looking at the rectangular buttons with 90 degree corners began to feel like a poor choice for the product and the brand's visual design. I rounded the buttons and the text input fields on the page. I also incorporated the colors of the plants in the background into the colors used in the buttons.

Left: Version 3; Right: A variation of Version 3, but with an on-brand background color