Industry Dive's new and improved error pages

Updating error pages to be clear, functional and delightful

Design

| Posted March 2, 2020

Error pages help users understand why they can’t achieve their goal. Providing a clear, thoughtful error message can ease their resulting frustration.

For this project, I addressed Industry Dive’s 404 and 5XX error pages. The 404 error page appears when the user tries to navigate to a page that was moved or never existed.

The 5XX error pages (501, 502, 503…) contain the server errors and mean something is broken or temporarily down. For the development team, the 5XX error pages help them figure out what is wrong and fix the problem faster.

Working with illustrator Yujin Kim and developer Colin Burr, I updated Industry Dive’s error page designs to be functional and clear, as well as delightful.

Improving the design

We used three principles to improve the error page design.

The before and after of the 404 error page.

1. Make it clear what went wrong

Previously, the error pages lacked clarity around the user’s problem. Now, immediately hitting the page, the user knows from an illustration of a broken typewriter something went wrong. The copy then uses plain language to explain the error to the user.

2. Focus on functional

Next, we added additional copy and functionality to the pages to give users next steps.

For the 404 page, where the content they’re looking for is no longer available, we added a “Most Popular” articles so they can discover and enjoy them.

For the 5XX pages, where the error would need to be fixed, we explained that they should try again later. The page also includes a “More details” section for developers looking into the problem. The section is hidden from everyone else, reducing irrelevant information for primary users.

The before and after of the 5XX error pages.

3. Mix in some fun

Having a clear message for the user is the primary goal, but creating a more delightful experience is a nice bonus.

Yujin Kim’s illustration of a broken typewriter makes the page softer and more approachable while reflecting Industry Dive’s brand guidelines. It also ties back to journalism’s history, offering the fun juxtaposition of a broken typewriter with a digital problem.

With these pages now live, the website experience is just a bit more enjoyable. But fingers crossed you don’t run into these pages anytime soon!