The Headache Alliance, Inc.
Leading a team to design a professional website to strengthen visibility and support for headache disorder advocacy.
Timeline
May 24 - August 24
​
My Roles
Product Manager
Product Designer
Skills
Project Management
Client Engagement
User Research
Visual Design
Team
1 Design Manager
5 Designers
Project Overview
In collaboration with Develop for Good, I led the effort to design a standalone website for The Headache Alliance, Inc., a nonprofit dedicated to improving the lives of those with headache disorders.
As the Product Manager, I guided a team of five designers over the course of 15 weeks to create a polished and credible online presence that supports the organization’s mission. The website includes program details, upcoming events, donation opportunities, and news updates, with an emphasis on an accessible design for those with headache sensitivities. The overall goal was to increase visibility and attract more donations for headache disorder advocacy.
Outcome
At the end of our 15 weeks, this is what we were able to accomplish:​​​
Designed and prototyped a professional, stand-alone website
Interesting interfaces and interactions with accessibility in mind​​
Engaging use cases like donating, newsletter sign up, and contact
​​
∞
Client Collaboration
Partnership
The Headache Alliance, Inc. partnered with Develop for Good to create a standalone website aimed at enhancing their visibility and increasing donations for headache disorder advocacy. This was their first semester working with Develop for Good (Summer 2024).
I led meetings with the founder of THA each week of the 15-week summer semester. From scoping all the way to handoff, she gave her feedback for every step in the process. After each client meeting, we had an internal meeting to debrief, demo progress, and discuss next deliverables.
01
Scoping + Research
Establishing Project Requirements
First, we defined the goal and the user with the guidance of our client.
The Goal
Design a website to provide information about THA for donors to learn about THA and donate.
Target User
Primary: Funders
(corporate sponsors and individual donors)
Secondary: General public
Analyzing the Existing Platform
The Headache Alliance initially had only a single landing page hosted on their sister organization’s website. We analyzed its limitations and identified 4 key priorities for improvement:
01
Lack of Brand Identity
02
Text Heavy
03
Action Items Not Visible
04
Unclear Hierarchy
Competitive Analysis
Next, we reviewed other websites focused on headache disorders. Many featured innovative accessibility tools that we considered for inspiration.
02
Design Process
Site Map
We started with a simpler site map (left) where programs were nested under the About page. After iterating with client input each week, we separated them and added dedicated pages for Events and News to better support user needs.
Ideation and Iterations
In the early stages of design, we focused on brainstorming a wide range of low-fidelity concepts to share with each other and the client during our weekly meetings. After gathering feedback each week, we selected our strongest ideas and refined them further, gradually increasing the level of detail and polish.
Incorporating Branding and Content
We built a cohesive style guide using the existing logos as inspiration. We strove for a professional, headache-friendly design that felt easy on the eyes. This kept the design language consistent across all pages, even as individual designers took ownership of their tabs.
Starting from scratch with content, we designed sections and headings, while collaborating with THA’s founder to craft the body text. A shared Google Drive kept everyone aligned, providing quick access to logos, images, and text content.
User Testing
After completing our mid-fidelity wireframes, we conducted eight user testing interviews to evaluate the site's usability at this point. Using the feedback gathered, we refined the wireframes before progressing to high-fidelity designs in order to deliver the best possible user experience. From these sessions, we identified the following design goals to include in our final product:
01
Improve clickability of buttons using hover effects or clear colors
02
Break up the pages with more dividers and text hierarchy
03
Slow down animations and popups to process content more comfortably
03
Final Design + Handoff
Here are the final designs for key pages: Home, Events, Programs, and Contact.
Home Page
Programs Page
Events Page
Contact Page
Next Steps
As the project moves into the development phase, the next team—whether an outsourced group or Develop for Good developers—will build out the functionality for the website we designed. To ensure a smooth transition, we prepared a detailed content document with final text and notes on areas of the prototype that need further clarification or completion.
04
Reflection
This project taught me a lot about leading a team remotely while collaborating closely with another manager. I explored ways to motivate the designers—like by giving them ownership over sections of the project. But the biggest challenge (and reward) was working directly with the client. We kept communication clear and constant to ensure the website reflected their vision while staying professional.
​
I had an amazing time working with The Headache Alliance, Inc and making an impact. Handing off the final design for development was a proud moment, and I’m excited to see it come to life soon!
​​​​
​
​
​​​​
A special thank you to my team!​