Crafting a User-Centered Experience

View the Site

  • UX Research
  • Website Design & Development

The Cystic Fibrosis Foundation (CFF) exists to cure cystic fibrosis (CF) and to provide people living with the disease the opportunity to lead full and productive lives by funding research and drug development, promoting treatment, and ensuring access to high-quality care.

CFF supports people with varying connections to cystic fibrosis, and they know that depending on someone’s relationship to the disease, there is a wide range of ways in which people might choose to get involved with the organization. In 2018, CFF knew that the “Get Involved” section of the website reflected the needs and priorities of the organization’s internal stakeholders. They wanted “Get Involved” to better reflect the needs of their diverse audiences, making it easy for them to engage in the ways that were most meaningful to them. They also knew that to do this effectively, they needed to get out of their own heads and gain a fresh perspective. So they partnered with Teal.

Getting to Know the Users

We kicked things off with a Discovery Meeting where we determined with the CFF team that our target audience for this section of the website was the “inner circle,” or people who are one arm’s reach (or one hug) away from a person with CF. Once we had refined our core audience, we conducted a series of 1:1 interviews with members of the inner circle to understand how they want to get involved with CFF online.

Simultaneously, we held a series of conversations and workshops with key internal stakeholders at CFF to determine their priorities for the Get Involved section. The best solutions are those that balance audience needs with organizational priorities, so both of these perspectives were critical to informing our solution.

01 / 00

We worked with the CFF internal stakeholder team to determine "What's on Our Radar" and "Ways We Want People to Get Involved."
Through our discovery exercises we were able to cluster topics that we wondered about, cared about, assumed, and already knew.
We performed an internal exercise to get a high level look at what it means to "Get Involved."
After working with CFF, Teal was able to further refine topics into high-level themes to tackle for the Get Involved redesign.

Because one of CFF’s primary goals was to avoid a laundry list of internal priorities, we knew that our research needed to consider the way Get Involved content is organized. We wanted to understand which ways of presenting content and talking about CFF’s work felt most intuitive to website visitors. So we conducted a virtual card sort, whereby we presented elements of the section’s site map to members of CFF’s community of supporters and asked them to sort those elements in the ways that made sense to them. The results of our card sort helped us to examine whether our initial efforts to organize the section’s content felt logical to users. We also incorporated those test results into the next phase of our work together — wireframe prototypes.

From our card sorting exercise, we were able to quickly see how users tend to group information.

Creating a Meaningful User Experience Through Testing

One major theme that came out of our research is that “getting involved” means different things to different people We needed to design an experience that offers multiple ways for users to get involved, so the initial set of wireframe prototypes we created focused on guiding users to specific content, while still offering the option to choose specific ways of getting involved.

But we didn’t stop with these initial prototypes. It was important to both Teal and CFF that we not rely solely on our own assumptions about the ways the inner circle wants to get involved. We wanted to put our research results to the test in the real world, so we conducted a series of usability tests with a variety of people who are in the inner circle and have differing relationships with CF. Testing our wireframes with real-life website users (and potential users) gave us some great insights into areas we could improve, optimize, and even eliminate some UI elements.

Our final wireframes reflect the results of our research and usability testing by giving people control over their experience with the “Get Involved” section. They provide the option for people to get involved based on their relationship to the disease, or based on the type of activity they are interested in — with a “view all” option for those who prefer to browse.

Putting it All Together

From there, we crafted a visual design that fit our new vision for the Get Involved section while at the same time meshing seamlessly with the look & feel of the rest of the CFF website. The end result is a Get Involved section that reflects the lived experience of being in the inner circle. The new section is inclusive of a wide range of experiences, offers multiple pathways for people to get involved in the work that CFF does, and feels fresh, dynamic, and current.

Teal took time to listen and understand our organization, audience, and goals. The kind of approach that works for other companies doesn’t necessarily work for us, and they realized that. But they still found a way to be innovative and accomplish what we wanted...We've received good feedback from test users, who are impressed by how much more streamlined and intuitive the site is. It used to overwhelm people, but now it’s much easier to navigate, and people seem to be engaging with us more.

Margaux O'Malley
Cystic Fibrosis Foundation


Teal Media is a woman-owned full-service creative and web design agency based in Washington, DC. We offer UX research, web design & development, brand strategy, and creative support to mission-driven and nonprofit partners. We believe purposeful design can transform organizations, inspire action, and enable progress.



Let’s work together!