MentalHealth.gov

Responsive Website Redesign

Project Overview

Access to mental health resources is imperative for community health. MentalHealth.gov should be accessible and impactful.

Problem

The MentalHealth.gov website has a confusing navigation system with alienating language and impersonal imagery

Solution

Redesign MentalHealth.gov with emphasis on inclusivity and destigmatization

Tools
Figma, InVision, Miro, Google Workspace

Team
3 UX Researchers
1 UX/UI Designer

My Role
UX Research, Writing
UI Design

Timeline
2 weeks

View Prototype

This project was completed as a class assignment for the University of Oregon's UX/UI Bootcamp.

Design Process

Discover
‍User Interviews
Affinity Diagram
User Testing

Define
User Path
‍User Personas
Language Analysis

Ideate
‍‍Info Architecture
Feature Prioritization
Style Guide

Design
‍Low-Fidelity Design
Usability Testing
Prototype

1. Discover

User Interviews

We conducted 5 user interviews, integrating a usability test with qualitative research methods.

User 1: White male seeking help for a family member.
User 2: Asian female seeking help for a family member.
User 3: Indian-American Case Manager seeking help for a client.
User 4: White female counselor seeking resources for patients.
User 5: Visually impaired older male seeking resources for a family member.

Affinity Diagram

We were able to categorize feedback into four general themes: visual design, accessibility, navigation, and organization. From a broader point of view, we were able to gather that most of the feedback falls within the realm of information architecture.

2. Define

Language Analysis

Mental health is a sensitive topic. Some users will visit the site in crisis or heightened emotional states. Language from the existing site is not consistent with modern industry best practices. The site currently uses the term "mental health problems," which can be alienating and discouraging for users who might be in distress.

Opportunity:
Increase representation of diversity with empowering, inclusive photography. Use language as a tool to empathize with users, minimizing harm and stigma associated with mental health conditions.
‍
Recommendation:
Emphasize inclusivity by integrating representative photography and empowering language. Replace all use of "problems" with "conditions."

In 2020, prevalence of mental illness was highest in women, 18-25 year olds, and those who identify as multi-racial. LGBTQIA+ adults are more than twice as likely as heterosexual adults to experience a mental health condition, and this community is not mentioned anywhere on the existing site.

There is currently no photography on the site. It is important for users to see themselves represented while searching for mental health resources.

User Path

Based on information gathered from user interviews, we defined a user path with three different scenarios, unified under one common goal.

User Personas

Next, we were able to combine our key findings and determine two user personas. Kenneth and Celia's priorities anchored the rest of our ideation and design processes.

3. Ideate

Information Architecture Analysis

To take the heuristic analysis a step further, we dove into the information architecture. We used Miro to identify all the pages and hierarchy of the existing site. Page names were consistently wordy and confusing. During usability testing, several users went to the "Health Insurance and Mental Health Services," page when they were looking for information about mental health services. They were confused to see that the page is about health insurance, not how to locate services.

Iterated Site Map

Once we had a sense of the existing architecture, we created a proposal for a new site map.

In order to match the mission and the goals of the site, we adapted the navigation structure and language to be more concise, replace all uses of "problems" or "disorders" with "conditions" and a new hierarchy that better reflects the priorities of the users. We changed "How To Get Help" to "Find Help" and moved it up in the architecture, so that users can find help as quickly as possible.

Feature Prioritization

As a team, we completed a feature prioritization process. We began with an ideation exercise "I Like, I Wish, What If" to determine features that could be carried over or implemented in the redesign.

Throughout the process, we identified that the most important features to prioritize were:

1) Ability to find immediate help
2) Soothing colors
3) More calming, inviting language

Currently, there are many references to crisis lines, but the user flow promoting therapeutic methods seems unclear, and not everyone feels comfortable calling a crisis line.

How might we integrate a more holistic user flow promoting mental health support services?

Style Guide

Style choices were intended to create a calming, empowering and inclusive mental health community. I chose to integrate a lavender color palette, user-centered language, and representative photography.

Colors were derived from the Pantone color of the year for 2022, PANTONE 17-3938 "Very Peri." A singular gradient color palette is dependable, predictable, and approachable.

Minority communities often suffer from disproportionate mental health outcomes. This can be due to stigma, accessibility, awareness, discrimination and more. Integrating visual representation of minority communities with photography felt important in promoting inclusivity within mental health.

(Psychiatry.org, Mental Health Disparities: Diverse Populations)

I used round elements consistently in photographic treatments and graphics to embody softness. I chose a font that mirrored the roundness, to maintain continuity of softness in the way that the text appeared.

I paired Poppins and Lora for the fonts. Poppins feels positive and boldly welcoming. Lora creates a sense of legibility and trust for the body copy.

User-centered language in headings and subheadings is a major arena for improvement. Font styles create an atmosphere, but the effectiveness of the site relies on the writing. Headings and messaging within the site must always be consistently empowering, empathetic, and inclusive.

4. Design

Low-Fidelity Design and User Testing

Created wireframes, iterating into a low fidelity prototype.

Conducted tests with 4 users, testing for first impressions and initial feedback. Users felt that the font was too thin and hard to read, so I integrated a new font with more weight. A slider with cards highlighting definitions for common conditions and symptoms was not clearly scrollable - users were looking for arrow buttons on either side of the component.

Hi-Fidelity Prototype

I created desktop and mobile prototypes of an iterated MentalHealth.gov homepage and navigation system in Figma.

Key features:

A chat function is subtly ever-present throughout the user experience. It will be crucial for the language utilized in the chat function to be empowering and encouraging, mirroring the rest of the site's writing style.

The existing crisis line user flow is effective in an emergency, but can feel intimidating for users who are looking for a less extreme option.

A conditions, signs and symptoms section highlights common mental health conditions. Our user testing outcomes identified a major gap in information access on the existing site regarding depression. For that reason, depression and other common conditions have priority on the homepage. The button below the slider leads to a page to search and sort alphabetically, or by category, symptom, etc.

These new features all streamline resources and information for users. A Therapist Finder tool solves for the sometimes painful logistics of identifying the perfect provider. Search for a therapist by insurance, location, demographics, and more.