Special 404 Design | RUIZLAB Portfolio

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)

Recursos

✏️ 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.