Making mental-health
access barriers tangible.
I turned our team's interview research into two responsive React prototypes: guided conversations about daily barriers and a building that connects those barriers to initiatives. My role covered research synthesis, interaction and visual direction, and the responsive implementation; the team developed the concepts together.
Client identities and prototype links remain private because this was confidential client work.
These characters come from the conversation prototype's composite scenarios. A teammate created the illustrations; I developed the stylized pipeline used across the character and window artwork.
Research and Synthesis
Within a wider engagement, our team conducted a subset of interviews with psychiatrists, social workers, Medicaid directors, clinicians, patient advocates, and people with lived experience. The design brief was to translate recurring access patterns into something stakeholders could explore as an interconnected system rather than a static list.
Participants described cultural stigma and fears about involuntary treatment, employment, or family consequences as reasons people may delay seeking care. Interviewees tied reduced access to provider shortages, long waits, transportation, and services that were hard to navigate. Participants reported long waits for specialty care, especially in child psychiatry, and families described medical-transport windows that were hard to fit around work, school, and caregiving. Participants raised out-of-pocket costs, coverage limits, and out-of-network care as pressures on patients and providers, and some interviewees described people avoiding care because they expected denial or could not tell whether they qualified. Interviewees described enrollment, billing, and coordination across mental-health, substance-use, and primary-care services as an added burden, and participants associated provider turnover with retelling personal histories to each new clinician and a harder path to sustained trust.
Some providers described documentation and administrative work running past patient-facing hours, and participants connected staffing, compensation, and administrative load with how much continuous care organizations could provide. Interviewees noted that care requirements could become access constraints when organizations lacked the staff or time to implement them, and described reimbursement levels and payment delays as factors in which coverage providers could sustainably accept.
I organized the interview notes into themes for both prototypes, connecting individual circumstances to policy and service-delivery constraints and separating repeated observations from assumptions that still needed testing. Across interviews, these barriers tended to appear together, and a person's cultural background, physical environment, family responsibilities, and local resources shaped how they encountered the care system. Participants also pointed to initiatives that integrate services, remove population-specific barriers, or support the workforce. These are qualitative interview patterns, not prevalence estimates or causal findings.
Two Prototype Framings
The two framings answer different questions. The conversations show how a barrier plays out in one person's day, with the choices and constraints around it. The building shows where barriers and the initiatives that address them sit across the policy and service-delivery landscape.
The research produced more detail than a stakeholder would read in one sitting, so each unit carries one idea and the depth sits one step away: a scenario focuses on a single barrier, and each window opens one barrier with its initiative. That kept the prototypes specific enough for the professionals we tested with without overwhelming someone seeing the material for the first time.
Conversation prototype
The prototype has five scenarios: a care provider (care coordination), a community support worker (administrative workload), an older adult (connectivity and access), a parent and caregiver (housing and food constraints), and a student (stigma and culture). Each scenario combines themes from multiple interviews. The labels intentionally omit names and geography because these are design composites, not participant profiles. A visitor picks a scenario from a grid and opens a guided question-and-response conversation. Branching prompts lead to connected barriers and responses, and a context panel lists the constraints and proposed initiatives.
Systems prototype
Each window in the building represents a barrier and opens its related initiative. Framing the building as a renovation presents the care system as inhabited and open to change.
Access
Cost
Administrative burden
Provider shortage
Paperwork
Care coordination
Testing and Iteration
We tested three mid-fidelity concepts in dozens of interviews with people working in mental health, split between two teammates and me. Their feedback changed the content model and tone before we committed to the two final framings.
The professionals we tested with wanted to know which existing or proposed initiatives could address each issue. We paired barriers with initiatives and made those responses browsable in both prototype framings.
They pushed back on institution-centered labels and preferred plain descriptions of the circumstances people face, so we rewrote persona and barrier language around those circumstances instead of administrative categories.
They also wanted the prototypes to acknowledge structural constraints without reducing people to them. We revised the dialogue and illustrations to include choices, coping strategies, and routes forward alongside the barriers.
Responsive Engineering
Our team designed both concepts in Figma. I used the React markup Anima generated from those designs as a visual reference, then rebuilt the layouts and interactions in React and TypeScript. I kept the visual direction on phones but changed the navigation and reading order.
On phones, the scenario flow's three columns become one reading sequence. I rebuilt that flow for small screens and kept its audio playback and scenario-specific visual themes.
The systems view keeps the building facade intact on desktop. On mobile, a window opens a dedicated detail route, giving the barrier and initiative the screen width instead of confining them to a desktop modal.
Cards, conversations, and detail views share React and TypeScript content structures, so each view does not define its own barrier, initiative, or scenario fields.
The build also used Vite, React Router, Tailwind CSS, Framer Motion, and Storybook.