Challenge Brief

Quick

Design a 404 Error Page for UXHires.com

Challenge Overview

UXHires.com is looking to improve some of the details of their site, including the 404 Page, which is shown when a user enters an incorrect link. You are tasked with re-designing the 404 Page for Desktop and Mobile.

Device & Platform

Your submission should be designed as a responsive webpage displayed on mobile and desktop browsers.

What is a 404 Error?

A 404 Error is triggered when a user reaches a broken link, or enters a url incorrectly. This is a critical point in the user journey. It is an opportunity to direct a user to what they were looking for, and avoid a potentially frustrating experience.

Unlock the Challenge

User Goals & Research

The user came to UXHires.com to accomplish a goal - when they reach a 404 page, this is a roadblock to them accomplishing their goal. Use the research below to help guide your submission. The 404 page you design should guide users to the quickest path to reaching their goals.

Unlock the Challenge Unlock the Challenge

Check out this submission, and use it as an inspiration to get started on your own!

Jeff Soriano

Jeff Soriano

ASSIGNMENT: DESIGN A 404 ERROR PAGE FOR UXHIRES.COM

UXHires.com is looking to improve their 404 Page, which is shown when a user tries to access an incorrect link. The current 404 page can be found at https://uxhires.com/404 and is shown below. The goals are to re-direct the user to what they were potentially looking for and to avoid giving them a frustrating experience.

Ux hires 404 page

WHAT WE KNOW

UXHires provides the following results from a survey in which they asked 100 users, "What is your main goal when you go to uxhires.com?"

44/100 say they want to loook at UX Job Listings

50/100 say they want to hire a UX Designer

6/100 say they are not sure and just checking out the site

Given these results, it would be reasonable to provide links to the UX Job Listings (https://uxhires.com/#jobs) , the UX Designer hiring page (they have a contact form for employers https://uxhires.com/#contact), and the home page.

Ux hires research

COMPETITIVE ANALYSIS

LOOKING AT OTHER 404 PAGES

I looked online for some examples of great 404 error pages. I was looking for ones we could potentially emulate. Since the main goals of UX Hires users were either to look for a job or hire someone, I was looking for simple 404 pages that provided links. It seems that all the cool kids inject some humor into their 404 pages, so I was looking for some of that as well.

I found 4 good examples of 404 pages:

You can see my competitive analysis work in the images below.

Ux 404 page competitive analysis mail chimp
Ux 404 page competitive analysis repair pal
Ux 404 page competitive analysis starbucks
Ux 404 page competitive analysis dropbox

POSSIBLE DESIGNS

For this process, I decided to design two different versions for UX Hires's possible new 404 page. One version is more simple and straightforward, while the other tries to stick more to the brand message of UX Hires's mission to connect UX Designers with employers. The computer image with the 404 symbol on it is inspired by a couple computer images on the main UX Hires website (https://uxhires.com/#intro) so I figured that hearkening back to that would not only provide some sort of visual to look at but also keep the visual consistent with the rest of the site.

To design the wireframes, I used Wireframe.cc (you can find one of my wireframes at https://wireframe.cc/K3ykxa).

20171212 141632
20171212 142154
404 wireframe 1
404 wireframe 1 2

THE FINAL PRODUCT

In the end, I decided to go with the second design since it seemed more visually appealing and it still was able to guide the user through a potentially annoying experience. I researched the fonts and colors used on the main UX Hires website in order to match their brand style. As for the image, I just took an existing picture of a computer from the website and slapped a "404" on there as opposed to recreating it from scratch in order to stay consistent with the other images on the site.

Overall, I think this simple, straightforward design conveys a lighthearted way to help the user find what they're looking for.

404 page design desktop
404 page design mobile

Want to see the full brief and get started?

Start Your Free Trial

Challenge Checklist

A step-by-step guide to creating an awesome submission

Check out the current 404 Page
5 Minutes
Do a Competitive Analysis
20 Minutes
Do some sketching
15 Minutes
Wireframes & Visual Design
20 Minutes
Post Your Submission!
20 Minutes

Want to see the full brief and get started?

Start Your Free Trial