UX/UI Design · Interactive Narrative

Redress

A Twine-based educational game teaching Asian American civil liberties history through player-driven narrative.

Role UX/UI Designer & Interaction Developer

Platform Twine (SugarCube) + Figma

Partner Prof. Lien Tran · Full Spectrum Features

Audience High school & college students

UX/UI Design Interaction Development Historical Narrative Serious Games Affective Design

Overview

Redress is an interactive narrative game designed to teach students about Japanese American incarceration during WWII — built in partnership with Prof. Lien Tran and Full Spectrum Features as part of a public history research initiative.

The game places players in the role of a library researcher uncovering archival evidence of Executive Order 9066. Rather than presenting history as fact to absorb, Redress makes it experiential — players make choices, navigate characters, and sit with the weight of what they find.

My role spanned the full design-to-implementation pipeline: conceiving the dialogue system, wireframing the UI, and building the interaction layer directly in Twine using SugarCube macros, custom CSS, and JavaScript.

Design Goals

Make historical information experiential through player choices and consequences
Avoid trauma voyeurism — center resilience, context, and redress instead
Design character-driven dialogue that shifts layout and tone per speaker
Deliver educational content through gameplay, not exposition
Build a system that could scale to additional characters and scenes

Building the Dialogue System

Redress's narrative depended on character-driven dialogue where the portrait, name tag, and layout shift based on who's speaking. I designed and implemented this switching logic in Twine using SugarCube macros, custom CSS, and step-based state management — treating the dialogue system as both a UX pattern and a piece of interaction architecture.

Twine isn't built for this level of transition. I built it anyway — starting from a sketch, ending with a working fade-in/fade-out character switch system that Twine has no native support for.

Initial Concept

Figma concept sketch of the Redress dialogue box system showing character portrait, name tab, and dialogue area layout

Figma concept sketch — dialogue box layout with character portrait, name tab, and text area

Implemented — Character Switching in Action

Live Twine game showing Erika's dialogue box — character portrait on left, name tab at top, dialogue text on right with Next button

Erika's dialogue box — mentor character, warm layout

Live Twine game showing Skyla's dialogue box — different character portrait and name tag, demonstrating the character switching system

Skyla's dialogue box — layout and portrait adapt to speaker

Live Twine game showing Benji's dialogue box with inline player variable $patron01_Name Simon rendered in narrative prose, demonstrating dynamic name substitution

Benji's dialogue box — inline player-facing variables ($patron01_Name) render dynamically in narrative prose

Passage Architecture & Code

Twine passage map showing branching node structure with Continue, Next, and Dialogue Continues passages — custom CSS visible in Story Stylesheet panel

Twine passage flow — reset step logic on entry, dialogue-wrapper components, continuation branching

Twine editor showing Story Stylesheet with .box-text CSS class, Story JavaScript with jQuery UI bar removal, and passage code with SugarCube macros

Custom CSS (flex portrait layout, italic text), SugarCube step counter, JS overrides removing default Twine UI chrome

Full Contributions

Designed the full dialogue UI system in Figma — portrait layout, name tab, text area, fade transitions
Implemented character-switching dialogue in Twine using SugarCube macros and step-based state management
Built custom CSS for dialogue-wrapper flex layouts and portrait positioning
Created fade-in/fade-out transitions between dialogue states — not natively supported by Twine
Designed and implemented a dynamic variable system for player-facing character names rendered inline in prose
Wrote JavaScript overrides to remove Twine's default UI chrome for a clean game experience
Designed progress indicators, player memory trackers, and a Codex-style Historical Glossary
Collaborated on narrative tone and branching story design with Prof. Tran's team

Document Analysis System

Beyond the dialogue system, I designed the full document analysis experience — the core gameplay loop where players examine real archival evidence. This included companion-guided onboarding, annotated document views, question overlays, feedback states, and a completion screen.

Redress wireframe showing elephant companion character introducing the document analysis task with dialogue bubble on dark background with sidebar navigation

Companion onboarding — elephant character guides players into the document analysis task

Redress wireframe showing document analysis screen with historical document on left, question overlay in center, and navigation sidebar on right

Document analysis view — historical document with question overlay, sidebar navigation (Map, Inventory, Save, Restart, Settings, Resources)

Redress wireframe showing first feedback state after answering a document analysis question

Feedback state 1 — response to player answer

Redress wireframe showing second feedback state with additional contextual information

Feedback state 2 — additional historical context

Redress wireframe showing completion screen after finishing a document analysis module

Completion screen — end of document analysis module

Codex — Government Officials Directory

Players can access a reference directory of historical figures while playing — giving context without breaking narrative immersion. I designed the codex as a diegetic UI element: something that exists within the world of the game.

Redress wireframe showing the Government Officials codex screen — a two-panel layout with a historical letter on the left and a directory of official portraits and names on the right, with sidebar navigation

Government Officials Directory — in-game codex for historical figures referenced in archival documents

Tooltip & Onboarding System

I designed a 7-state tooltip flow to guide first-time players through the document analysis interface without interrupting the narrative. Each state progressively reveals a different UI element.

First tooltip state showing initial UI guidance overlay on the document analysis screen

Tooltip state 1 — initial orientation

Third tooltip state showing progressive UI guidance revealing additional interface elements

Tooltip state 3 — progressive reveal

Figma Prototype

Full UI/UX mockups for the Redress interface — all wireframe states, dialogue variations, tooltip flows, and navigation.

View Figma Prototype →

Reflection

What I'd do differently: build in time for real usability testing on the document-analysis flow before it ships to classrooms. The interaction design was validated through internal design review with Prof. Tran's team, not by the students who'll actually use it — and a system this dependent on tooltip sequencing and dialogue pacing deserves to be tested against people encountering it cold.

Impact

Redress was part of a larger public history project with Full Spectrum Features, meant to preserve underrepresented stories and build educational tools that land emotionally and cognitively. The interactive teaching tool was designed to enter classrooms across the country — making this one of the few projects in my portfolio with a direct path to real-world educational deployment.