Daily Design Challenge

Design Quest

Design Quest

Design Quest

Gamified UX/UI Learning App

Gamified UX/UI Learning App

Gamified UX/UI Learning App

2026

2026

2026

How do you get designers to consistently practice their craft every day without it feeling like work?

How do you get designers to consistently practice their craft every day without it feeling like work?

I designed Design Quest, a gamified UX/UI learning app that turns daily micro-challenges into an addictive RPG adventure, earning XP and leveling up through real design knowledge.

I designed Design Quest, a gamified UX/UI learning app that turns daily micro-challenges into an addictive RPG adventure, earning XP and leveling up through real design knowledge.

2-Week sprint

Figma • Framer

Mobile

Gamification

THE APPROACH

Make learning feel

like a Pokémon game

Make learning feel like a Pokémon game

Combine the nostalgic loop of Pokémon exploration with micro-learning: roam a pixel-art design world, collect tools, trigger 30-second knowledge challenges.

THE PROBLEM

Learning design

feels like homework

Learning design feels like homework

Most UX/UI resources are long-form, courses, books, articles. Designers either binge and forget, or never start. No low-friction daily habit builds real knowledge.

THE CONSTRAINT

Short lessons with

Zero commitment anxiety.

Short lessons with zero commitment anxiety.

A session can be completed in under 5 minutes. XP and streak calibrated so a single correct answer, even on a bad day, keeps the streak alive.

INTERACTIVE

Tap it.

It's live.

Tap it.

It's live.

Tap the “Get Started” button

DESIGN DECISIONS

Three choices that define

the experience

Three choices that define the experience

Three choices that define the experience

PIXEL ART + MODERN UI

PIXEL ART + MODERN UI

PIXEL ART +

MODERN UI

XP 25/100

Tools 1/5

Lv 1 - Design Town

01

01

01

Pixel world meets modern UI

Pixel world meets modern UI

The pixel-art world creates immediate nostalgia, it signals "this is a game, not a course." But UI panels use modern design: clean Inter type, soft shadows, cream cards.

The contrast is intentional: you're in a fun world, but the learning is real.

Aesthetic coherence over visual consistency

02

02

02

Streaks that reward minimum viable effort

Streaks that reward minimum viable effort

Most streak systems punish inactivity. Design Quest rewards the lowest-commitment action, collecting one tool and answering one question. This keeps the habit alive on busy days, then rewards deeper engagement with larger XP. The streak is a safety net, not a pressure point.

Behavioral design: variable reward loop

STREAK + XP SYSTEM

STREAK + XP SYSTEM

STREAK + XP SYSTEM

Collect All Tools

Collect All Tools

Collect All Tools

+125 XP

Progress: 1/5

Start Quest

CONTEXTUAL LEARNING

CONTEXTUAL LEARNING

CONTEXTUAL LEARNING

03

03

03

The tool IS the lesson

The tool IS the lesson

Instead of quiz menus, challenges are embedded in gameplay: find a "Color Theory" tool, get a color-theory question.

Context gives content meaning.

The player understands why they're being asked, they discovered an artifact.

Learning feels found, not assigned.

Context-triggered learning = better retention

Accessibility in mind

from day one.

Accessibility in mind from day one.

All interactive elements meet 44×44px touch targets, quiz answer buttons use color AND icons (✓ / ✗) to communicate state, never color alone, for colorblind users. Typography uses Inter at 14px+ for all body copy. Contrast on cream cards validates at 7.2:1 (exceeds AA). D-pad supports keyboard arrow keys.

All interactive elements meet 44×44px touch targets, quiz answer buttons use color AND icons (✓ / ✗) to communicate state, never color alone, for colorblind users. Typography uses Inter at 14px+ for all body copy. Contrast on cream cards validates at 7.2:1 (exceeds AA).

D-pad supports keyboard arrow keys.

WCAG 2.1 AA

4.5:1 CONTRAST

44PX TOUCH TARGETS

KEYBOARD NAV

COLOR + ICON FEEDBACK

What worked

What worked

Pixel art / modern UI contrast created instant personality.

Contextual challenge mechanic made learning feel embedded in the game loop, not bolted on.

Designing streaks around minimum effort removed commitment anxiety.

What I'd do next

What I'd do next

I would design the Avatar Builder fully to use identity investment a key retention mechanic.

Build Level 2 to test if the level-unlock mechanic drives Level 1 completion.

Design a streak recovery path. This is currently the #1 drop-off point in habit apps.

© 2026 rickyroacho. All rights reserved.

© 2026 rickyroacho. All rights reserved.