404 Error - Nexus Bank
A young entrepreneur is deciding which bank is best to get a loan for their new startup. They start browsing and discover a 404 error page. They are delighted to see useful links and a solution to their problem.
Before I decided the direction of this project, I used ChatGPT to quickly come up with 10 different names for Fintech companies. NexusBank stuck out to me. I went with a banking company.
I started looking at other banks. But it was really hard to find the error pages. Sure, I could Google, but it didn't give me enough results that were relevant and up to date. I used used a site crawler tool, Screaming Frog, to find the 404 error pages. I was delighted to find out that it actually works and was able to collect the valuable information needed for this project. It was really cool to find these hidden gems, even huge international websites have errors.
Here are my results (I live in Malaysia). I have two banks that are local and two other banks that are international. The results vary, but are mostly consistent. I see that they are all professional. No piggy banks. Just the needed information.
I took the research and came up with the copy.
For the branding, most banks use Red or blue. I chose red. They also used wordmark logos with sans-serif font. I quickly put together a banking logo. I stole from each site bits and pieces until I was happy with the UI.
In my copy, I used a red box with 'page not found' to grab their attention and state the clear problem. Under it I apologized for the inconvenience. Some solutions were given that could trigger this error. I then gave two button options, one to go back to the homepage, and another to talk with an agent. There are other useful links below that could be related to the URL they were trying to reach.
At the end, a professional, sleak and strong 404 error page was created to please banking customers with the information they needed and to be on their way.
Iterations
- FAQ’s caret was added for progressive disclosure
- '404 Error' was added to show what kind of page it is
- '404 Error - Page not Found' was bolded to help with accessibility
- Hierarchy in the font (There may be several possiblities…) to give more structure
Tools used
From brief
Topics
Share
Reviews
2 reviews
Hey Waseem, this is a really nice touch to a 404 page. Very unconventional and devoid of the usual prominent “404” text on most pages. I like that you added useful links and info as well but that might be a little overwhelming for some users as they might be in distress trying to find a particular page and providing all this info at that point might cause cognitive overloads.
To still keep the current direction, maybe consider switching up the hierarchy a little bit making the “page not found” banner more prominent. Aside using the red color you can use size to make it more prominent for color blind users. Also consider a supporting icon if you don’t want to a full blown illustration or graphic.
The links can be reworked also maybe, dropdown like categories like FAQs to have some progressive disclosure or a simple search system.
Nonetheless this is a unique approach to a 404 page and I commend you for this. Cheers!
Great job, Waseem! I like your care about the user experience when one reaches a not found page. This is usually a page designers don't care so much, but it's important because it's something that can disappoint the user. But you put everything to help the user go back to the desired journey.
I would only change something in the mobile version, move the column Other Links to below Business Links.
I am curious about why you didn't use "404" anywhere on the page. It's not necessary, just usual, so it's not a bad thing, it can be good (start a trend of using only relevant messages and not codes on error pages), but that made me curious.
You might also like
Ithnain Management System
Jeel app website wireframes
2 PAY
Visit Sri Lanka Mobile App
Design Workshop Plan
ShopUs Microcopy
Content Strategy Courses
UX Writing
Common Design Patterns
Reducing User Churn