NAMI DC
Website Redesign
Client
NAMI DC (local chapter of NAMI, the National Alliance on Mental Illness) — unsolicited
Scope
Responsive website redesign
Duration
Jun - Jul 2020 (part-time)
Role
UX Designer
Mentor
Myrto Papagiannakou
Tools
Sketch, InVision, Maze, Google Forms
Challenge
NAMI DC is a small chapter of a large national nonprofit organization, the National Alliance on Mental Illness, and currently has a functioning website. As with any unsolicited redesign project, the challenge comes with lack of access to website analytics, financial reports, and feedback from actual users.
Objectives
Redesign the current website and make it responsive
Improve the website’s information architecture and usability
Background
To give a bit of a background, NAMI DC is a local chapter for the National Alliance on Mental Illness. It has been dedicated to providing opportunities to enhance the quality of life for individuals and families living with mental health conditions through better understanding, coping skills, and mutual support. Along with their Signature Programs, NAMI DC provides a Helpline to offer support, education, and resources to the community.
At First Glance
One concern involves the site’s accessibility and readability. On the homepage, you can see that there are a mix of one and two columns filled with content — almost akin to a newspaper. However, since this is not a publication, it would be better to have content displayed in either an F- or Z-pattern to make it easier to follow.
Additionally, the navigation bar at the top is a bit difficult to read due to somewhat low contrast. At this point, I’m thinking if it might be better to either choose an image that would produce high contrast or have the navigation bar stand on its own. Another first impression is that it was somewhat challenging to find the Signature Programs offered by the organization. So, I thought about reorganizing the structure of the sitemap.
One thing I definitely wanted to keep in mind is that the website prides itself on its newsletter. I wanted to make sure that it also stood out in some way in the redesign.
Process Overview
01. Empathize
Research Goals
I started off by creating a Research Plan that mostly helped me finalize my target audiences:
People who have received mental health services, or have family members that have received mental health services
Providers who refer patients for mental health services
Donors and/or volunteers of nonprofit organizations
Through these groups, I hoped to identify the appeal of receiving mental health services; as well as contributing to mental health organizations through membership, volunteering/interning, and donations.
Methodologies
Secondary Research
Better understand navigating a nonprofit organization online
Competitive Analysis
Evaluate other successful nonprofits
User Surveys
Provide insight into the kind of information visitors are seeking when exploring mental health organizations
Secondary Research Findings
Before diving into the redesign, I first had to understand the goals of nonprofit organizations. Generally, they include to:
Recruit volunteers
Raise awareness for their respective causes in order to increase funding
Provide resources
Receive donations
Increase email subscribers
How does this translate to the most common Key Performance Indicators (KPIs) for nonprofits?
Email open and click-through rates
Number of beneficiaries served & program attendance
Beneficiary satisfaction rate (including Pre and Post scores)
Donor & donation growth
Donor retention rate
Fundraising ROI
Website page views & landing page conversion rates
Competitive Analysis
NAMI is arguably one of the most successful and well-known national organizations in the mental health arena. But keeping these goals and KPIs in mind, how are other nonprofit mental health organizations getting by?
The sites for many nonprofit organizations, especially for local chapters, are often crowded with visual noise and disorganized information architecture. Although many appeared with outdated user interface designs overloaded with information, some nonprofit organizations included shapshots displaying financial trends and accomplishments made in the most recent year — a sign of transparency.
User Interviews
To better understand our users’ goals and pain points, I generated three separate surveys geared toward the previously mentioned target audiences. The following is a summary of my findings:
Meet Our Personas
02. Define
Feature Roadmap
NAMI has established itself as a great asset to the national mental health community. As a former clinical therapist, I had considered referring my patients to their services in the past on several occasions both in South Florida and the DMV area. Referencing the competitors from my competitors analysis along with other NAMI chapters from regions with forward-thinking design, including NAMI California and NAMI New York State, I created a Feature Roadmap to prioritize the features most relevant to the site.
03. Ideate
Wireframe Sketches
At the heart of design, we have its information architecture. To figure out the best way to structure the site, I used the current NAMI DC website and other NAMI chapters as references for my initial sketches. I wasn’t 100% sold on the navigation bar at this point, but I knew that would be resolved once I thought it out with the sitemap. I was really feeling the layout of the landing page on Version 4 of my sketches though, which provided a brief introduction of NAMI, its impact, its most recent updates, and its Signature Programs.
Sitemap
Following my sketches, I proposed a sitemap to clarify the structure of the pages within the site to help me better visualize and understand the information architecture. Upon clicking on the image, you can see that I’ve broken it down into several major categories that would later include sub-categories for simpler navigation.
Task Flows & User Flows
I wanted to create two task flows that I could use for my usability testing later. Currently, the site does not have a registration form for its Signature Programs; rather, they provide an email address for you to send an email to sign up. I wanted to eliminate this redirection so that users can remain on the site and be encouraged to explore more (e.g., find other programs/resources, sign up for the newsletter, follow social media pages). User flows for my personas were then used to tie in the importance of empathizing with the user.
Mid-Fidelity Wireframes
Responsive wireframes for tablet and mobile
UI Kit
Responsive UI Design
I chose the cherry blossoms for the hero image as they're huge here in DC during the spring and people love to see them. It's a timeless metaphor for human existence holding values of mortality, mindfulness, and living in the here-and-now (a huge aspect people strive for in mental health). As far as the mood, I wanted to lead it with feelings of calm, serenity, and hope -- with drops of casual. I stuck to the NAMI colors according to their style guide.
04. Prototype
Hi-Fidelity Prototyping
Using Craft by InVision, I created the pages that aligned with my user flow and began prototyping to prepare for my usability testing. When we prototype and test early in the design process after the initial iterations, it helps us address problems and come up with solutions before problems exacerbate.
My prototype planned to test for two user tasks:
Donate to the organization
Register for one of the Signature Programs
The second task was planned with two possible user paths; one from the landing page and one from the navigation bar.
Usability Testing
I drafted a Usability Test Plan to prepare my facilitation of the user testing and formulate my scenarios. Although conducting both unmoderated and moderated usability testings is not a standard practice, I wanted to take advantage of this learning experience by exploring both types and obtain more feedback on the design.
Test Objectives
Test the overall ease of navigation and quality of site flow
Identify areas and features of the site that cause confusion, hesitation, or frustration for the user
Test Subject
High-fidelity prototype for NAMI DC website (desktop version)
Participants who have experience making donations online and registering for classes/programs online
Unmoderated (Maze): seven participants
Moderated (remotely): three participants
Phase I: Usability Testing Results (Unmoderated)
Donation
Users generally found this task easy, especially given that the Donate CTA button appeared prominently on every page.
Program Registration
The design allowed for users to locate the indicated program using two different paths. Six out of seven testers located the program directly from the landing page.
Phase I: Usability Testing Results (Unmoderated)
Notes and observations and Affinity Map
I found that the biggest take-away was that the tasks were fairly easy to complete, particularly the Donation task. However, some of the frustration stemmed mostly from the wording of the navigation bar and hero image, which confused some users when it came to the Program Registration. I decided to use this information for my next testing phase and observe more closely.
Phase II: Usability Testing Results (Moderated)
Program Registration
When prompted to locate one of the programs, two out of three participants had some difficulty due to the phrasing of the navigation bar links, particularly knowing the difference between “Get Involved” and “Support,” where they would find the programs.
It became abundantly clear that the navigation bar needed to be rephrased to something that was more consistent. I found that “Support” was too vague — Does that mean get support or give support, and how is that different from “Get Involved?” I could see the hesitation in my users, even though they were able to complete the task in the end.
Key Findings
All participants were able to complete the tasks successfully. Generally, participants found the navigation clear, easy, and straightforward.
Participants made positive comments about the visual design, describing the hero image and colors as very serene and calming.
Participants were split on navigating to the program registration using two different paths, indicating that also having the programs on the landing page was a success. The other path could use improvements by rewording the navigation bar.
Priority Revisions
I tasked myself to revisit the design and prioritize adjustments according to user feedback:
Rephrase “Support” in the nav bar to “Get Help” so that it is more differentiated from “Get Involved”
Reword hero image text so that it is more clear
Current Design vs. Concept Redesign
Landing Page
Next Steps
I’d love to hand this redesign off to NAMI DC and get their feedback to see how to implement this with a development team, as well as see which features in my proposed roadmap could we explore next.
Final Thoughts
As I reflect on this project, I reflect on my journey as a designer — a non-linear one at that. I don’t take my past experience in the mental health field for granted, as it has gifted me with experiences to better understand and empathize with others. This is one way I wanted to express that gratitude by giving back to the communities that give, give, give. From a researcher’s perspective, this project has allowed me to explore other ways to conduct user research through surveys and usability testing through unmoderated approaches. I also was able to hone in on my visual creativity by thinking about how to adequately fill white space while still allowing the page to breathe freely.