Oregon Humane Society | 404 Page

Recently I've been reading a lot more about what makes good UX copy. I wanted to practice some of the tips I'd learned, and took this opportunity to see whether the 404 page of sites I've visited before could be different.

I remembered the Oregon Humane Society (OHS)'s website, which has a standard 404 page. As an organization with a wonderful purpose, I thought to try and make their standard 404 page more impactful.

  • Project Improve a 404 error page.
  • Purpose Create a more impactful page for the Oregon Humane Society.
  • Skills Showcased Photoshop, copywriting

Before

There nothing glaringly "wrong" with the original 404 error page, since it includes the key elements we come to expect for these pages, including:

  • Notification of the error and explanation of why it may have occurred,
  • Consistent UI that allows users to use the full navigation and lets users know they're still on the OHS site, and
  • a "what next" -- a way to move on from the error page, in the case with a search bar, along with access to the menu header.

However, I believe this 404 error page could be more impactful with a few changes. Lastly, I realize that social media share links are standard, but don't seem relevant considering the nature of this page.

After

The majority of users to the OHS site are looking to adopt a pet or to support the humane society in some other way. With that in mind, I thought to rewrite the content to account for the common user, while still maintaining the key elements of a 404 page:

A notification of an error, an explanation for why it may have happened, and an apology for the inconvenience:

  • As before, it's clear there was an issue. However, I changed it to be a little more humorous with a fun animal-related pun.
  • An explanation that the reason for the error is because they page unfortunately wasn't found.

A consistent UI as before, so users still know they're on the OHS page and have full access to the menu bar:

  • I decided not to embed the search bar as it had been in the original page, since it's still available in the menu bar, but also because I though to use the space for something else.

Relevant link to lead users on from the error page:

  • Instead of the search bar, I give links to "adopt," "sponsor," or search for "other" pets available for adoption, as these links are likely highly relevant to typical users of the OHS website. I also include a return to home link for users that have a different goal.

A key aspect of my redesign was to make the page more relevant--catering to both the user and promoting the OHS mission. By giving a blurb about a featured adoptable pet, I speak to the common OHS audience but also help increase awareness about the hundreds of animals in need of a loving home. I also aim to add a smile to the reader's face with a bit of humor such as with the punny title, adorably cute photo, and informative but light-hearted (and rhyming!) blurb about the featured pet.