404
Oops - Be Right Back!
An UX and UI study case for a custom 404 pages!
🎯 Introduction
Why small UX moments matter.
Even moments of friction - like encountering a 404 page - can become opportunities to build brand personality, reduce user frustration, and reinforce connection.
In this project, I designed a playful 404 page using the brand mascot in a very literal "Under Construction" inspiration, transforming a potentially negative experience into a memorable, human one. Just look at his cute little unifform!!!
01
Intro
02
(STAR - Situation)
🛠️ Challenge (STAR - Situation)
Quick context of the problem.
-
Designing a portfolio entirely by oneself is hard and time consuming, so, sometimes, there are pages and components under construction that needs addressing.
-
Default 404 pages and incomplete components might feel robotic and increase bounce rates.
-
The brand has a mascot, so why not use it to stenght branding?
-
Goal: Make the 404 pages fun, friendly, and functional!
🧠 Thinking (STAR - Task)
Illustration with Intention!
-
Ease Frustration: Users must not feel lost or angry. They need to unsderstand why some pages are not complete or missing parts (even for very short time).
-
Brand Consistency: Integrate the mascot naturally, not forcibly.
-
Encourage Continuation: Offer users clear next steps.
-
Keep it Lightweight: Fast loading even with visuals.
03
(STAR - Task)
✏️ Approach (STAR - Action)
1. Tone Definition
-
Tone: friendly, empathetic, anime-like and playful.
-
Microcopy focuses on acknowledgment, not blame.
04
(STAR - Action)
-
Tone Definition
-
Mascot Design
-
Navigation Recovery
-
Mobile and Accessibility Considerations
2. Mascot Design
-
Designed the mascot in a "😅" vibe, inspired by manga characters.
-
Made sure mascot colors and clothing matched the page mood.
3. Navigation Recovery
-
Clear primary button: "Home" and "Product Design" (visible and accessible)
4. Mobile and Accessibility Considerations
-
Mobile: element group resises responsively (no overlap or scroll traps).
-
Keyboard navigation for all buttons/links.
-
Alt text: " ."
05
(STAR - Result)
✨ Result
Cute and fun!
-
Session continuation increased - more users clicked to "Home" or "Categories."
-
Brand affinity comments appeared organically in user feedback:
-
"The little mascot made my day, even though I was lost for a second."
-
Mascot 404 became a small but memorable touchpoint that deepened brand personality.
➡️ User flow
Simple userflow on FigJam:
💻 Navigate!
Click here to check the 404 page.
Mockup right bellow:
🚧 Oops! Working on it!
Pardon the dust! 😅 This page is getting a tune-up, we'll return with cool new content soon. Come back shortly! =)
