Vault - 404 page error

The scenario

You’re a UX designer at a finance organization which can include a bank, an investment firm, or a fintech company. Your goal is to strike a balance in the finance platform’s interface and copy, blending respect and professionalism with friendliness and support.

Your task

Select a platform and the device type for your design.

Design a helpful 404 error page for any platform.

Ensure it's functional and provides a solution.

Make it visually appealing.

Maintain the brand voice and style expected from a finance organization.

Explain the rationale behind your 404-error page design.

Use the provided mobile or desktop templates to showcase your designs

My Process

1 - Determine a brand - Vault, a new , digital first bank, trying to disrupt the market

2 - Define the brand - Vault

A name that feels both secure and cutting-edge — where your money isn’t just stored, it’s working for you.Short. Memorable. Digital-first.

Brand Personality:

Straight-talking. Future-facing. Relatable.

Straight-talking – says what it means, no financial fog

Future-facing – tech-smart, but human-led

Relatable – not a suit and tie, but a trainer and tee

With the modern twist, and considering the role AI would naturally play, I added the idea of an assistant and decided that would best allow a personality to come through as a robot character that could take personal accountability for the system (as it would with financial management etc)

3 - Define a Tone of voice: Bold but approachable. Think: the cool financial coach who knows their stuff but doesn’t preach.

4 - Align with a Typograpy

Modern sans-serif (Manrope)

5 - Create elements of a basic 404 layout

Explain what happened

Make users crack a smile

Put some effort into the copy

Add on-point visuals

Guide users to your best content

Make the CTA stand out

Provide a search input

Represent your brand

Avoid clutter

Don't go overboard

Integrate interactivity

7- Define a logo (modern, a reaction to traditional banking brands) and used these colours as a base palette for the design.

8 - outline a simple 404 wireframe

9 - Added content and writing to match the style and brand outlined above.

Note - I removed the popular pages links as these did not feel more useful than the search / homepage link and kept the page simpler.

10 - Refine the final design -

11 - I added the idea that the creation of a 404 error would generate a ticket to be investigated (no promise of a fix) which would give confidence to the user that Vault were proactive, approachable and responsible. This was easier to do with the robot character being the focal point of responsibility for this action.