Open full project

This 404-error page is designed for YourBank, a financial platform, to provide a user-friendly experience when users land on a non-existent page. The goal is to minimize frustration, maintain trust, and guide users toward helpful resources.

Headline: "Oops! Page Not Found" – A casual and approachable tone helps soften the frustration of encountering an error.

Message: "Looks like you've landed on a missing page, but your finances are safe." – This reassures users that their sensitive financial information remains secure, reinforcing trust in the platform.

To help users recover quickly, the page includes two clear call-to-action (CTA) buttons:

  • "Return to Dashboard" (Primary CTA) – Redirects users to their main banking interface, allowing them to resume their tasks.
  • "Visit Help Center" (Secondary CTA) – Guides users to support resources in case they need assistance.

The primary CTA ("Return to Dashboard") is emphasized with a prominent button style, ensuring users can easily find their way back.

The secondary CTA ("Visit Help Center") is visually distinct but less dominant, preventing distraction while still being accessible.

Branding Elements: The design maintains consistency with YourBank’s color scheme, typography, and UI components to reinforce credibility and familiarity.

Minimalistic Layout: Reduces cognitive load, ensuring users focus on key actions rather than unnecessary distractions.

This 404-error page design ensures a seamless user experience by reducing frustration, reinforcing trust, and providing clear navigation paths. By balancing a friendly tone, strong CTAs, and a clean UI, it aligns with financial UX best practices and maintains user confidence.

Tools used

Figma

From project brief

Share

Reviews

2 reviews


Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...

Great job Stefan,

I suggest lightening your body text to ensure good contrast. You might also consider shrinking your CTAs, for example, using "Help Center" instead of "Visit Help Center." Additionally, I think it would be beneficial to try a related illustration on the Not Found page as well.

Thank you Mehrdad! I really appreciate your feedback. I'll adjust the body text for better contrast and explore a more concise CTA. The page illustration is a great idea—I’ll try out some options to enhance the experience. Let me know if you have any other thoughts!

9
Claps
Average 4.5 by 2 people
5 claps
4 claps
3 claps
2 claps
1 claps
Create your very own Design a 404 Error Page project and get mentor feedback.
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>