00
A North Star for Serious Games & Learning Design

Unlocked: Keys to Digital Games

Educational tools often feel like homework disguised in corporate dress. Great serious games feel like instruments: tactile, emotionally resonant, and designed around intrinsic curiosity.

01 • FRAMEWORK

MDA & Player Experience

Bridge the communication gap between product goals and player emotion using Mechanics, Dynamics, and Aesthetics.

02 • ONBOARDING & RETENTION

First-Time Experience (FTUE)

FTUE (First-Time User Experience): Why the first 5 minutes belong to curiosity, intuitive verbs, and rapid dopamine wins—not 12-step tutorials.

03 • GAME FEEL

Juice, Celebrations & Failure

Multi-sensory feedback: micro-sensations, joyful victory cascades, and constructive frictionless failure.

04 • STORY

Narrative Context

Stakes and roles over passive lore. How kinetic revelation makes complex subject matter stick.

05 • ARCHITECTURE

Technical Accessibility

16:9 letterbox canvases vs. fluid responsive HUDs, one-handed play, and sensory control guardrails.

06 • MOTIVATION

Loops & Psychology

The nested rhythm of Micro (seconds), Macro (session), and Meta (identity) loops paired with safe failure.

01
PILLAR 01FOUNDATIONAL TAXONOMY

MDA & Player Experience

The MDA Framework (Mechanics, Dynamics, Aesthetics) provides a shared Rosetta Stone between Product Managers and Game Designers.

M
Mechanics: Concrete coded rules, verbs, jump velocities, countdown limits, and economic costs.
D
Dynamics: Emergent behaviors over time—scarcity panics, social bluffing, and risk trade-offs.
A
Aesthetics: The resultant emotional resonance (the 8 kinds of fun: Challenge, Fantasy, Discovery, etc.).
Case: Spent (playspent.org)
INTERACTIVE PERSPECTIVE LENS

The Critical Asymmetry

MechanicsRules & Math
→
DynamicsSystem Pressures
→
AestheticsEmotional Experience
Designer's Vector (M → D → A): You start by crafting concrete rules & parameters (e.g., wallet limits, time decay), anticipating how they interact over time into system pressure, which ultimately elicits player emotion.
02
PILLAR 02 • ONBOARDINGFIRST-TIME USER EXPERIENCE (FTUE)

First-Time Experience & Onboarding (FTUE)

FTUE (First-Time User Experience) defines how players discover, learn, and fall in love with your game in the critical first 60 to 300 seconds. Great onboarding is built on immediate kinetic autonomy, not wall-of-text tutorials.

