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

The project itself on Codepen:

https://codepen.io/sebastians-estudio/full/PoMvvLQ

Breaking down the design

1. Platform and Device Type Selection:

  • Cross-platform responsive web design
  • Responsive and accessible design with graceful scaling.
  • Used grid system (md:grid-cols-3) for responsive layouts.
  • Financial services need to be accessible anywhere, anytime

2. Helpful 404 Error Page Design

  • Security-first messaging order:
  1. "Page not found, but we've got you covered"
  2. "Your account and information are secure"
  • Real-time system status display
  • Last visited breadcrumb for context
  • Time-based personalized greeting
  • Reduce anxiety in financial context while maintaining trust

3. Functional Solutions

  • Quick links to common destinations
  • System status indicators
  • Report issue option
  • Smart recommendations based on common paths
  • Keyboard shortcuts for power users (H, R) RATIONALE: Multiple recovery paths while maintaining transparency

4. Visual Appeal

  • The main idea for visual appeal was combining the "sleekness of Robinhood with authority of Chase"
  • Professional color scheme:
  • Blues for trust
  • Clean whites and grays for clarity
  • Subtle animations and transitions
  • Clear visual hierarchy
  • Balance modern fintech with traditional banking trust signals

5. Voice:

  • Professional but reassuring tone
  • Users navigating these platforms are generally taking care of business. Help them feel assured.
  • Security-focused messaging
  • Remind the user that everything is ok with their money and information.
  • Clear, action-oriented options
  • Give the user solutions to this problem, including the ability to report the issue.
  • System transparency without technical jargon
  • Reassure the user this was just small system error.
Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


Great job, I'd love to share some feedback - what is great and what could be improved.

Firstly, I really like the overall simplicity of the design and adhering to information hierarchy by use of proper typography sizing and colors. This page is very informative and guides users to appropriate actions and popular destinations.

For elements that can be improved, there are a lot of actions that can be performed by the user, which can easily lead to choice paralysis - all 8 actions presented on this page are similar in hierarchy. Some actions also are repeated - like two buttons for making a transfer. What I would consider is really minimizing the information overload here - removing the three text buttons (account access, transfers, payments), and leaving the "popular destinations", perhaps highlighting one option which is most recommended. Secondly, I would consider moving the breadcrumb to the top left corner, adhering to Jakob's law which indicates that users are more likely to follow design patterns seen on other websites and products which they already use. Subsequently I'd also consider removing the "last visited" text, combining the two into a path-based breadcrumb.

Please let me know if you have any questions! Once again, great job. With a few tweaks I believe this design will look even better.


The strongest aspect of this 404 page is how it transforms a potentially frustrating moment into a helpful navigation hub. Instead of leaving users at a dead end, it provides clear, actionable paths forward through multiple options. The friendly heading "Page not found, but we've got you covered" reduces anxiety and the security reassurance is a smart touch, considering it's a financial interface! Well done!


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