UX Hires Design Challenge - Design a 404 Page
UXHires.com wants their 404 error page redesigned to be more useful than it is now. Currently, the page is generic/un-branded, has some layout issues, and ultimately does not help site users do what they have come to the site to do.
Encountering a 404 error isn't ideal, but it does happen. Good 404 error pages help site users find information that they are looking for (if it exists) or provide suggestions or alternatives. A 404 error page for a firm like UX Hires should do all that it can to enhance the user experience of the site!
404 error page design for both desktop and mobile, to include:
- Analysis of the current 404 error page
- Competitive analysis
- Wireframes/Visual Design
CURRENT 404 ERROR PAGE ANALYSIS
The pros and cons of the current 404 page
- The breadcrumb homepage link may prove useful to new site visitors (especially those who are unfamiliar with the logo in the top left corner and may not even know what site they've landed on)
- A search box exists to help visitors try to find what they were looking for. The downside is that it appears that this is a blog-specific search box, and visitors may not be looking for blog content.
- While the error messaging is somewhat explanatory, it is not helpful. Good messaging should help the user figure out what to do next.
- The layout seems off and does not feel intentional. The search box and recent posts on the right, along with the big empty space that precedes a centered Blog title and caret make the page feel unfinished - like a work in progress that was never picked back up again.
- There is no branding on the page other than a logo which may not be helpful if the site visitor is unfamiliar with the brand/website.
UX HIRES WEBSITE RESEARCH
UX Hires did provide some primary research regarding site usage which can help improve the 404 error page design.
Data gathered via a 100 user survey that asked "What is your main goal when you go to uxhires.com?" found that:
- 44/100 users want to look up job listings
- 50/100 users want to hire a UX designer
- 6/100 users are just checking out the site
Since we know that the overwhelming majority of site users are either looking for a job or looking for a designer, we can feel comfortable guiding most users who encounter a 404 error to one of those two activities.
This competitive analysis looks at best practices in 404 page design as well as examples from companies similar to UX Hires. Together, that will give us a well-rounded competitive analysis.
According to UXPlanet.org, there are six best practices for creating exceptional user experiences on 404 error pages. Among the six are three that provide good guidance for the design:
- "Allow users to progress to other parts of your site," rather than stop them in their tracks. It is better to help people move toward their goal than to force them to turn around, re-think where they were going and try to figure it out on their own.
- Avoid clutter. This is something the existing 404 page already does in one sense, but it needs a refresh in order to keep people moving.
- Add humor. It's sort of annoying to encounter a 404 error; so best practices suggest aiming for surprise or delight here (in an unexpected place)!
Well-designed 404 page examples
1. Bluegg (two examples)
This first example featured a very minimal design, humor, and a single link. The focus here was clearly on the humor.
However, Bluegg recently updated their now infamous 404 to yet another humorous one. The call to action here is a phone call, which is an interesting choice.
I like GitHub's blend of creativity and function in their custom 404 error page. They included all of the best practices while emphasizing the need to keep people moving. The large search box makes a lot of sense for a repository site like GitHub.
3. Competitor examples
To find competitors for UX hires, I chose to search "hire a UX designer" on Google and look at a few top search results. For each of them, I intentionally entered a URL that most likely doesn't exist on their site to try and find their 404 page.
Dribbble's 404 error page plays up dry humor and a large background image. There is no search box, but there is some messaging to explain what happened and two useful links: homepage and contact us. There is also some branding on the page to help visitors know where they landed.
There are some accessibility issues with this design that make it not recommended. The first is context - "air ball" is funny when you know that it means a missed basketball shot and that it's usually said in a funny way. But good UX is universal, and the term air ball may not make sense to all visitors. And even if they know what it means, they might not make the connection. Because the page lacks the 404 error page messaging, dribbble is asking visitors to think (which goes against the "don't make them think" design philosophy).
Another accessibility concern here has to do with the large visual image that has to do with "air ball." It's certainly engaging, but for the blind, this image doesn't help make that connection to "air ball" and so they will land on a page that simply says "air ball" with no other helpful messaging aside from the note that the page doesn't exist.
Mondo is a direct competitor to UX Hires and took a different approach to the 404 error page than dribbble. They kept it super focused and simply explained what happened. Their only real guidance is to go back to the homepage, though. While simplistic, branded, and focused, this potentially misses the boat in terms of helping people get to where they really want to go.
My approach to the sketches for this was to focus on usability and getting people to the right CTAs. UX Hires brand tone is very professional and straightforward. Their design is clean; they use the full canvas of the view port and their CTAs are minimalistic in both visual design and wording. I wanted to carry that user experience forward into the 404 error page design.
The site visitor is presented with a logo (just like on the homepage), simple messaging to explain what happened and keep the user moving forward, two CTAs, and some alternate guidance that includes a link to contact the firm.
The two CTAs represent the research-based primary functions of this site: find a job and find a designer.
The mobile version of the 404 error page is clean, centered top to bottom, and features three CTAs: find a job, find a designer, and contact us.
I improved on the first sketch by removing the "alternate guidance" extra paragraph and turning it into a simple CTA button. I also added a heading (H1) which is not only more accessible than just a logo but it's necessary for page optimization and helps more experienced web users know what happened immediately.
I also accounted for the menu in desktop which I had forgotten on my previous sketch.
Using Figma, I created low fidelity wireframes for the desktop and mobile visual design.
The only notable difference in the lo-fi wireframe from sketch #2 is that I positioned the CTAs horizontally rather than vertically.
The user experience in desktop and mobile for this page should be essentially identical. The idea is to get people looking for jobs or looking for talent as quickly as possible.
Using Sketch, I created higher fidelity designs that can be used for user testing or an approval process. These designs incorporated the following:
- Brand elements: UX Hires branding including logos, colors (identical to current site), and fonts (not identical but as closely matching as I could find)
- Messaging/Copywriting: In keeping with UX Hires brand tone, I kept the humor as light as possible and refrained from getting too kitschy or familiar.
- Their brand's tone of voice is very professional and I could not find any humorous undertones, so I did not want to veer too far from their current tone.
- The messaging provides an explanation of what happened and attempts to guide them to the two most likely scenarios.
- Professionalism and quality: The direct competitor (Mondo) has a fully designed 404 error page that matches their brand visually and functionally. This new design for UX Hires increases the level of professionalism up for this commonly neglected page.
- Calls to action: The simple design drives attention first to the two most common actions: finding a job and finding a designer, and then to contacting the firm if necessary. A lesser obvious action is to go to the homepage, which is linked in the body copy.
Desktop Visual Design
Mobile Visual Design
I'm an experienced business analyst with a penchant for all things UI and UX, so I'm spending some time building a portfolio and learning all I can about it.View Portfolio