01
"Show, Don't Tell": Eliminate upfront instruction manuals. Drop players straight into an intuitive action with an instantaneous, juicy reaction.
02
"One Verb at a Time": Introduce a single input verb (tap, swipe, choose), validate success with a quick win, then layer complexity incrementally.
03
Contextual Companions: If characters guide the player (e.g., Greg in Hay Day, or Professor Skye in Google's AI Quests), make dialogue brief, active, and anchored directly to the task — one mentor carrying all instruction keeps tutorial text out of the UI chrome entirely.
FTUE ANATOMY • THE FIRST 60 SECONDS

Zooba vs. Hay Day First-Time Walkthrough

ZOOBA (ACTION)

Zero-Menu Cold Start

No account creation, terms modal, or loading gates. The app renders the 2D battlefield immediately on first launch.

HAY DAY (CASUAL SIM)

Friendly Avatar Greeting

Greg greets you with a warm dialogue bubble, immediately framing your agency as the caretaker of a living farm.

03
PILLAR 03TACTILITY & SENSORY ARCHITECTURE

Game Juice & Micro-Feel

Game Feel is how responsive controls are in a raw prototype. Game Juice is the multi-sensory layer on top: sound synthesis, screenshake, particles, squash & stretch.

⚡
Proactive Harmonic Audio: Short, snappy UI soundbites that step up in musical pitch during combo streaks to reward momentum and tactile rhythm.
💥
Physical Button Deformation: Spring physics on tap, particle sparks on impact, and subtle camera impulses that make 2D pixels feel tangible.
🛡️
Sensory Safety Guardrails: Always provide a toggle for Reduced Motion (zero camera shake) and separate volume sliders for SFX and Music.
TACTILE JUICE SANDBOX

Interactive Game Feel Sandbox

STREAK COMBO x0
03A
PILLAR 03A • CELEBRATIONVICTORY CHOREOGRAPHY & DOPAMINE

Celebrating Success & Joyful Wins

Progress without fanfare feels hollow. Great games choreograph achievement into multi-layered victory moments that fuel intrinsic motivation.

🏆
Tiered Victory Choreography: Scale feedback to the scale of the feat: minor chimes for routine clicks, multi-toned fanfare chords & confetti storms for breakthrough milestones.
✨
Dopamine Multipliers: Cascading visual counters, floating score badges, and shimmer halos convert abstract success into unmistakable psychological delight.
👑
Milestone Permanence: Pair ephemeral confetti blasts with persistent trophies or unlocked capabilities that affirm player identity and mastery.
VICTORY CASCADE SIMULATOR

Triumph & Celebration Choreography

SESSION SCORE2,500

Insight: Graduated feedback anchors milestone triumphs. Small interactions get crisp 50ms chimes, while major milestones unlock full sensorial celebrations that reward persistence.

03B
PILLAR 03B • RESILIENCESAFE FAILURE & FLOW PRESERVATION

Constructive Failure & Graceful Friction

Failure in games should be an informative bump in the road, not a punishment. Friction must generate learning and curiosity, never frustration fatigue.

🔄
Zero-Friction Instant Retry: Never lock players behind 5-second "Game Over" loading screens. Reset the state in under 100ms so trial-and-error remains effortless.
🌱
Soft Audio-Visual Feedback: Replace abrasive alarm buzzers with gentle bass thuds and soft camera wobbles that signal missteps without inducing anxiety.
💡
Psychological Safety: Frame failure as scientific experimentation. Removing punitive penalties keeps learners in their optimal flow zone.
GRACEFUL FAILURE LAB

Punitive vs. Constructive Feedback

LIVES: ❤️ ❤️ ❤️ SAFE TRIAL-AND-ERROR

Click the button below to test a high-stakes move:

Constructive UX Design: When failure is instantaneous and gentle, players treat mistakes as diagnostic experiments. Flow state is preserved and retention stays high.

04
PILLAR 04MEANINGFUL CONTEXT & STAKES

Narrative Context & Stakes

Serious games fail when they drown players in encyclopedic lore. Meaningful narrative is about giving the player a clear Role + Stakes + Conflict.

📖
Interactive Revelation: Scrolling, dragging, and wiping fog to unveil narrative layers transforms passive reading into active exploration (e.g. The Boat).
🎭
Inverse Roleplay: Adventures With Anxiety! puts the player in control of the protagonist's anxiety wolf, teaching CBT self-talk mechanics through agency.
⚖️
Consequential Dilemmas: Spent proves that simple math constraints convey the raw panic of poverty far better than a 50-page whitepaper ever could. Google's AI Quests pushes this further: the nomads’ packable campsite is itself the argument for diverse training data.
INTERACTIVE DIALOGUE SANDBOX

Adventures with Anxiety Sandbox

Rising Concern (Doubts)
ANXIETY (INTERNAL CRITIC):
"Look at their faces... they seem skeptical. If you stumble on this slide, they will doubt your competence."
35%
💡

Narrative Design Key: In games like Adventures With Anxiety, emotional tension is kinetic—higher anxiety distorts the camera vignette, accelerates heartbeat sound, and skews the dialogue choices.

05
PILLAR 05ARCHITECTURE & HARDWARE RESILIENCE

Technical Accessibility & Inputs

Mobile context is messy: one-handed thumb navigation, fluctuating aspect ratios, noisy environments, and low bandwidth.

📐
16:9 Letterbox Canvas vs. Fluid Responsive: Serious web games should fix their simulation canvas to a resilient 16:9 viewport (e.g., Phaser/PixiJS) while letting outer UI HUD elements adapt fluidly.
📱
One-Handed / Thumb-Zone Ergonomics: Primary interaction targets must live in the lower bottom third of the screen, away from top corner stretch zones.
👆
Subtitles & Dual-Channel Encoding: Never communicate essential game state solely through audio or solely through color. Pair sound cues with visual stamps and haptics.
VIEWPORT SCALING SIMULATOR

16:9 Canvas vs. Fluid HUD

SCORE: 1,420TIME: 01:24
✈️
STATUS: OPTIMAL16:9 CANVAS

16:9 Letterboxed Canvas: Game coordinates remain mathematically consistent across all tablets, laptops, and foldables. Zero UI cropping.

06
PILLAR 06ENGAGEMENT LOOPS & PSYCHOLOGY

Core Loops & Player Psychology

A game is an engine of concentric feedback loops operating across different timescales: seconds, minutes, and days.

🔁
Micro-Loop (1 - 10 Seconds): Immediate kinetic verb: tap, solve puzzle piece, harvest crop. Generates instantaneous tactile gratification.
📦
Macro-Loop (3 - 15 Minutes): Session objective: complete a level, earn crafting currency, unlock a new recipe or learning unit.
🏛️
Meta-Loop (Days / Weeks): Long-term identity & mastery: skill tree advancement, social contribution, community ranking, or behavioral change.
🛡️
Safe Failure Psychology: Keep failure frictionless. Instant retries without loading screens prevent player frustration fatigue.
NESTED LOOP ARCHITECTURE

Concentric Loops Simulator

META • Weeks
MACRO • Minutes
MICRO • Seconds
1 - 10 SEC

Micro-Loop (1 - 10 Seconds): Kinetic Action

The core input verb. Tap, swipe, slice, answer. Must deliver sensory juice within 50 milliseconds to hook immediate attention.

🎮 Real-world Example: Slicing a fruit in Fruit Ninja, dragging ripe wheat in Hay Day, or matching 3 gems in Candy Crush.
07
RESOURCE SHELFCURATED PAPERS, TALKS & FRAMEWORKS

Curated Knowledge & Case Studies

Deep-dive references across game design, cognitive science, and user research. Filter by design pillar or search by keyword.

MDA & Player ExperiencePaper

MDA: A Formal Approach to Game Design and Game Research

Robin Hunicke, Marc LeBlanc, Robert Zubek (2004) • 15 min read

The seminal academic paper establishing the Mechanics-Dynamics-Aesthetics framework that unifies designer intent with emergent player emotions.

Open Source
MDA & Player ExperienceTalk

The 8 Kinds of Fun: Practical Aesthetics in Practice

Marc LeBlanc (GDC) • 25 min video

Deep dive into taxonomy of fun (Sensation, Fantasy, Narrative, Challenge, Fellowship, Discovery, Expression, Submission) and how to design for specific emotional targets.

Open Source
MDA & Player ExperienceCase Study

Spent: Financial Scarcity & Systemic Empathy Through Mechanics

McKinney & Urban Ministries of Durham • 10 min interactive

How simple numerical subtraction mechanics translate directly into visceral anxiety and systemic understanding of poverty.

Open Source
MDA & Player ExperienceCase Study

AI Quests: Teaching a Technical Process Through Mechanics Alone

Google Research × Stanford Accelerator for Learning (2025) • 20 min play

Students collect, judge and clean real-world data, then train and test a flood-prediction model. Bad inputs produce a bad model and a failed warning — the lesson is delivered entirely as consequence, never as exposition. The reference implementation of MDA applied to education.

Open Source
FTUE & OnboardingArticle

The First 5 Minutes: Why Players Churn Before the Tutorial Finishes

Deconstructor of Fun (Michail Katkoff) • 12 min read

An analysis of mobile onboarding funnels, cognitive friction, and how top-grossing titles hook players before introducing complex meta-systems.

Open Source
FTUE & OnboardingTeardown

Zooba vs. Hay Day: Cold Starts and Immediate Agency

Game Analytics & UX Review • 8 min read

Contrasting the zero-menu action onboarding of Zooba against the warm, narrative-paced character introduction of Hay Day.

Open Source
FTUE & OnboardingGuide

Designing Without Words: The Nintendo Philosophy of Level 1-1

Mark Brown (Game Maker's Toolkit) • 14 min video

How Shigeru Miyamoto designed World 1-1 to teach running, jumping, mushroom powerups, and enemy hazards without a single dialogue box.

Open Source
FTUE & OnboardingArticle

Pedagogical Agents & Story-Based Learning: The Research Behind AI Quests

Victor Lee, Kristen Blair, Ibrahim Adisa (Stanford Accelerator for Learning) • 10 min read

Why a single in-world mentor beats a tutorial overlay: active learning, story framing, pedagogical agents, and mini-assessments arranged as a loop where players "grapple with a challenge, see the impact of that solution, and then revise their understanding."

Open Source
Game Juice & Micro-InteractionsTalk

Juice It or Lose It: Turning Boring Prototypes into Joy

Martin Jonasson & Petri Purho (Nordic Game) • 15 min video

The legendary talk demonstrating how adding tweening, screenshake, particle bursts, and melodic audio turns a dull breakout game into pure kinetic delight.

Open Source
Game Juice & Micro-InteractionsTalk

The Art of Screenshake & Game Feel in Nuclear Throne

Jan Willem Nijman (Vlambeer / GDC) • 20 min video

30 concrete micro-rules for game feel: sleep frames (hitstop), muzzle flashes, dynamic recoil, weapon offsets, and camera springiness.

Open Source
Game Juice & Micro-InteractionsBook

Game Feel: A Game Designer's Guide to Virtual Sensation

Steve Swink (Morgan Kaufmann) • Book / Reference

The authoritative academic and practitioner text on tactile perception, input-to-response latency, and motor resonance.

Open Source
Narrative Context & StorytellingInteractive

The Boat: Kinetic Parallax Graphic Novel for SBS Australia

SBS Interactive (Matt Huynh & Nam Le) • 20 min interactive

A masterclass in scroll-driven storytelling, audio atmosphere, and kinetic typography capturing the harrowing journey of Vietnamese refugees.

Open Source
Narrative Context & StorytellingInteractive

Adventures With Anxiety: Inverted Roleplay & Mental Health

Nicky Case • 30 min interactive

An open-source interactive game where you play as the protagonist's anxiety wolf, exploring cognitive behavioral therapy and emotional literacy.

Open Source
Narrative Context & StorytellingTalk

Environmental Storytelling & Narrative Mechanics in Hades

Greg Kasavin (Supergiant Games / GDC) • 45 min talk

How Supergiant intertwined narrative progression with roguelite permadeath so that dying always yields conversational rewards.

Open Source
Technical Accessibility & ResponsivenessGuidelines

Game Accessibility Guidelines: A Developer Reference

IGDA Game Accessibility SIG • Living Reference

A comprehensive, tiered (Basic, Intermediate, Advanced) checklist for motor, cognitive, vision, hearing, and speech accessibility in digital games.

Open Source
Technical Accessibility & ResponsivenessDemo / Source

The Aviator: Three.js One-Handed Mouse/Touch Flight Demo

Karim Maaloul (Codrops) • 15 min read + Code

Tutorial and open-source WebGL codebase demonstrating responsive viewport handling, simple single-pointer physics, and accessible controls.

Open Source
Technical Accessibility & ResponsivenessArticle

Letterboxing vs. Dynamic Canvas Scaling on Modern Mobile Browsers

Phaser / Nicky Case Open Engine Architecture • 10 min read

Comparing 16:9 fixed ratio canvases against responsive fluid HUD layouts for cross-device consistency and touch target compliance.

Open Source
Core Loops & Player PsychologyArticle

The Anatomy of Core Loops: Micro, Macro, and Meta Progression

Pascal Luban (Gamasutra / Game Developer) • 15 min read

Deconstructing how seconds-level input verbs fuel minutes-level session goals and weeks-level player fantasy identity.

Open Source
Core Loops & Player PsychologyPaper

Self-Determination Theory and the Facilitation of Intrinsic Motivation

Richard M. Ryan & Edward L. Deci (2000) • 20 min read

The psychological foundation of serious games: Autonomy, Competence, and Relatedness as the drivers of deep, enduring human engagement.

Open Source
Core Loops & Player PsychologyCase Study

Safe Failure: How 0.2-Second Restarts Accelerate Learning

Matt Makes Games (Celeste Design Postmortem) • 10 min read

How instant non-punitive respawns remove anxiety, foster psychological safety, and enable players to experiment freely with complex challenges.

Open Source
08
PLAYABLE BENCHMARKSINDUSTRY MASTERCLASSES

Exemplary Game Inspirations

Playable masterpieces that showcase best-in-class execution of our 6 foundational game design pillars.

01 • MDA & ScarcityWeb / Browser

Spent

Created by: McKinney & Urban Ministries of Durham
Why It's a Masterclass

Instead of lecturing users about poverty statistics, Spent forces players to manage a $1,000 budget across 30 days. Mechanics (bills, healthcare emergencies, car repairs) create visceral Dynamics (anxiety, desperation, impossible ethical trade-offs) delivering an Aesthetic of profound empathy. A gold standard in serious game mechanics.

04 • Kinetic NarrativeWeb / Responsive Interactive Novel

The Boat

Created by: SBS Interactive (Matt Huynh & Nam Le)
Why It's a Masterclass

Transforms passive reading into a tactile storm. As the user scrolls down, the web page violently sways like a boat at sea, ink-wash illustrations tear across the screen, storm audio rises in intensity, and words disperse with the wind. Proves how browser scrolling can become a mechanical verb.

04 • Inverted RoleplayWeb / Open-Source (HTML5/Canvas)

Adventures With Anxiety!

Created by: Nicky Case
Why It's a Masterclass

You do not play the human protagonist; you play as their inner anxiety wolf trying to protect them from imagined social dangers. By making the player argue against logic, the game playfully teaches Cognitive Behavioral Therapy (CBT), cognitive distortions, and self-compassion without sounding instructional.

02 • FTUE & OnboardingiOS / Android

Zooba: Zoo Battle Arena

Created by: Wildlife Studios
Why It's a Masterclass

Onboarding masterclass: zero preamble, zero account forms. The moment the app launches, the player is dropped directly onto the battle arena. A giant glowing finger points to a gun on the ground. Tap to pick up, drag to aim. Within 45 seconds, the player eliminates their first bot opponent and earns a victory fanfare.

02 • Contextual GuidesiOS / Android

Hay Day

Created by: Supercell
Why It's a Masterclass

Introduces a friendly, non-intrusive NPC (Greg) who presents one single task at a time with warm conversational dialogue. Uses tactile swipe gestures (dragging the sickle across wheat) accompanied by satisfying bubble-pop audio that immediately hooks sensory attention.

03 • The Game Juice PantheonPC / Consoles

Hades, Celeste & Cuphead

Created by: Supergiant Games, Maddy Makes Games, Studio MDHR
Why It's a Masterclass

Hades demonstrates hit-stop freeze frames and camera punches; Celeste perfects coyote-time jump buffers, dust particles, and squash-and-stretch; Cuphead masters 1930s hand-drawn anticipation frames and brass stingers. Each micro-interaction respects player time and provides dopamine-rich tactile confirmation.

05 • One-Handed PlayWeb / Three.js WebGL

The Aviator

Created by: Karim Maaloul (Codrops)
Why It's a Masterclass

A breathtaking 3D flight experience controlled completely with simple 2D mouse or touch coordinate tracking. Accessible for all dexterity levels while maintaining high visual polish, smooth particle contrails, and responsive viewport sizing.

06 • Game Theory & LoopsWeb / Interactive Explainer

The Evolution of Trust

Created by: Nicky Case
Why It's a Masterclass

Explains Robert Axelrod's Prisoner's Dilemma and evolutionary game theory through interactive coin machines and round tournaments. Shows how repetitive micro-interactions (cooperate vs. cheat) scale into societal meta-phenomena. Includes zero-stakes sandbox exploration.

06 • Escalating Meta LoopsWeb / Incremental Game

Universal Paperclips

Created by: Frank Lantz (NYU Game Center)
Why It's a Masterclass

Starts with a single button: "Make Paperclip". In 3 hours, evolves into an existential exploration of AI alignment, Von Neumann probes, and cosmic resource consumption. Demonstrates the immense psychological pull of tightly balanced, compounding progression loops.

01 • MDA & Serious GamesWeb / WebGL (Three.js, custom toon shader)

AI Quests

Created by: Google Research × Stanford Accelerator for Learning (built by Phantom)
Why It's a Masterclass

Players never read about machine learning — they collect rainfall and river-flow data, judge its quality, then train a model to warn a village before the next flood. Bad data produces a bad model, and the failed prediction is the lesson. A single in-world mentor carries all instruction, so tutorial text never appears as UI.