Neuro

Mobile-Responsive Web App

Client: Noma Capital

Team: Amanda Snyder, Kate Arneson, Liz Torres, Keira Gatta, Melanie Bethke

My Roles: UI Design, Information Architecture & Secondary Research

Methods: Secondary Research, Competitive Analysis, Directed Storytelling, Site Map, Sketching, Design System, Mid-Fidelity Wireframes, High-Fidelity Wireframes, Interactive Prototype, Usability Testing, Rose Bud Thorn, Annotated Wireframes, Product Presentation

Tools: Figma, Miro, Google Docs, Google Slides, Zoom

TL;DR

PROBLEM

For a variety of social and cultural reasons, many Somali Americans in the Twin Cities do not feel comfortable seeking in-person mental health support

SOLUTION

A culturally-cognizant wellness management tool customized to meet the needs of the Twin Cities Somali community, and scalable to serve multiple different communities in the same way

Interactive Prototype:

NOTE: My amazing team tackled research and design around both client-facing and counselor-facing portals. As the main designer for the client-facing portal, I will be showcasing those designs in this case study, and referencing the research provided by my teammates that led to my design choices.

PROJECT INTRODUCTION

CLIENTS

Salman Elmi and Misky Abshir of Noma Capital enlisted our UX team to design a mobile-responsive wellness management tool that would meet the particular needs of the Twin Cities Somali community seeking mental health treatment. Their vision was that this tool would be scalable to reach other marginalized and underserved communities in the future.

PROBLEM STATEMENT

Due to a general cultural stigma around mental health, many Twin Cities Somali Americans who are experiencing mental health or substance abuse issues do not feel comfortable seeking in-person treatment at a clinic. Additionally, a lack of sufficiently culturally-cognizant and bilingual providers presents barriers to clear communication and results in Somali Americans not feeling seen or understood by their counselors. Existing mental health tools designed to overcome barriers to access often fail to meet the language, literacy, and cognitive needs of this target audience group.

PROJECT SCOPING

Our clients made some suggestions as to possible functionality our design could have, but emphasized our creative freedom. Our team had the opportunity to come up with our own ideas based on our own research and design vision.

We decided to divide into two smaller teams, one focused on research and the other focused on design. I supported with some of the early secondary research, and then focused on the sketching, wireframing, and prototyping of the client-facing side of the platform.

PROJECT GOALS

🧠 Conduct research to better understand the needs of Twin Cities Somali community members, including their beliefs and attitudes around mental health, and any other barriers to access

🧠 Design a tool that would allow target audience group to access better mental health support

🧠 Assess pain points and opportunity areas of design

🧠 Revise design based on feedback

RESEARCH & INSIGHTS

DISCOVERY RESEARCH

I supported with early secondary research before beginning the design work. In this discovery research, we wanted to understand the needs of Twin Cities Somali Americans, their home culture and traditions, beliefs and attitudes around mental health, and any other barriers to access we might uncover.

We discovered that:

🧠 The Twin Cities Somali community does not have the necessary access to providers who represent their identities or have an adequate understanding of Somali culture and traditions

🧠 A lack of sufficiently bilingual providers or interpreters prevents many people in the Twin Cities Somali community from being heard and understood by providers

🧠 There is a general stigma around mental health, and many young Somali Americans do not feel comfortable talking with their family about their struggles, though some in the younger generation are more comfortable talking with peers.

🧠 Some local Somali community members have found success in breaking down barriers around discussions of mental health by leveraging the Somali oral tradition of storytelling

These findings were later reinforced through directed storytelling interviews conducted by members of the dedicated research team

Screenshot of team Miro board with early research findings

“I want a counselor to know what my community is like, the family dynamics and cultural expectations and help me navigate that.”

Quote from directed storytelling participant

COMPETITIVE ANALYSIS

Members of our research team conducted competitive analysis to see what mental health and/or culturally responsive digital tools already exist that we could either take inspiration from or identify gaps in.

Things that other tools do well included:

🧠 Personalized filters

🧠 Resources & Exercises related to mental health

🧠 Culturally-cognizant and personalized content

Things that other tools are lacking included:

🧠 Support for languages other than English

🧠 Access to resources without a paid account

Screenshot of team Miro board with competitive analysis findings

EARLY IDEATION

SITE MAP

Before sketching my design ideas, I created a site map showing the features the client-facing side of the app would have, including some “future state” ideas that the clients might want to consider adding on as they continue to iterate on the final design.

SKETCHES

I then created sketches of the features that I planned to incorporate into my final design

DESIGN SYSTEM

Before moving into digitizing our designs, we wanted to thoughtfully create a design system incorporating typography and color styles that would aid us in ensuring that our designs would be accessible

TYPOGRAPHY

We opted to use the font Lexend for all of our text, knowing that it was designed specifically for readers with dyslexia.

With the exception of link text and search fields, we kept all of our body copy and microcopy black to allow for high-contrast visibility.

In keeping with accessibility best practices, the smallest font-sized used for most text was 16px. The only exceptions to this included buttons and microcopy.

COLOR PALETTE

The color palette was selected by one of my design teammates.

