UXHires.com currently has a stock Wordpress 404 page. The assignment was to redesign this page to effectively help the user in the next steps after encountering it. Let’s examine it’s current state and features below:
Here - we can notice some key components:
1. A message specifically describing the error
2. Some recent pieces of content
3. A search unit
We can also see a few things that could use some improvement:
1. The search bar disappears. For consistency, it should be included in all pages
2. Breadcrumbs are present, which for a 404 page is not logical
3. There are too many links that don't point the users to anywhere specifically helpful.
Research/Analysis
The research of the UXHires user base indicates a few things to us:
The main goal of half of users is to hire a UX designer. 44% want UX work. On the 404 page now there is currently no option to do either one.
Let’s review some current 404 pages on live sites. We will look at Upwork, Mockplus and Medium
Upwork
The overall design is a minimalist, clean design that utilizes a thin serif font. Upwork makes the decision to remove the main navigation from this page. Essentially It simply tells you that the page does not exist and gives you an option to either go back one page, or back to the homepage. It gives you a specific error code, which as a Developer makes sense to me but for someone who is trying to hire a UX designer might not need to know/care about this.
MockPlus
MockPlus preserves it navigation - in the event a user decides to go to a different page. Much like Upwork, it tells you what went wrong and why it possibly went wrong. The navigational on page options are limited, as the only one suggests to go back to the homepage.
Medium
Medium has a straightforward bold approach to their 404 page. In large, black type we see the error code with what it means right next to it. We also see a search bar, with some suggested posts to browse.
Redesign process
These were the common themes amongst the competitive analysis:
1. What went wrong with an error code
2. Some reasons why it went wrong
3. A next step to help guide the user to go somewhere
I wanted the new 404 page to be quick and “to the point” - I want to include the 3 main elements, but a few things needed to be different:
1. With our research indicating that our users are here for very specific reasons, I needed to include links to help those users get to where they need to go
2. I want less emphasis on the design of the actual error code itself, but a more human explanation as to what went wrong since our target audience is primarily not interested in what specifically the error code was
3. For the remainder of the users visiting, I wanted to include the search bar as a means of exploration. I also wanted to include it in the event the page got renamed or replaced with a different one.
Preliminary sketches
In my first sketches I had two variations of the idea. There were a few key differences:
• Explanation of the error, with 2 links to the most popular pages, and a search field
• In the second one, I have a logo idea for the error code, which would show it in a subtle matter in a tasteful design
Wireframes
Once I completed my sketches, I moved on to the wireframing process.
During the wireframing process, I was able to really dive deep into the alignment and positioning or each element on the page. One thing that needed ideation was copy for each CTA button. At first I wanted "Find UX" and "Hire UX" to be the copy for each button. After some contemplation I decided this wording was too vague and could be misinterpreted rather easily.
Visual Design
After the wireframing, I was ready to move on to the visual design of the new page. One thing that was incredibly important was to preserve the current style guide and branding of the site.
In order to do this, I needed to put my Web Development knowledge to work. Using the Chrome Developer Tools, I was able to get the styling and colors for each of the elements on the site.
The main two typefaces used are Gotham and Sentinel. Unfortunately, I do not have access to the Sentinel typeface, so I used a very similar one - Clarendon.
The end result is sort of a hybrid of the two wireframes/sketches. I have my main header, with a quick explanation of what happened, along with three possible avenues for users to go to. After much debate, I changed the copy to "Find UX Jobs" as simply "Find UX" was rather ambiguous and isn't clear as to what that really means.
Another consideration in the final design was color choice. I wanted to use the two tone color scheme for each button as to maintain consistency.
Based on close review of the live site, header typefaces are Gotham, and paragraph text and UI elements were rendered as Sentinel - or in my case it's substitute Clarendon.