Designing a 404 Error Page for PiggyBank
Consistency with Brand Image and Voice
As a neobank, PiggyBank's brand image is modern, simple, and user-friendly. Our design approach focuses on creating a visually appealing and straightforward experience for our users. Therefore, our 404 error page will follow the same design philosophy.
Helpful and Non-Blaming Microcopy
Our 404 error page will be designed to avoid any blaming language or technical jargon, ensuring that the user feels supported and not frustrated. The message on the page will be personalized and reassuring, informing the user that the page they were looking for is unavailable, and providing options to help them find the information they need. The microcopy will say: "Oops! We can't find the page you're looking for. We're sorry for the inconvenience. Let's help you find what you need."
Functional Error Page with Information on How to Fix the Problem
Our 404 error page will be functional, and it will provide the user with links to the homepage, help center, and contact us page, ensuring that the user can find what they need quickly. The page will also feature a search bar, allowing users to search for the page they were trying to access. The search bar will feature a prompt to help users find what they need: "Can't find what you're looking for? Type in a keyword, and we'll help you find what you need."
Reasonable Explanation of the Presented Design
Our 404 error page is designed to be consistent with PiggyBank's brand image and voice, helpful, and functional. It provides users with options to find what they need, and the microcopy is reassuring and avoids any blame. We believe that this approach will help users feel supported and confident in our financial services.
Conclusion
Designing an effective 404 error page is crucial to maintaining user satisfaction and trust in PiggyBank's services. Our approach focuses on creating a visually appealing, simple, and functional page that provides users with options to find what they need quickly. The microcopy is supportive and non-blaming, helping users feel reassured and confident in our services.
Tools used
From project brief
Topics
Share
Reviews
4 reviews
Okay, first off, I love the illustration approach. The whole “404 under construction” thing with the little figures actually makes this feel less frustrating, which is exactly what a good 404 page should do. The night sky, the stars, and the moon? Super calming. It doesn’t scream “ERROR! PANIC!”, instead, it feels like, “Hey, something’s off, but no worries, we got you.” That’s a win.
The dark blue background is beautiful, but…
The text needs to meet WCAG contrast ratios. That white text on blue should be fine, but the pink button on blue might need a contrast check to ensure it meets at least 4.5:1 for text and 3:1 for UI elements. The search bar outline is too subtle, making it hard to notice. Consider increasing the contrast or adding a clearer border.
"Oops, something went wrong" is friendly, but why? A small line like “The page you’re looking for might have moved or doesn’t exist anymore” could help guide users.
The pink button needs a clear hover effect to reinforce interactivity.
This is a strong 404 page. The design is engaging, the messaging is friendly, and the CTA is clear, all huge wins. But for it to be even better, some color contrast adjustments, improved navigation options, and clearer interactivity would take it to the next level.
You might also like
Push Notification Campaign
Access-Tech-Solutions
CleanPath
Color palette for fictional package delivery brand
Filtreach Redesign
FitCoach
Content Strategy Courses
UX Writing
Common Design Patterns
Churn Busting