<?xml version="1.0" encoding="utf-8"?>

This 404 error page was designed for a financial services platform, balancing the need for professionalism and trust with friendliness and support.

1. UX Strategy & Brand Voice

  • The Goal: To immediately turn a moment of user frustration (hitting an error) into a moment of reassurance and quick recovery, maintaining the brand’s professional, supportive voice.
  • Microcopy Focus: The priority was to address the user’s primary concern in a finance context.
    • Emotional Security: The line, "Don't worry, your account and data are secure," is a non-negotiable component. It proactively calms any user anxiety regarding their money or personal information.
    • Clarity: The message is simple: "The link might be broken or the page may have moved."

2. Visual Hierarchy and Functionality

  • Color Palette (Trust & Growth): I used a high-contrast palette dominated by White (for clarity/simplicity) and Deep Green (associated with stability, growth, and calm). This professional combination avoids the alarm of red.
  • Clear CTAs (Call to Action): The page is designed to be functional with two clear pathways:
    1. Primary Action: "Back To Home Page" (Solid Button). This is the fastest, safest route back to a familiar, stable environment.
    2. Secondary Action: "Contact Support" (Outline Button). This acts as a reliable fallback for users who are genuinely lost or need specific help, without distracting from the main goal.
  • Visual Appeal: The custom illustration featuring the "Oops!" bubble adds a human, friendly, and non-threatening element, injecting personality into an otherwise frustrating experience.
    • In summary, the design transforms the typical "dead end" 404 page into a helpful guide, prioritizing the user's security and immediate next steps. :)
Share your insights — leave a project review and help others grow their skills

Reviews

5 reviews


Hello Radwa,

your 404 error page design is very well executed. I like how you balanced professionalism with friendliness, making the page both reassuring and functional. The use of deep green for trust and clarity works nicely, and the CTAs are clear and easy to follow. The custom illustration also adds a human touch without overwhelming the user.

One small suggestion: in the main sentence, it would look more polished if not every word started with a capital letter.

Overall, this is a thoughtful and effective design. Great job!


Thanks for the sub, Radwa!

The illustration idea is awesome! is a little bit funny and well drawn. The pallete si consistent and the call to action make the user come to the right path of findings.

Great work! keep on creating!


This 404 error page is very well thought out. I like how you’ve balanced professionalism with friendliness, especially in a finance context where users can feel anxious.

The messaging is clear and calming, particularly the line about account and data security. The hierarchy works well, with the “Back To Home Page” button as the primary action and “Contact Support” as a supportive secondary option.

The choice of colors and the friendly illustration give the page personality without distracting from its main purpose. Overall, it transforms a frustrating moment into a reassuring, user-focused experience.


The rationale behind this screen is very clear, and it’s easy to understand the intention of the proposal. I also think it’s excellent that you provided users with two options so they don’t hit a dead end when encountering this page.

For areas of improvement, I would highlight two points: first, while the use of a visual element adds personality to the design, the corporate Memphis illustration style feels overused—I’d encourage you to explore or develop a more original and creative style. Second, be careful with text capitalization. It’s not necessary to capitalize every word, so refining this will improve readability and consistency.


Nice start! I like the styled cover image and the clear focus on trust and quick help, those are solid priorities for a finance app 404 page. However, it’s hard to fully evaluate the project with just a short paragraph and only one cover image.

To help mentors review more effectively, consider:

  • Adding a few screens or states (and an edge case like expired session).
  • Including design rationale: why calm green, how the illustration supports reassurance, and how you prioritized the ctas.
  • Brief notes on content decisions: how you chose the safety message wording, what alternatives you considered, and how you validated it
  • Accessibility and UX details: contrast, focus states, keyboard navigation, and error recovery paths.

A bit more context and visuals will make your intent and decision-making process much clearer, and help reviewers give more targeted feedback.


22 Claps
Average 3.7 by 6 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>