Survival Story
Humanizing patient addiction for health professionals with interactive storytelling.
Jan-Mar 2025 | DALI Lab
Jun-Aug 2025 | Freelance (Product & UX Designer)
DALI Team
1 Project Manager
2 Product Designers
2 Software Developers
Skills
Interactive Web Design
Component Architecture
Usability Testing
Deliverables
Design System
Figma Prototype
Timeline
20 Weeks
We created an immersive web experience to help clinicians understand the human realities of opioid use disorder.
BACKGROUND
Content Warning
This project explores addiction and recovery with illustrated narratives, including depictions of violence and substance use.
This was a DALI Lab project with SocialTheory, a startup reimagining Continuing Medical Education (CME) with interactive storytelling. I joined one returning designer in the second term to restructure and refine an early CME prototype on opioid use disorder (OUD). With our developers and the founder, we prioritized narrative and visual cohesion while testing with clinicians. That summer as the sole designer, I integrated actionable clinical interventions into the flow.
PROBLEM
Traditional medical education modules are static and impersonal, detaching clinicians from the human realities of addiction.
To bridge this gap, SocialTheory’s founder envisioned Survival Story as an emotionally resonant visual narrative to humanize patient addiction. It began as an illustrated in-person exhibit, inviting visitors to engage with story panels and character materials.
We set out to evolve this format into a scalable web platform for clinical education and empathy-based learning.
OPPORTUNITY
How might we transform an illustrated addiction narrative into a web experience that engages clinicians at scale?
SOLUTION
An immersive platform where interactive story elements help users unpack patient experiences through a clinical lens.
TERM 2
We standardized interaction patterns, strengthened visual accessibility, and built a scalable design system to grow with new stories and educational content.
PROCESS
RESEARCH
Reviewing Term 1 User Research
Revisiting Clinician Needs
I first reviewed Term 1’s user research to understand clinician needs in continuing medical education (CME).
Term 1 designers had interviewed a physician, a physician assistant, and a first responder who all serve the Dartmouth community. A few core themes emerged around what health professionals value in a CME module.
Respect their time
Clinicians juggle demanding schedules. Learning modules need to be concise, focused, and easy to revisit without dense text or extraneous clicks.
1
Keep it fresh
Clinicians are eager for content that challenges what they already know and presents new insights, not the same material recycled in a different format.
2
Empathy over judgment
Clinicians resonate most with stories rooted in patients’ lived experiences, breaking from the detached tone of traditional training.
3
Term 1 POV Statement
Clinicians need a time-efficient, interactive learning module to support informed and compassionate care for patients with opioid use disorder.
RESEARCH
Auditing Term 1 Prototype
Survival Story's core narrative and visual direction were set to a Figma prototype when I joined the project. While reviewing Term 1 user research and the storyline, I walked through the prototype with the returning designer to assess how well it met clinician needs.
Though the illustrations and storytelling were powerful, design inconsistencies kept the web experience from feeling cohesive. My fresh perspective helped uncover overlooked friction points in the interaction logic and narrative flow.
DEFINE
Friction Points
Where to Click First?
Pulsing character profiles were supposed to convey narrative motivations, while object pulses revealed clinical insights.
Often displayed together on screen, these competing interaction cues created confusion about how to progress, exposing inconsistent hierarchy and feedback.
Dense Text, Unclear Content Hierarchy
Many text boxes were overly wordy or filled with placeholder content, diluting key learning takeaways.
This was compounded by an unclear content structure, particularly in how character pulses were used.
Cue to click on Danielle
Some character pulses described what users would learn by clicking a nearby object pulse.
This redundancy added unnecessary clicks, detracting from the story's immersive intent.
B. Danielle's internal dialogue
But other character pulses contained introspective personal reflections.
These inconsistencies created a disjointed content flow, signaling the need for a clearer, more predictable interaction framework.
Design Fragments
Four designers had split the Term 1 prototype across different story sections without a centralized design system. The result was a patchwork of duplicate components, inconsistent styles and interaction patterns, and uneven text formatting.
This disrupted cohesion and made updating the dozens of illustrated keyframes tedious.
Tedious Help Section
The Help overlay only displayed one slide at a time, while the option to jump between slides by clicking carousel dots was not obvious.
Users could not easily scan for available guidance, making the Help feature inefficient to navigate.
DEFINE
Design Priorities
With our project manager, we distilled these clinician research and prototype evaluation insights into three design priorities that shaped our Term 2 roadmap:
Co-designing with our partner
We partnered closely with SocialTheory’s founder to restructure content in lockstep with interaction logic. Since the written material combined narrative and clinical insights, clarity and readability revisions required careful collaboration to preserve emotional depth.
1
Preparing for meaningful feedback
Given clinicians’ limited availability for usability testing, we wanted to get the prototype to a more polished, cohesive state first so usability sessions could focus on learning outcomes instead of surface-level usability issues.
2
Building for scalability
We made it top of mind to consolidate core components into a unified design system, ensuring visual consistency and seamless iteration for future updates.
3
DEFINE
HMW Statement
Building on Term 1’s foundation, we continued to explore and execute our central guiding question:
How might we transform an illustrated addiction narrative into a web experience that engages clinicians at scale?
IDEATE
Evolving User Flow
We worked with our developers to map a basic user flow that visualizes how clinicians navigate the story, refining it as we simplified steps, clarified transitions, and aligned pacing with learning goals.
This flow became our prototyping reference point, giving us a bird’s-eye view across iterations and aligning design-development updates to keep the narrative intuitive and goal-driven.
IDEATE
Building to Think
Since we began with a more functional prototype, we iterated and restructured elements directly in Figma instead of starting from sketches.
We ideated and prototyped in tandem, mocking up abstract ideas as tangible flows the whole team could react to.
Having a shared hi-fidelity frame of reference sooner in our design process streamlined our feedback loops, helping us move quickly while staying aligned on the overall experience.
PROTOTYPE & TEST
Refining Core Interaction
We set out to make navigation feel intuitive from the first click, so users could explore more smoothly and stay immersed in the story.
Helping Users Retrace Their Steps
Early Term 2 DALI critiques revealed a core issue: users could not easily revisit just-viewed content. The back button jumped to the previous keyframe, forcing them to replay entire sections to review a single detail.
Term 1 designers had already introduced a gray inactive state for pulses that users have clicked.
I saw an opportunity to extend this pattern by repurposing the inactive state as a jump link to revisit content in the same keyframe. This provided a clearer review path without disrupting the story’s sequential flow.
From feedback sessions with our partner and team, we chose a hybrid approach: gray pulses stayed neutral by default, with a yellow hover state to signal that they were clickable.
Try it out!
Hover over the pulses to get a feel for how users revisit content in the story module.
Object Pulse
Character Pulse
We made sure to highlight this feature in the tutorial, and planned to validate if users recognized gray pulses as interactive review points during usability testing.
Defining a Consistent Interaction Language
From our prototype audit, we knew character pulses felt unpredictable. Some text overlays closed after clicking the pulse, while others closed when clicking anywhere on the screen. With lengthy content, this inconsistency made navigation unclear and cognitively tiring.
Old Character Pulse
No clear exit path
Medium-weight body text blurs hierarchy, makes long passages visually dense
Inner Conflict and Desperation
This isn’t what I signed up for. I’m carrying it all—Zach’s struggles, my own, this baby. Telling him about Robert? It’d crush him. He needs to focus on getting clean, not my problems on top. “Some days, I feel like I’m breaking under it—the bruises, the lies, all piling up. But then I look at him, and I remember why I’m doing this. If I can get him through... maybe we both get out.
We worked closely with the SocialTheory founder to realign character pulses with their intended narrative purpose, so content reflected both Survival Story's emotional tone and educational goals.
We broke up character monologues into briefer sections with the same Back/Next progression from object pulse overlays. This aligned narrative and clinical interactions under a single predictable pattern.
New Character Pulse
Predictable navigation reduces cognitive load
Regular-weight body text restores hierarchy and readability
Inner Conflict and Desperation
You’re it, you know that? You’re my way out, my shot at makin’ things right. I’m gonna give you all the things I never got.
Next
Try it out!
Use Back and Next to explore Danielle's thoughts. When the pulse turns gray, click to replay this narrative moment.
In the final prototype, Back/Next navigation enables smoother, more intuitive exploration of multi-character scenes.
Rethinking Help Section
Another friction point from our prototype audit was the unwieldy help section. Users clicked through slide after slide for a single answer, stalling the learning experience.
Term 1 Carousel
Carousel hides most topics
Abbreviated content missing core details
Medium-weight text blurs hierarchy
Narrative Interactions
Click pulsing character icons to uncover inner thoughts and motivations.
Next
Try it out!
Click through the carousel dots - notice that there is no way to preview each slide's content.
We realized the carousel concealed Help's modular structure, and explored how to more elegantly visualize it. We ultimately introduced a menu layout that let users quickly scan for tips and return to the story with minimal disruption.
Term 2 Menu
Card layout makes topics easy to browse at a glance
Jump links reduce search time and distraction from the story
Cleaner text hierarchy guides the eye naturally
Educational Interactions
Narrative Interactions
Playback and Accessibility
Navigation Buttons
Try it out!
You can preview all help topics at once and click any card that sparks your curiosity.
Dev Sync
We partnered closely with developers to define pulse states, sequencing logic, and the behavior of the redesigned Help menu. This alignment ensured each interaction behaved consistently in code and supported the smooth, intuitive navigation we were aiming for.
PROTOTYPE & TEST
Designing for Quick Recall
We evolved Term 1's post-story wireframes into a polished, scalable reference space that helps users review clinical terms and takeaways to reinforce lasting understanding.
Term 1’s design displayed the module's recap, resources and glossary on one screen.
A handful of sample resources and glossary dropdowns fit the layout, but we realized that adding the ever-expanding scroll of links and vocabulary could overwhelm clinicians.
To ensure a usable structure for the glossary as it scaled, we worked closely with the founder to define a tagging system for Survival Story terminology.
Creating and visualizing logical groupings of clinical concepts, narrative terms, and care strategies supported:
Quick lookup for clinicians seeking specific definitions
Clear structure for contributors adding or updating terms
To give each section focus and breathing room while helping clinicians feel oriented and engaged, we split the content into three screens and used the module’s Next arrow to keep navigation clear and familiar.
Takeaways
A high-level learning summary of the module.
Glossary
A reference page with key terms grouped by topic. Clickable filters are used to quickly surface relevant concepts.
Resources
A page centralizing all relevant files, each with clear options to view or download.
Our updates gave the module a more intentional landing point.
PROTOTYPE & TEST
Design System
Throughout these iterations, we began formalizing Survival Story's design system.
We standardized typography, spacing, and component behavior in Figma to create a cohesive visual foundation that remains adaptable as we introduced new overlays and interactions.
Hover for a closer look
From pulse animations to background audio, we refined each detail for consistency. This process allowed for smoother feature iteration with our team.
Background Music ♪
Hit Play to set the ambient soundtrack we prototyped into Survival Story
With these foundations in place, we were finally ready to test how clinicians interacted with the end-to-end experience!
PROTOTYPE & TEST
Usability Testing
We ran remote usability sessions with four medical providers at Dartmouth Health Services. Participants shared their screen as they navigated the hi-fidelity prototype and voiced their first impressions, moments of confusion, and key decisions.
Their feedback shaped immediate edits and later improvements I led that summer as the primary designer evolving the experience to be more scalable and provider-focused.
Improving Narrative Clarity
Surprisingly, users were most confused by the storyline. Ambiguous illustrations and missing context left them questioning major character motivations and outcomes.
The oyster-shucking scene especially highlighted the need for stronger visual storytelling.
Building Visual Context
We added object pulses that call out unfamiliar tools like the shucking knife.
V2 Oyster Shucking 🦪
Play to sample the shucking SFX added in Version 2 to make this scene’s action clearer.
We introduced impact lines, sound effects, and a soft flashback overlay to reinforce character intent and amplify the scene's emotional stakes.
Version 1
Version 2
Applying this approach across other scenes helped us establish a more cohesive, intuitive narrative style.
Unifying Reference System
Since users often overlooked the Next arrow after finishing the module, some missed the glossary and resources entirely. We needed to more reliably signal where each section lived without overcrowding one screen.
Since resources and glossary terms frequently aligned, I suggested to connect both under the tagging system so clinicians could view resources with related vocabulary.
Version 1
Glossary and resources on separate screens
Version 2
Glossary and resources on same screen
In Version 2, glossary definitions and resources share a unified card system with resource cards containing hyperlinked titles and a download option, while dual CTAs help prevent users from accidentally missing the glossary page.
Integrating Clinical Action
Though clinicians resonated with the story's emotional depth, they still questioned how to intervene in practice. The plot mainly unfolded in a family's home, so users felt unsure about mapping narrative points of crisis to real-world clinical intervention.
To address this, the founder introduced a clinician pulse: an educational overlay framing what actions a provider can take at key moments.
Try it out!
Clinician pulses behave like character pulses, with added intervention guidance.
What You May Notice
• Overgeneralizing (“I always mess things up”)
• Catastrophic expectations
• “Fix it or forget it” behavior
• Impulsive choices that feel like the only option
Next
That summer, I worked closely with the founder to integrate the clinician pulse into the design system and module flow. We also reframed Danielle's character as a patient whose story informs her clinical cues.
Version 1
Version 2
Bottle Clinking 🔊
Play to sample the clinking SFX added early on to make this scene’s action clearer.
In this updated bottle placement scene, expanded character insight and the clinician pulse work together to create a meaningful intervention point: revealing Danielle’s inner state and mapping out actionable clinical steps.
PROTOTYPE & TEST
Final Designs
Survival Story guides clinicians through an immersive digital journey, pairing an illustrated narrative with clinical insight to help providers grasp how opioid use disorder shapes a patient’s world.
Introduction
After an opening content advisory with key themes, a tutorial sequence explains basic navigation and Danielle is introduced as the story's core patient.
Background Music ♪
Hit Play to set the ambient soundtrack we prototyped into Survival Story
Main Module
Users progress through the plot, clicking interactive pulses to reveal overlays with narrative and clinical guidance.
Object Pulses
Object pulses highlight items in a scene. When clicked, they display brief contextual explanations of unfamiliar objects or environmental cues that are key to the story.
Character Pulses
Character pulses reveal the patient’s lived experience with emotional insights or internal monologues tied to the character’s journey.
Clinical Pulses
Clinical pulses clarify how a provider could respond in that moment, turning narrative events into practical intervention points.
Bottle Clinking 🔊
Play to sample the clinking SFX added to demonstrate this scene’s action.
Review & Resources
The module closes with a structured review space. Topic-based filters help clinicians quickly find tagged definitions and support resources relevant to their learning.
Glossary terms and resources live in a cohesive card layout. Resource cards have titles hyperlinked and files attached.
REFLECT
Takeaways & Next Steps
Designing for Survival Story has been one of my most deeply involved, rewarding projects.
In 10 weeks, we readied a Continuing Medical Education module's early prototype for usability testing by restructuring interaction patterns and defining a core design system in close collaboration with the founder, project manager, and developers.
After we tested with clinicians, I applied their usability feedback in the summer design cycle to clarify the storyline and streamline content review. I also worked with the founder to introduce a clinical action overlay, linking guidance to key narrative events so providers could confidently connect the module to real-world practice.
Here are 3 key takeaways I learned:
Creative designs must still align
Our rapidly evolving prototype required a creative workflow rooted in discipline. At team reviews we checked new iterations with the founder, PM and developers for narrative alignment, scope, and technical feasibility before updating the design system. As AI tools like Figma Make grow, they could simplify updates by auto-flagging component and flow mismatches.
1
Less guessing, more testing
Internal tweaks only got us so far. Once clinicians actually used the prototype, they called out gaps we totally missed: narrative ambiguity, hidden content, and a lack of actionable clinical guidance. This testing feedback became the backbone of my redesigns and a reminder that intuition cannot replace real users.
2
Flexibility over pixel perfection
With our scope and feature priorities shifting constantly, polishing early screens was counterproductive. We focused on adapting quickly, learning to comfortably rethink or discard ideas. Being flexible and responsive to change helped us align user needs with a product vision that matured through collective input.
3
In October 2025, Survival Story entered a yearlong pilot phase with NHADACA to support New Hampshire addiction professionals.
Looking ahead, we are exploring how this narrative-interactive digital format could support patients directly for clearer communication and shared decision-making around complex care. By tailoring the experience for patient users and creating new storylines for other sensitive conditions, this future project could deepen understanding on both sides of the exam room.
Emily Chang
Thanks for visiting. Let's keep in touch!