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

Objective:

Design a user-friendly, visually appealing, and informative 404 error page for the FinTech platform to minimize user frustration and guide them back to relevant parts of the website.

Research:

1) User Behavior Analysis:

  • Data Analysis: Examined user behavior on financial websites to identify common pain points and 404 error frequency.
  • Competitor Analysis: Reviewed 404 pages of leading financial platforms to find best practices.

2) User Needs:

  • Clarity: Clear indication that the page doesn’t exist.
  • Guidance: Easy navigation options.
  • Engagement: Elements to keep users engaged.

Design Considerations:

1) Visual Design:

  • Theme Consistency: Aligned with the platform’s branding using the same color palette and typography.
  • Engaging Graphic: Used a piggy bank graphic to represent financial savings and add friendliness.

2) Content Strategy:

  • Error Message: “Oops, Page not found” message to humanize the error.
  • Navigation Options: “Go back” and “Go home” buttons for immediate navigation.
  • Additional Links: Links to “Products and Services,” “Latest Transactions,” and “Savings Plans” to keep users engaged.

3) User Experience (UX):

  • Responsiveness: Design works seamlessly on both desktop and mobile.
  • Accessibility: Used accessible color contrasts and font sizes for readability.
  • Testing: A/B testing to determine design effectiveness and make adjustments.

Conclusion:

The user-centric design of the 404 error page reduces user frustration, maintains engagement, and provides clear navigation. By integrating engaging visuals, clear messaging, and useful links, the design transforms a potentially negative experience into a positive one, enhancing the overall user-friendliness of the FinTech platform.

Share your insights — leave a project review and help others grow their skills

Reviews

19 reviews


Hi Menna,

Your design is clear and straightforward, effectively meeting the brief. I appreciate the intuitive shortcut links and the subtle, easy-to-view color scheme. The contrast in your buttons is also well-executed.

Your typography is clean, and the use of the pig in the background is a nice touch.

Keep up the excellent work!


Everything looks clean. Brilliant how you thought about to add these CTA's and Links which is very helpful for the user.

Well done 👏


Hi Menna,

I appreciate the intuition put into good use in this design, particularly the shortcut links below to pages users might wish to access. The color scheme is subtle and easy to look at and, primary and secondary buttons have great contrast too. Excellent work!


Hi Menna,

Well done! I think you laid out your goals and methods well and that you accomplished them pretty well too. I appreciate the subtlety of putting the pig in the background as well. That’s a nice touch. Your typography is pretty clean and your color treatment is solid.

I think the two points that could potentially be improved would be in spacing. A smidge more space between your two buttons could be helpful in reducing accidental clicks. And the rhythm on your action list I think could be a little cleaner. By that, I mean possibly decrease spacing between the action link and descriptor text while increasing the spacing between each action.

Both of those are in the category of very small refinements though, and may be contraindicated with user testing. Well done!


Hey Minna,

Great job!

The voice of tone in your content design is user-friendly and concise. Visual hierarchy in both desktop and mobile versions are clean and intuitive for users to follow. The color codes are simple and self-explanatory, conveying brand messages. In addition, you have communicated design rationales well.

However, it would be better if the Logo design could look more solid and prominent creating the feeling of reliable and trust for users. This is important due to the business nature of FinTech platform.

Overall, your design is good. I would rate 5.


This looks good Menna. I love how you leveraged UntitledUI for the design. It helps to improve your UI design skills. My 2 cents that can help improve the designs are:

  1. I noticed you added a faded image on the background. Not sure if that improves the accessibility of the design.
  2. I'm sure it's an oversight but I noticed the mobile version does not have the background. Also, the secondary button has a back icon while the primary button doesn't. Try to be more consistent with the designs
  3. Lastly, I noticed a space between the word 'oops' and a comma. You can leverage Grammarly - which is currently available on Figma - for better punctuation and spacing.

From the design to presentations, everything looks sharp, and straightforward, and actually addresses the brief. I appreciated that you took the advice and changed the presentation style; now it looks more suitable and also easier to evaluate. Great job!


The presentation is very clear, and I love that. The design is excellent—nothing less than 5 stars.


Dig this and the optional CTA's, being able to redirect and actually help a user is a fresh perspective and I wish more apps would use such a pattern! Well done!


Great 404 page design! Clean typography and solid color scheme work well. The content tone is friendly and concise, and the visual hierarchy is clear. Overall, excellent work with a 5-star rating. Love the optional CTAs for user redirection—well done!


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