404 Error Page: Designing for the Un-happy Path

How might we transform a frustrating user encounter into a delightful opportunity?

About

404 errors are never a page you want your users to see. At the same time, it’s a perfect opportunity to empathize with users through design. It can also be a playground where designers get creative with branding and interaction design outside of a product’s standard UX.

Your Challenge

Choose any digital product experience (website or app), and design a 404 error page users would encounter when landing on a broken or unavailable URL. As a product designer, your challenge is to use this error page to your advantage!

  • Consider opportunities that not only direct users away from the error, but keep them interested in the product after having had that unpleasant encounter.

  • Balance user-friendliness with the success of the product as a business—a well-designed 404 page won’t sacrifice one over the other.

  • Get creative with how you might own the error, and turn it into a fun opportunity to promote the product’s brand and voice.

  • Feel free to use any interactive elements in your UI.

  • Should take around 3 hours.

Constraints

Adapt the brand and UX/UI style of the product into your own designs. You can get creative and think outside-the-box, but don’t go crazy—users must be able to clearly recognize the product from its 404 page.

***Tip: Product designers always consider their product’s visual style and brand when making UI decisions. Whether designing new features or tiny improvements, they must adhere to the style guide and keep “on brand”—both in the UI and UX. This includes all stylistic elements, from fonts to how a dropdown moves.

Deliverables

  • Design a single 404 error page (fully designed—not in wireframe form).

  • Upload your project to your Skillshare profile.

  • In your project upload, write:

    • A brief blurb explaining your design approach.

    • Point(s) of feedback you want to receive from the Mavericks community about your designs. (Consider pros/cons of your designs when thinking of these.)

  • Add the link to your completed project to this Project Signup Sheet.

Peer Feedback

Mavericks' mission is to encourage peer-to-peer learning through a healthy feedback cycle amongst the students! In order to get credit for your work, the rule is simple: Give feedback in order to get feedback.

  1. Ask for help, ask questions, or get feedback in the Discord #productdesign channel

  2. Check out other student submission in the Project Signup Sheet, and post feedback in the comments section of their project.

  3. Be thoughtful and friendly when giving feedback (questions, praise, constructive criticism, etc.).

  4. Once you post feedback for at least 1 other student, the Mavericks team will review your work thoroughly, and give credit if your submission is sufficient.

  5. The more feedback you post for others', the more points you'll collect (The Mavericks Team will keep track of your progress manually for now!)

Resources

Design basic resources:

Helpful Articles

UI Pattern Libraries:


About this Project

  • Designed by Jenni Lee Winter, Designer at Skillshare

  • Skills: UI, UX, Visual Layout, Content Strategy

  • Program: Product Design

results matching ""

    No results matching ""