Narrative Design Case Study

SpellStep

Story-first productivity — narrative systems as emotional scaffolding.

Role Lead UX Researcher & Designer
Platform Figma Prototype
Type Gamified Task Management App
Narrative Design UX Writing Companion Systems Emotional Scaffolding

The Narrative Problem

Traditional productivity apps treat tasks as data — items to check off, streaks to maintain, metrics to optimize. For neurodivergent users, this framing creates emotional friction: missed streaks become shame, long lists become overwhelm, and the app becomes another thing they're failing at.

SpellStep's narrative challenge was to design a system where story replaces punishment — where progress feels like discovery, not obligation.

Narrative Architecture

The core narrative conceit: your tasks are quests, and your world responds to you. This isn't a skin — it's a structural decision that shapes every interaction.

Companion Voice Design

The AI companion speaks with affirmation, not pressure. Its voice was designed to feel like a kind friend, not a productivity coach. Key writing rules:

Story-Based Streaks

Traditional streaks punish absence. SpellStep's streaks are narrative continuity — consecutive engagement unlocks new chapters, character dialogue, and world details. Missing a day doesn't break anything; it pauses the story. The world waits for you.

This reframes the motivation loop: players return not because they'll lose progress, but because they're curious what happens next.

Narrative Progress Map

Each completed task doesn't just increment a counter — it reveals a piece of the story world. The progress map is a visual narrative, not a chart. Users see their journey as a landscape unfolding, with each task adding texture, color, or story fragments.

Writing Principles

  • Kindness over accountability — The system never asks "why didn't you?"
  • Curiosity over obligation — "Something new appeared in your world" beats "You have 3 tasks due"
  • Adaptability over consistency — Voice shifts with user energy; high days get excitement, low days get warmth
  • Dignity over infantilization — Supportive without being patronizing; the user is the hero, not the patient

Key Learnings

View Full UX Case Study →