Redesign of the National Alliance on Mental Illness website.
Duration: 3 weeks.
M Y ROLE
(team of 3 designers)
Desktop website redesign of NAMI.org
Figma, Miro, Whimsical, Photoshop
My Role: UX/UI Designer
Aura Dave, UX/UI Designer
Brooke Bereznak, UX/UI Designer
Prototyping & Testing
User Research Data
Feature Prioritization Matrix
Paper Protoype Sketches
Mid-Fidelity Wireframes & Prototype
High-Fidelity Wireframes & Prototype
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 at the time of this project
Proposed redesign concept
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.
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.
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.
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.
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
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.
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
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.
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
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
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.