THE PROJECT

Redesign of the National Alliance on Mental Illness website.

Duration: 3 weeks.

M Y ROLE

User Researcher

UX Designer

UI Designer

(team of 3 designers)

 
heads
The Project​: Website redesign of NAMI.org​
My Role: UX Designer (Design team of 3)
Tools: Figma, Miro, Whimsical, Photoshop
Jump To:
WHY THIS REDESIGN?

The National Alliance on Mental Illness is the nation’s largest grassroots mental health organization. NAMI works to "educate, advocate, listen and lead to improve the lives of people with mental illness and their loved ones".

According to facts from NAMI, in February 2021:

  • More than half of Americans report that COVID-19 has had some kind of negative impact on their mental health

  • 46.1% of adults in California reported symptoms of anxiety or depression

  • And yet, only 21.9% of Californians were unable to get needed counseling or therapy

We believe that by simplifying, reorganizing, and creating a calm website aesthetic to reconceptualize the daunting task of getting help for mental health, on the NAMI website, for anxious/stressed people, we will achieve a greater positive impact on the community that NAMI is aiming to serve.

NAMI.org Home

NAMI.org at the time of this project

Proposed redesign concept

USER RESEARCH
INTERVIEWS​

In order to make NAMI.org feel more accessible, we must first understand how the visitors to the site think of mental wellness, and how it impacts their lives.

We conducted a series of User Interviews, and they revealed that individuals are generally interested in mental health support but are deterred by the complexity of finding and accessing trusted resources.

 

Specifically that:

  • It’s hard to find trusted sources for information, and even harder to afford professional help.

  • People want to take better care of themselves in a more holistic way, but don’t know how.

SURVEYS​

Across 26 survey responses, we discovered that 76% of respondents have previous experience in working with a mental health professional.

Three out of four respondents wanted to learn more about different therapeutic options. But 57% of users surveyed said that at some point, they’d reached out to their support networks for help without receiving it.

DATA SYNTHESIS​

By distilling this user data into a series of Affinity Diagrams and Empathy Maps, we surface commonalities and pain points. Now we could define a clear vision of how NAMI.org could better provide for its visitors.

 
STORYTELLING

We created a User Persona that acts as an avatar of the typical visitor to the site. This persona guides decision-making throughout the design process. It answers questions like, “What’s their life like? What kind of help do they need?”

 
USER INTERFACE ANALYSIS
HEURISTIC ANALYSIS​

The NAMI website was overwhelming, with a treasure-trove of information scattered throughout the website. Our heuristic evaluation revealed that the navigation was redundant, unclear, and busy - in short, very hard to navigate. The color scheme is brash and gives off an institutional vibe. This isn’t really helpful or reassuring if someone is struggling with mental health. Our goal was to step away from the over-formalized, cluttered, and bright tone originally present on the NAMI website.

INFORMATION ARCHITECTURE​

To gain insight into the real issues in the site navigation, we created a site map of NAMI.org, and performed a card sorting exercise to map out the content of both the original site and our desired structure. We focused on streamlining navigation menus to create a simple user path. This will help accessibility for all site visitors, regardless of what impairments or disabilities they may have.

 
 
PROTOTYPING + TESTING

Throughout all iterations we focused on alignment, implementing a soft color palette and friendly non-stigmatizing language. We thought about what was essential for our users, and what was clutter. Since our users are in a crisis, less is truly more because the main goal is to get our users what they need quickly and easily. Our usability tests helped us to pinpoint where to direct our redesign efforts and quickly solve any usability barriers. 

MID-FIDELITY TO HIGH-FIDELITY WIREFRAMES
 
USER TESTING​

Prior to Redesign

The NAMI website was overwhelming, with a treasure-trove of information scattered throughout the website. Our heuristic evaluation revealed that the navigation was redundant, unclear, and busy - in short, very hard to navigate. The color scheme is brash and gives off an institutional vibe. This isn’t really helpful or reassuring if someone is struggling with mental health.

Our goal was to step away from the over-formalized, cluttered, and bright tone originally present on the NAMI website.

USABILITY TESTING

After Redesign

Tests on Mid and High-Fidelity prototypes showed that users could now easily complete their tasks, and were delighted by the supportive quotes, the soft calming vibe, and easy access to support groups

VISUAL DESIGN

Once we tested out all usability issues, it was time to establish the look and feel of the site. We created a Moodboard, which sets the comforting tone and color selections we wanted for the site.

We built a handy Style Tile is great for quick reference and sharing with other teams and stakeholders. We establish standardized formatting and UI component parameters with a detailed Style Guide. Any new designer who wants to update the site in the future can reference these materials to maintain consistency.

STYLE TILE & STYLE GUIDE
HIGH-FIDELITY PROTOTYPE
 
FINAL THOUGHTS

In our project, we accomplished a full shift of tone for NAMI and directed it clearly towards peace of mind through spacious and clear design. One of the main challenges we faced is how to concisely communicate a lot of information for a user with a shorter attention span.

Going forward we’d like to add in additional micro-interactions to add comfort and delight to the potentially intimidating process of finding support for one’s health.