404 error page design
This 404 error page has been designed for a finance application on an iPhone, since most users today access financial services through mobile devices. The main purpose of the page is to guide users when they land on a broken or non-existent link while ensuring they do not panic about the safety of their money. In a financial context, users are highly sensitive to errors, so the design combines playfulness with reassurance to maintain trust and provide solutions.
Visually, the page uses a soft teal-to-white gradient background to create a calming effect. At the center, a friendly illustration of a coin character holding a map with a small question mark adds a playful touch. The coin relates directly to finance, while the map symbolizes being lost, making the visual metaphor easy to understand.
The written content is short, approachable, and reassuring. The headline “Lost your way?” uses a conversational tone to make the error feel less intimidating. The supporting text, “Don’t worry — your money hasn’t gone anywhere. Let’s get you back on track,” directly addresses the user’s biggest fear while encouraging them to move forward. The page then offers clear actions: a primary button, “Back to Dashboard,” which quickly redirects users to a safe and familiar space; a secondary button, “Help & Support,” which connects them to guidance; and a small link, “Still stuck? Chat with us,” that ensures human support is always available.
Overall, the design is functional, visually appealing, and aligned with the tone expected from a finance organization. It reduces user frustration through a mix of friendly visuals and reassuring language, while maintaining professionalism through consistent use of calming colors and clean typography. This ensures that even in the case of an error, the user experience remains positive, trustworthy, and solution-oriented.
Tools used
From brief
Topics
Share
Reviews
1 review
For people who live in or dabble with blockchain, cryptocurrency, meme coins, or tokens, I’d agree 100% with your project description. These were born as a rebellion against fiat or conventional currency that carries strictness, seriousness, and a need to maintain high trust. Fiat is “real” money, you can hold it, store it in a bank, withdraw it, and sometimes it can even decide matters of life and death. For example, a money transfer failing when someone needs to pay for medicine or hospital bills. In that moment, I wouldn’t want to see a playful UI.
But playful interfaces also have a purpose. They grew with the rise of digital money, where paper cash turned into numbers on a phone screen that you can check anytime without going to an ATM. The seriousness was still there, but the tone was already lighter. Then came crypto, coins, and tokens, which leaned into playfulness even more. For that space, the kind of interface you designed, Norin, feels right. Maybe you could also mention who exactly this finance app is aimed at.
Now onto the copy. I find it a little intimidating 😥 First there is the big red question mark, then another one in the headline “Lost your way [question mark]” As if I wasn’t already lost and a little worried. Maybe just keep one question mark? The illustration works and fits, but the balance could be better. If the coin were closer in size to the brochure element, that would already be enough.
Following the headline “Lost your way?” if it went straight into “Don’t worry, let’s get you back on track” that would be enough. But then you add an em dash that re-centers the message on the money, which makes the worry return. My reaction becomes, “I thought I was just lost, now my money is involved too?” In real finance, errors like that are extremely unlikely (I hope!) because systems are checked and rechecked. What might fail instead is a marketing page, an info section, or a dashboard link that breaks.
One more note on the final line. “Still stuck? Chat with us.” can feel like the error might keep happening. It might be enough to point people to the “Help & Support” button, or you could rephrase it as “Chat with support” so it feels straightforward and reassuring.
Still, I really like the visual implementation. The colors are nice, the hierarchy is clear, and the page feels approachable. Nice work, Norin!
You might also like
Test project 1
Grammarly sign-up accessibility optimization
Turning a Notion Resource into a Live Website
Color System
MindNest Color System
Dark Mode Design for Music App
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn