Image for post
Image for post

Piggybacking off of last week’s post about errors, this week I decided to tackle one of the most common errors that internet users see: the 404 page.

404s are as old as the internet itself (links were made to be broken right?). But have you ever thought about why this type of page is called 404? Without getting too technical, 404 is an HTTP status code, one of many that were established in 1992 by the W3C and then defined by the web’s inventor, Tim Berners-Lee.

There have long been rumors that the error code itself referred to a room in the CERN building where the web was born, but that’s just a myth. The numbers do actually have meanings though. This site offers a great explanation of what it all means:

The first 4 indicates a client error. The server is saying that you’ve done something wrong, such as misspell the URL or request a page which is no longer there. Conversely, a 5xx error indicates a server-side problem. It also indicates an error which may be transient; if you try it again, it may work.

The middle 0 refers to a general syntax error. This could indicate a spelling mistake.

The last 4 just indicates the specific error in the group of 40x, which also includes 400: Bad Request, 401: Unauthorized, etc.

In the early days of the web (and unfortunately this is still the case on many sites), 404s were nothing fancy. They were just errors returned to the user in plain text or supplied by the browser (as seen in the screenshot at the top of this post). However, this has changed a lot in the last couple decades and in recent years 404s have become opportunities — particularly for reinforcing the branding of any organization.

This was the challenge I gave myself this week: to take an existing brand’s so-so 404 page and better align it with the company’s voice. This was harder to research than one might think, as there are tons of creative and fun 404s out there these days, as can be seen below.

Spotify Design and HBO’s 404s are great examples of “on brand” error messages because they add true personality and fun to an experience that might be somewhat irritating.

After visiting dozens of websites looking for an opportunity, my brain naturally steered itself towards news and politics. For better or worse, it’s an election year and I’m a news junkie. I visited a half dozen major news sites and settled on updating CNN’s 404, which was simple but not very unique or interesting. Take a peek below.

I watch a lot of cable news these days and something I’ve seen countless times in the last couple years are ads from CNN’s “Facts First” campaign. This campaign comprises of a series of simple ads often centered on one object. In one of the first commercials (embedded below), an apple is displayed in the center of the screen, with the narrator declaring “This is an apple. Some people might try to tell you that it’s a banana…But it’s not. This is an apple.”

CNN’s “Facts First” ad

Since this ad campaign originally began, it’s become a big part of CNN’s brand identity, so I saw an opportunity to introduce this sense of personality to their 404 page.

I got to work writing copy that felt aligned with the ads. The challenge here was writing in a way that was both straightforward and useful, but also a little fun and offbeat.

I treated this exercise as though CNN was my actual client, so I had to make a lot of little decisions based on both the look and feel of CNN’s current site, and based on the competition out there. Other news sites have 404s that are very straightforward and not particularly fun, and I think there’s a reason for that: as arbiters of the news, they want to be taken seriously.

At the same time, I thought there was a way that you could have your cake and eat it too, by filtering the 404 message through the lens of the ongoing campaign. Thus instead of “This is an apple” we have: “This is a 404 page.” — Factual, a callback to the opening line of the campaign ad, and a little fun.

Writing the copy was the easier part — what was more difficult was the placement and arranging of each element on the page. At first, I had left-aligned everything and I spent some time looking for an interesting picture or graphic to help balance out the right side of the page. But the more I dug through CNN’s website, the more I realized that they don’t really rely on graphics at all (aside from photos within articles), so adding a random picture here would actually be outside the boundaries of their design system.

I decided to keep it simple with centered text (just as it currently is on their 404), and instead let the words be the thing that gave it some personality, while staying on message. There’s no need to be cutesy for the sake of being cutesy, particularly with a news organizations that strives to be a source of reliable information.

Since I was limiting myself to the somewhat plain visuals already implemented throughout their site, the challenge was to make the page a little more visually dynamic than the current iteration. I tackled this by bringing in the CNN logo with its “Facts First” tagline, and by subtly alternating the font weights to guide the user’s eyes from line-to-line.

Finally, I noticed one major redundancy as far as UI elements on the original page: They have two search bars pretty much stacked on top of one another, so I eliminated the additional search bar and directed the user to the search bar that’s static across the footer of the site.

It was a super fun exercise to try and improve the usability of this common error page, while at the same time distinguishing CNN from its competition through the use of its own voice. Even though we hope our users don’t land on one of these pages, it’s inevitable that they will at some point and that makes it a truly great opportunity to serve them something unexpected and perhaps a tiny bit delightful. If we succeed, they can feel a little bit less annoyed about stumbling upon a page that doesn’t exist.

As I mentioned in my previous post, the difference between a good error message and a bad one can be the difference between a good user experience and a terrible user experience. As designers, our users expect simplicity and elegance. It’s important that we take these expectations to heart, even when it’s for the most mundane of pages.

Product Designer. Songwriter. Tech Nerd. Professional Guy.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store