404 Redesign

Our old 404 page was outdated and needed a UX and content refresh. The main issue was that the user had to click through to a search page to search for what they needed rather than searching right in the page. It also needed shorter, friendlier language and a distinction between the main university homepage and the homepage of the parent site. I used the College of Science and Health as my test site.

Old 404 breakdown:

The old 404 was wordy and technical and didn't speak in a human way to the user. It didn't really instill confidence in the user or any indication that we care that they find what they're looking for. So my first idea was to approach the content very simply but conversationally and to keep things positive (no "oops!" or "we're sorry!" as that kind of language is just frustrating to the user).

The first link under the content takes the user to a new page with a search bar. The search page is not only an unnecessary second step, but the design of the page itself does not match the design of the 404 page and is not hosted within the parent site, so the header and navigation from there aren't very useful to the user if the page they're trying to reach is in a college site.

The old 404 is still currently viewable on some sites like the Academic Affairs website.

Here's the search experience for the old 404:

The second link says "Home page" (which is not correct according to Google and the AP) and actually takes the user to the DePaul homepage, which is the main homepage for the university. This is misleading, since it's not taking the user to the homepage of the parent site they're contextually in.

Then there's a link to a form where the user can report the link. The form does not get used often, it's not optimal to rely on users to report broken links, and we now have a solution for scanning and collecting broken links across our properties (called DPUBot), so we don't really need this form link.

New 404 breakdown:

First, I simplified the H1 to "404- Page not found." 404 is a common error and I thought a straightforward H1 would suffice.

Next, I added a subhead to speak directly to the user and guide them to take one of the following actions in as friendly a tone and as few words as possible.

The three links I decided on were: Back, Site Homepage, and DePaul Homepage. "Back" is a browser-back solution that we'll be testing to take the user back to the last page they were on where the broken link occurred. I'd like to test if this is useful and also how it works on mobile. "Site Homepage" simply takes the user to the parent site homepage (in this case the College of Science and Health). And of course "DePaul Homepage" takes the user to DePaul's main homepage.

Last we added a direct search bar in the page, which loads clean search results within the parent site (in this case the College of Science and Health) so the header and navigation remain contextual. It searches all of DePaul's properties, prioritizing the parent site.

Here's the new search experience:

The new 404 is simple, friendly, helpful and usable. The new 404 is viewable on DePaul.edu/404 and all of our college websites, like the College of Science and Health.

Back to Examples & Projects