In order to redesign a user-friendly 404 error page, first we take a look at the user survey:
According to survey result of 100 users, 50% of the website user's purpose is to hire a ux designer, 44% want to look at ux job listings. Therefore, the 404 error page should offer clear directions to fullfill users' main purposes - either go to ux designer profile page or job listing page.
Next, let's look at the current 404 page:
As can be seen in the picture above, there are 2 main messages on the page:
1. "we're sorry but that page could not be found." - the wording is straightforward but not empathetic. It makes me feel very frustrated that the page is missing and make me want to close the website.
2. "Recent Posts" on the right side bar - it shows some tips for ux employee/employer, but it does not reflect the main purpose of the site visitors.
To have a better idea of what a good 404 page look like, I did a competitive analysis on the most successful websites in the market:
Take the airbnb 404 page for example, here are the main good points:
1. The main message"we can't seem to find the pae you're looking for" is clear but very sythpathetic - it feels like a person is delivering the message instead of a robot
2. Underneath the main message, this is a section of useful links with the title "here are some helpful links instead" to guid users to complete their user journey on the website.
3. On the right side of the page, there is this image of a girl looking awkward after dropping her ice-cream, delivering the message that it is kind of awkward that the page could not be displayed properly on the website for airbnb, for some reason. It makes the user feel less unhappy about the situation.
Based on competitive analysis & user research, I did this sketching:
Layout- The error message and the useful links are presented at the center left of the page.
Content- Include 2 links: available positions for employees & contact us for employers
Copywriting- Change the copywriting into"sorry! the page cannot be found..." to show more empathy.
Finally, I used balsamiq to do the wireframes and visual design:
The new 404 page design make it easy for the users to find what they need on the website, which is finding ux jobs & hiring ux designers and shows more sympathy towards users. Therefore the new design is more user-friendly and should drive more site traffic.
Thanks for reading!