Survival Story
My Role
Designer
4 Designers, 4 Developers, 1 PM
Timeline
10 weeks
Sept-Nov 2024
Deliverables
Figma Prototype
THE BACKGROUND
Project Partnership
The DALI (Digital Applied Learning and Innovation) Lab partnered with Alastair Huntley, founder of SocialTheory, to design and develop SocialTheory’s flagship product, Survival Story—an innovative, human-centered approach to tackling the national opioid crisis.
The Opioid Crisis
Opioid-use disorder is one of the most highly stigmatized health conditions in the world. Between May 2022 and May 2023, the CDC reported over 112,000 opioid-related overdose deaths in the United States. This issue is particularly relevant to local communities in the Upper Valley Region of New Hampshire and Vermont.
The Challenge
In order to improve health outcomes of opioid users, healthcare professionals need to be properly educated on topics surrounding substance-use disorders. Our partner utilized visual story-telling to create an impactful, in-person, educational experience for health-care professionals. He enlisted our team to digitalize his project in an immersive, intuitive, and engaging format in order to expand its reach and impact.
THE SOLUTION
We created a high-fidelity Figma prototype of an online module combining visual story-telling with intuitive navigation to create an immersive, user-friendly experience. I focused particularly on designing the character cards, educational/narrative components, and progress bar.
Promotes quick immersion and clarity
Our onboarding sequence briefly introduces the story, provides key learning objectives— a method proven to improve retention, and a skippable tutorial all overlayed on the starting frame to ensure the onboarding is quick, effective, and grounded in the story.
Incorporates education and engagement within the storyline
Each interactive component was intentionally designed to feel seamless within the narrative
Overlayed pop-ups
Resources to save for later
Space for users to engage directly with content
Prioritizes intuitive navigation
Pulsing, colored components clearly indicate clickable components and closed captions make the experience inclusive for all users.
Supports long-term retention
A concise summary of the key takeaways allows users to conveniently reference this module without having to go through the entire story again.
THE PROCESS
This project started out as a module dashboard design but several weeks in we pivoted to designing the modules. Read on to find out we handled the change in scope.
USER RESEARCH
Healthcare workers need engaging & efficient modules
We interviewed 4 healthcare professionals and identified two key needs:
Modules need to be engaging
Modules must be accessible in a time-efficient and intuitive format
A PIVOT
We pivoted from designing a dashboard to a module experience
Based on our user research which uncovered the need to create more engaging modules, we pivoted from designing the module dashboard to designing the modules themselves.
Our new POV statement:
Healthcare professionals need an engaging yet succinct online learning module that allows them to effectively learn about harm and stigma reduction around opioid use disorders.
And adapted to ambiguity by defining specific goals
With the broader project scope, we faced higher ambiguity. With the 10 week project timeline, we had to adapt quickly. We quickly curated a list of design goals to help us focus on our new challenges.
Design Goals
Add interactive elements into module while maintaining immersive experience
Convey content in a time-efficient manner
Improve retention of learning objectives
INDUSTRY RESEARCH
Turning to video games and Netflix shows
After recognizing the need to create an experience that was more engaging than current online modules we turned to the experts of engagement—the entertainment industry.
Thus, in addition to analyzing 12 online education modules and 2 research articles about effective module design, we also looked at other forms of media including 2 online games and 2 interactive Netflix shows.
Some of the features we highlighted through our industry research
IDEATION
Collaboration and clear goals helped us refine our features list
After brainstorming with Crazy 8s we worked with our partner and developers to determine which features to prioritize. We also referenced our design goals, ensuring sure that all goals were addressed.
Design Goals
Add interactive elements into module while maintaining immersive experience
Full screen pop-ups on top of the blurred original scene
Interactive reflection opportunities about the story
Character overview and story synopsis before the story starts to provide context without disrupting the video
Keep audio on loop while user is interacting with the scene
Convey content in a time-efficient manner
Onboarding tutorial and help button to guide users through the interface
Clear indicators for clickable components
Key learnings and resources in a downloadable format after the module
Improve retention of learning objectives
Learning objectives at beginning
Concise summary at the end
USER TESTING
Our team attended two design critiques where we presented our grayscales to another DALI design team for feedback. Here’s a look into some of the valuable insights we received.
I found that users valued readability in pop-ups
I grappled with balancing readability with non-disruptive visuals in the design of the narrative popups.
During testing, I learned users preferred the opaque white option for readability.
Here is how I incorporated this feedback into my final design:
Users choose a retro, yellow style for character cards
As I was designing the character cards, I experimented with various labelling styles, accent colors, and shades.
I found users had a strong preference for the saturated yellow, noting that the red was "too harsh" and "felt like a warning." Users also preferred the side banner explaining that it felt cohesive with Survival Story's "retro, dramatic style."
I advocated to rethink the journal feature based on feedback
The journal feature was a way to gamify the module experience, allowing users to drag helpful information into a "journal" to save for later. The team and our partner originally really liked this idea but during user testing we got feedback that the feature felt inefficient.
Considering a main pain point of previous modules was how time-consuming they were, I advocated to scrap the journal and instead feature a final screen that summarized all important information from the module.
This maintained the accessibility of information post-module while cutting out the unnecessary interaction of dragging specific bits into the journal.
REFLECTING
Thank you to my team and our partner!
This project was my first real DALI project and it was so rewarding and insightful. Special thanks to Faith, my design mentor, who guided me through every step of the process.
Here are some things I learned from this experience:
Adapting to pivots through goals & communication
Our team embraced pivots during this project. By staying focused on clear design goals and maintaining consistent communication with our partner, I learned to adapt seamlessly to each shift.
Keeping an organized Figma
Through Faith’s mentorship, I learned how to maintain a well-structured and clearly labeled Figma file. This greatly improved the clarity and flow of our work.
Taking feedback for more human-centered designs
The two feedback sessions we participated in were critical to our design process during this project. Each session helped refocus our goals, and I gained valuable critiques from the other designers.
Thanks for reading :)
Back to cases