She selected colors that were in keeping with other mental health apps, opting for a calming blue as the primary color.

The coral accent color was added as an extra complimentary pop. Because the color contrast of this color paired with our white and off-whites is not as accessible as the blue palette, we used this color minimally.

MID-FIDELITY WIREFRAMES & PROTOTYPE

Our team made the intentional decision of leaving color out of our first round of wireframing, to ensure that our designs would be intuitive, usable, & accessible without the added indicator of color for calls to action and the like

Examples of greyscale mid-fi wireframes. The first three screens were fully designed by me. The “Resources” wireframe was inspired by one of my sketches but was digitized in this stage of the process by one of my design teammates.

EVALUATION & REVISIONS

HEURISTIC ANALYSIS

A teammate who was not directly involved with the design of the client-facing experience conducted a heuristic analysis of the mid-fidelity prototype.

Several of the areas that were identified as the biggest violations of her chosen heuristics were due to bugs in the prototype rather than a fault of the intended design. These were easily fixed!

The other areas that she noted for improvement were around consistency and clear language. These included…

The word “location” on the appointments screen indicated a physical location, rather than the option to meet in-person or virtually. This was changed to “appointment type” in the final design.

Labeling the messages page as “inbox” on the side navigation bar. This was changed to “messages” in keeping with mental models of a message feature vs. an email feature. 

Also on the appointments page, using the word “cancel” as a CTA doesn’t give a clear indication that one could also reschedule their appointment. This was updated to the word “change”.

USABILITY TESTING

The research team conducted usability testing on the mid-fidelity prototype, then used the Rose Bud Thorn method to synthesize their results.

The things working well included…

🧠 Very good general/overall navigation and ease of completing primary task flows

🧠 Very good general/overall readability/understandability of terminology/language

🧠 Dashboard cards/quick links & account settings generally match participant expectations

🧠 Inclusion of language preferences

🧠 Multiple ways to message counselor

Several opportunities for further clarity and several new features were also suggested by participants. These included…

🧠 The inclusion of insurance information and a dark mode option on the Account & Settings page

🧠 Changing the word “homework” on the Treatment Plan page to something that did not imply a connection to school work, and including clearly clickable links for each item that give instructions for every task.

🧠 Including a visual display of “upcoming appointments” on the Dashboard for better visibility and access.

🧠 A feature allowing clients to create a filtered search and browse a database of providers to add to their care team, and view profiles of providers.

🧠 An onboarding feature that would include language & resource preferences

Pain points included…

🧠 Completing homework using pop-out arrow (0/3 participants tried using the pop-out arrow icon without prompting)

🧠 Low interest in “My Circle” feature that allowed select friends and family to have access to the client’s treatment plan (3/3 participants expressed low interest; 2/3 participants expressed negative reactions)

🧠 Confusion around Appointment scheduling (button style of “schedule appointment” didn’t look like a clear CTA, desire for explicit “no” option after selecting an appointment time)

REVISIONS

I set to work making design revisions based on the results of the heuristic analysis and the feedback received from usability test participants. Notable changes included the addition of a “Find a Provider” feature, adding “Upcoming Appointments” to the Dashboard, using clickable links instead of an icon to open the instructions pop-up on the task portion of the Treatment Plan page, and generally using clearer language to ensure that functionality of each feature was more fully understood.

The design team and I also began to collaborate on how best to incorporate our chosen color palette, and colors were added to the final design.

Sketch of new “Find a Provider” feature identified as desirable by usability test participants

FINAL DESIGN

HIGH-FIDELITY WIREFRAMES & PROTOTYPE

The final design is a wellness management software that allows Somali Americans seeking mental health support to…

🧠 Find a provider who they feel an affinity with and can trust to understand them and their community

🧠 View, manage, and schedule appointments with their chosen provider. Appointments include virtual options to allow for private care from anywhere, without having to go to a clinic.

🧠 Have ownership over their Treatment Plan as they complete assigned tasks to continue building on the skills and strategies they work on in sessions

🧠 Communicate with their provider via an in-app messaging feature to ask questions, voice concerns, or make requests to modify different elements of her treatment plan

🧠 Access a resource library of videos, audio recordings, and readings that are both informative and useful in practicing new skills. The unique “stories and testimonials” category allows clients to hear and read narratives of experiences similar to theirs, so they are able to feel less alone in their struggles even if they are not always comfortable speaking to friends and family.

🧠 View profiles and other important information about members of their care team

🧠 View and manage medication information

🧠 Update personal information and customize accessibility elements in Account & Settings

Clickable prototype

CONCLUSION

NEXT STEPS

Our team’s recommended next steps for Neuro include:

🧠 Building out an onboarding process that includes demographic information, health history and needs, and preferences to inform content that is relevant and useful to each client

🧠 Further research and testing for both general and culturally specific accessibility, including extensive research to support populations Neuro could be scaled to reach in the future.

🧠 “Guest” access for visitors to Neuro who want to take advantage of the resource library without having to create an account. This could include friends and family of existing clients who want to better understand how to support their loved one, or other community members who want to explore the area of mental health without receiving therapy