Case Study
Interactive prototypes
that make care barriers tangible.
A healthcare client needed to understand why people struggle to connect with mental health services. Working with two other designers, we interviewed a subset of 79 participants across three rounds, synthesized their experiences into 24 themes, and built two interactive prototypes that make systemic barriers visceral enough to drive policy action.
Client engagement generalized under NDA.
Password: ShirleyXuPortfolio2026
Five composite personas built from interviews with healthcare professionals, advocates, and individuals with lived experience. Illustrations by a teammate; I developed the stylized pipeline for the character and window artwork.
79
Research participants across 3 rounds
24
Barrier themes surfaced from interviews
5
Composite personas from lived experience
2
Complementary framings: empathy + systems
The Problem
Nearly half of Americans with mental illness receive no treatment. The reasons aren’t mysterious: stigma prevents people from seeking help, provider shortages leave rural and low-income communities underserved, insurance coverage gaps make care unaffordable, and administrative complexity drives providers out of public programs entirely. The data existed in policy reports, but decision-makers needed to experience these barriers as interconnected and human, not as isolated line items in a spreadsheet.
Our team of three designers collaborated on research synthesis, concept ideation, and prototype design across three rounds of interviews with healthcare professionals, state representatives, advocates, clinicians, and individuals with lived experience.
Research
The broader engagement reached 79 participants across 37 interviews, generating 1,177 data points. Our team conducted a subset of these interviews, speaking with psychiatrists, social workers, state Medicaid directors, clinicians, patient advocates, and individuals with lived experience. The conversations surfaced four categories of barriers that compound each other: a patient facing stigma in a rural area with no nearby providers and inadequate insurance doesn’t experience four separate problems. They experience one interlocking system of failure.
Stigma & Fear
Stigma around mental health especially within certain cultures, religions, and among older adults. Fear of involuntary treatment or legal consequences like loss of custody or job security.
Access & Workforce
Severe provider shortages in rural and low-income communities, long wait times, transportation barriers, and patients who don’t know where to seek help or how to navigate the system.
Insurance & Financial
High out-of-pocket costs, inadequate coverage under Medicare Advantage, out-of-network expenses, and providers opting out of Medicaid due to low reimbursement rates.
Administrative & Systemic
Complex enrollment paperwork, cumbersome billing processes, fragmented care coordination between mental health, substance abuse, and primary care services.
What we heard
Advocate · Workforce attrition
“The administrative burden has reached a level that they just can’t deal with anymore. Folks that are treating patients all day are then charting for four or five hours afterwards. That’s a big piece of why people are leaving the system.”
State representative · Policy trade-offs
“You can’t regulate your way out of a workforce shortage. If you can’t meet the requirements, one way to do that is just turn away people. My concern is that it may actually limit member access to care unintentionally.”
Individual with lived experience · Continuity of care
“I’ve had four different therapists and five different peer specialists, and I’m not starting over from scratch telling somebody everything about me. You think about all your deepest, darkest secrets that you tell someone, and then you have to tell someone new. You’re not going to be open after a while.”
Clinician · Transportation barriers
“Our families here in West Baltimore — transportation is always a barrier. If they use medical assistance transportation, you need a two-hour window before and after. Nobody has that time, especially with children receiving treatment after school.”
Administrative staff · Awareness gaps
“Even though we don’t turn people away ever, there are still people who either just don’t believe that’s how it is, or they don’t know. Because they don’t have insurance, they stay in the community and they just suffer.”
Psychiatrist · Waitlist consequences
“One major barrier is the lack of providers. I have a waitlist of three, six, or nine months, especially if you’re looking at child psychiatry. Duration of untreated psychosis predicts long-term trajectory of illness.”
Synthesis
We distilled the research into five named insights and two actionable opportunities for the client. Each insight captures a systemic pattern, not just individual anecdotes: themes that appeared across interviews regardless of the participant’s role or geography.
Bewildering Barriers
Significant obstacles hindering access and utilization of mental health services — from workforce shortages and coverage limitations to fragmented coordination between providers.
Worn Out Workforce
Staff shortages, burnout, inadequate compensation, and administrative burdens driving high attrition rates and impacting the delivery of care.
Individualized Implications
Cultural background, physical environment, and situational factors that either facilitate or impede access to care and its effectiveness.
Insurance Exodus
Low reimbursement rates and slow payment procedures driving providers toward private payers, creating downstream access barriers for patients.
Revolutionary Reforms
Multi-faceted initiatives already yielding positive outcomes — eliminating barriers for special populations, fostering partnerships, integrating services, and cultivating a more adaptive workforce.
Reports get skimmed. A person telling you about their day gets listened to.
Prototype A: Conversations
The first prototype puts the user in conversation with five composite personas, each representing a distinct barrier. Click a character card, and you enter a guided Q&A, asking about their experience, hearing specific scenarios from their perspective, and surfacing the solutions being attempted.
Each persona’s dialogue was written directly from interview data, preserving the emotional specificity of real stories while generalizing identifying details. Audio narration accompanies each response. Hearing a voice changes how you process information.
Dr. Elaine Carter
Psychiatrist, Vermont
Fragmented care
Brook Miller
Social worker, rural Ohio
Paperwork
Maria Reed
Indigenous elder, New Mexico
Internet access
Daniel Shea
Single dad, Connecticut
Food & housing insecurity
Jordan Nguyen
Student, New Jersey
Stigma & culture
Interaction model
Character grid
Home screen with persona cards and hover scaling.
Conversation
Click opens a chat interface with the selected persona.
Branching questions
Suggested prompts lead into conversational trees.
Profile sidebar
Demographics, barrier type, and proposed solutions.
Prototype B: Systems View
The second prototype uses a building metaphor: each window in the facade represents one of twelve barriers, and clicking one reveals the policy initiative being implemented to address it. Where the persona prototype builds empathy, this one builds understanding of the policy landscape.
The building implies structure, interconnection, and the possibility of renovation. Each window is a point of intervention, not an isolated problem, but part of an inhabited system. Barriers span patient-facing issues (access, cost, stigma) and provider-facing issues (administrative burden, low reimbursement, provider shortage). On desktop, clicking a window opens a full-screen detail modal. On mobile, each window navigates to a dedicated detail page.
Access
Cost
Administrative Burden
Provider Shortage
Paperwork
Care Coordination
Two Framings, One System
People who saw the persona conversations first came to the systems view already knowing why each window mattered. People who started with the systems view went looking for the persona stories to understand the human cost. Neither prototype works as well alone.
| Aspect | Conversations | Systems View |
|---|---|---|
| Metaphor | Persona conversations | Building with windows |
| User role | Learning from lived experiences | Understanding systemic barriers |
| Interaction | Deep Q&A conversation trees | Quick initiative browsing |
| Scale | 5 personas, one barrier each | 12 barriers, system-wide view |
| Purpose | Empathy building | Policy understanding |
“Don’t say vulnerable populations. Nobody considers themselves vulnerable or a population.”
A participant’s feedback that reshaped how we framed every barrier in both prototypes. Language that centers the institution alienates the people it claims to serve.
Testing with Experts
We tested three mid-fidelity design concepts (a healthcare pipeline with animated reels, an illustrated vignette, and a quilt view) with healthcare professionals across multiple sessions. Their feedback reshaped the prototypes fundamentally.
Solutions, not just problems.
Every participant asked where the solutions were. Depicting barriers without pathways forward felt incomplete — stakeholders wanted to see what existing initiatives already address each issue.
Language matters more than visuals.
“Vulnerable populations,” “socioeconomically disadvantaged,” “low health literacy” — participants pushed back on institutional jargon. People don’t see themselves in those labels. Plain language builds trust.
Empathy without victimization.
The line between depicting systemic problems and making people feel “pathetic” is thin. Participants wanted depictions that validate frustrations without stripping away agency.
From Figma to Working Code
We designed both prototypes in Figma and used the Anima plugin to export to React + TypeScript. The export looked right at exactly one viewport size. Every element was absolutely positioned. Nothing responded to the screen.
Rebuilding the layout was the real work. The persona prototype needed the most: a three-column desktop view with audio playback and character-specific themes had to collapse into a single scrollable flow on mobile. The building prototype was simpler since the facade is a fixed composition by nature. Anima’s absolute positioning was nearly correct there.
Export tools get you to a starting point faster than writing from scratch, but responsive design still requires human judgment about what to prioritize at each breakpoint.
What I'd Do Differently
I learned that the gap between design and code is itself a design problem.
We treated Figma-to-code as a handoff step. It turned into the most time-consuming part of the project because Anima’s output was pixel-perfect at one viewport and broken at every other. I now design with responsive constraints visible in the wireframe stage, so the layout decisions happen before export instead of after.
I got better at drawing out what people actually know, instead of what they’re prepared to say.
Our first interview round used the same script for everyone. The insights were surface-level. By the third round, I was reviewing each participant’s published work and tailoring follow-up questions to their specific expertise. The quality difference was dramatic. Generic questions get generic answers.
Built with