Align prototype

Overview

Summary:
Designed and prototyped a mental health care provider and resource “matching” app designed for intersectionality.

Skills: UX Research, UX/UI Design, Information architecture, Visual design
Tools: Adobe XD, Photoshop
Client: Course project
Role: User experience researcher, UI designer, Visual designer


Challenge

For people that have marginalized and intersectional identities, finding appropriate mental health care providers and resources can be challenging. The lack of providers from diverse backgrounds can deter people from seeking mental health care. Other barriers that make the process particularly difficult for some folks in the target demographic include stigma around mental health, mistrust in the medical community stemming from historical exploitation and institutionalized racism, the high barriers to entry created by the jargon-heavy language of the mental health field, and the time and energy required to find an appropriate match.

Objectives

  1. Simplify and streamline the process of finding a mental health care provider that meets a patient’s needs.
  2. Remove barriers that disproportionately affect people with marginalized, intersectional identities.
  3. Meet patients where they are by providing a personalized in-app experience.

Solution

Align is an easy-to-use, secure mobile application that helps users find providers who are good cultural matches while offering guidance throughout the process. The app consolidates the many steps of finding a provider (e.g. discovering the best type of therapy for one’s needs, determining payment options, finding trustworthy reviews, making contact with the provider) in one inclusive and private platform.

Core Features

Align Assessment for provider matching

Assessment “matching” service asks 10 simple questions to help the user find a provider that has a deep understanding of their lived experiences. The optional assessment questions evaluate provider-patient match and eliminate the need for the user to have in-depth knowledge of therapeutic modalities.

Ranked matches and comprehensive provider profiles

Assessment results include a ranked list of providers (with map view option). Each provider has a calculated match percentage, reviews from other verified users, an in-depth profile and contact options.

Flexible provider directory

Inclusive filter categories and open-ended keyword search option empower users and deliver fine-tuned results. The directory offers the user transparency into the full list of providers, building trust.

Process

My team moved through the “double diamond of design” framework to ensure we understood the problem space and target audience before starting to design, test, and iterate solutions.

Discovery

Background research:

Before embarking on user interviews, our team conducted background desk research about the lack of diversity in the mental health field and the challenges faced by people with marginalized intersectional identities when seeking a mental health care provider. We consulted academic papers as well as reputable news and data sources.

Ux research methods:

  • Competitive Analysis
    • We reviewed currently existing websites and apps to determine gaps in the problem space and to contextualize our user interviews so that we were familiar with the tools users are currently using, such as Psychology Today and Ayana.
  • User Interviews
    • We interviewed 8 users from our target demographic. These users all identified as having marginalized and/or intersectional identities and were seeking or had sought mental health care. They are moderately tech savvy and have access to a smartphone and a computer.

Define

We created an affinity map to synthesize the qualitative data from our interviews. At this point, we began creating personas and drafting user scenarios

Persona Cards

Develop

Our design went through a number of iterations, starting with paper sketches and user flow diagrams and progressing to wireframes and a full digital prototype. We conducted users tests on our paper and digital prototypes and completed feedback logs which we used to improve usability.

Design evolution: Messaging Center

Our user flow and information architecture went through a number of iterations from initial sketches to final prototype. Changes were made based on user testing, heuristic evaluation, and our own observations while prototyping. Some of these changes can be display through the evolution of our messaging center.

In initial brainstorming sketches, messages to the provider were sent directly from the provider profile. However, we determined this would lead to cognitive overload and deplete the user’s limited attention resources—i.e. the user may get distracted by other things. The first wireframe moves too far in the other direction by burying the messaging center in the account section and combining it with a notifications screen via  local tabbed navigation.

Brainstorming sketch
Initial wireframes

Final messaging flow

Detaching the message center from the account screen and adding it to the bottom navigation increased the visibility of a feature that is involved in a primary user task.

Our final design included templates to help users take the first step in contacting a provider. The user can access any template without leaving the messaging screen using a drop-down menu. This design decision illustrates safety—helping a user recover from a small error, like choosing the wrong template.

Deliver

We developed a fully functional digital prototype in Adobe XD. This video shows the user flow for signing up, taking the assessment, and viewing provider results.