The National Alopecia Areata Foundation (NAAF) was founded in 1981, and is widely regarded as the largest and most representative alopecia areata advocacy organization. NAAF funds research to find a cure or acceptable treatment for alopecia areata, supports those with the disease, and advocates on their behalf. With over 73,000 members in the alopecia areata community, which include patients, family members, healthcare providers, and researchers, NAAF engages with the community through its support programs, email newsletters, the website, research summits, and their annual patient conference.
For eight months, I was the sole designer responsible for the redesign of NAAF's new website. I worked closely with the organization to assess problem areas and propose solutions that would resolve user experience issues. We performed a website audit, conducted user interviews and a card sort, and assessed page performance with data provided by Google Analytics. In addition to addressing UX pain points, we explored the brand's visual identity through a Brand Mission Workshop, four stylescape concepts, and a user interface kit.
At the beginning of the project, we conducted a Brand Mission Workshop to guide us through the design process, and thoroughly discuss how to answer the question: “Who is NAAF?” The workshop helped us uncover deep insights about the organization’s Culture, Audience, Voice, Benefit, Value, and X-Factor.
After the workshop, I conducted user interviews with several members of NAAF’s community. The focus of the interviews was to get to know community members, identify pain points with the current website, and explore opportunities for the new website. We interviewed 15 community members who shared their unique experiences with alopecia areata. We discovered that a major pain point in the existing website was poor navigation. Following the interviews, I created Persona cards to help visualize the needs and frustrations we heard from our diverse set of interviewees.
At the start of the design process, I created three distinct Stylescapes to represent a visual direction for the brand and new website. We experimented with color, typography, shapes, texture, and different tones of voice. Through review sessions, we determined that NAAF’s brand should be playful, yet authoritative and trustworthy. The final (fourth) Stylescape became a mashup of the three concepts, with NAAF’s signature blue/green color, accents of yellow and navy blue, playful circular shapes and patterns, and informational UI elements.
We also conducted a Card Sort activity to test our ideas for the website’s navigation and information architecture. With thousands of pages on the existing website, we were challenged with grouping these pages into a single category. We were able to get responses from 10 participants, who each organized a set of 33 cards into our set of 10 categories.
Results from the Card Sort helped to finalize the website’s sitemap and information architecture. We moved forward with 7 primary menu categories: Alopecia Areata, Support, Our Community, Get Involved, Treatments, Research, and Medical Professionals. We also decided that a mega menu would be the best solution for displaying as many links as possible in a single dropdown. With the sitemap complete, we also came up with a content strategy for new pages of the website.
Taking inspiration from the 4th Stylescape, I crafted detailed mockups of the homepage, striving to achieve a high level of fidelity. To enhance visual contrast, I introduced a dark gradient background color employing NAAF's captivating shades of green and navy blue. Additionally, I integrated various fresh UI elements, enabling users to swiftly navigate to different sections of the website.
The NAAF website's interior pages encompassed a range of valuable content pages. These included an Events page, a comprehensive listing of Support Contacts, a Doctor Finder tool, dedicated Team pages, a rich collection of Resources, an FAQ page, a Glossary, various educational pages, and convenient forms to sign up as a Support Contact, Youth Mentor, or Mentee.
To cater to the diverse range of pages and information, the mega menu design supported multiple columns of links. Our intention was to provide users with multiple pathways to access information, regardless of where they were navigating within the website. Furthermore, I implemented a secondary navigation below the announcement banner, offering quick links to popular pages for convenient access.
During the website design process, I curated a UI Kit encompassing typography and color styles utilized in the mockups. Additionally, I took the initiative to refresh the outdated NAAF logo. This involved updating the typeface and removing the light blue outline surrounding the tree, resulting in a more refined and distinct shape.
