Non-Profit Marketing Website Redesign

The Project

I was hired as a digital team-of-one for a small non-profit in Chicago. There had been ongoing complaints from staff and funders alike on how difficult it was to find anything on the organization's website, oralhealthamerica.org.

It had gotten to where our fundraisers were avoiding sending the website to their prospects, instead opting to share their own PDFs about the non-profit's programming and funding opportunities. Something needed to change.

I took on redesigning Oral Health America's website with three strategies to address the challenges I saw:

1. Fix the information architecture to match the paradigm of our users (partners and funders).
2. Improve the content strategy and ensure the right information was available when needed.
3. Modernize the look-and-feel of the website to build organizational trustworthiness.

Key Outcomes

One year after launching the redesign, we saw the following quality indicators:

• The homepage bounce rate decreased ↓ 17%
• 404 errors decreased ↓ 79%
• Mobile use increased ↑ 23%

See all Outcomes →

Content Audit

Before I could begin the work of reorganizing content or layout, I needed to know exactly what we were working with. That meant [dun dun DUN!] a Content Audit.

In addition to collecting the standard data points of a content audit (page depth, title, pageviews, last updated, etc.), I also identified which pages were used as part of fundraising efforts and whether they reflected the most-recent fiscal year—a critical piece information for non-profit viability.

My Web Strategy / UX Team

My team represented individuals from communications, fundraising, program, advocacy, and even finance—all departments whose work was in some way impacted by the usability of the website.

My team needed to be different, to go above and beyond that of a normal stakeholder. Because I was a team-of-one, I needed people who would do the UX work with me.

Throughout my career, I’ve worked in small or one-person teams, but I've learned that having a range of perspectives in the room is invaluable when your goal is to achieve the best outcome possible. For this project, it meant that I focused some of my efforts on teaching the principles of web design, user experience, and content strategy to my team, giving them a more informed voice.

Team Goal 1: Solicit User Study Participants

Friends, Romans, countrymen, lend me your 15-20 minutes of time to participate in an online card-sorting study. Non-profit organizations often need to be creative about new projects that normally require funding when there is none to be had. This meant that, in lieu the ability to advertise for and compensate research participants, I tasked the Web Strategy / UX Team with asking friends, family, and social media circles to participate in our online card-sorting study.

Team Goal 2: Develop Personas & Prioritize Efforts

For this task, I lead a workshop on how to build personas for our target web audience and had each team member build a persona based on known roles affiliated with the organization (e.g. "corporate sponsorship manager" or "program partner seeking resources").

After everyone had built their persona, I requested the team order them by whose needs must be met first when visiting oralhealthamerica.org.

Many on the team were uncomfortable with this part of the exercise: as a non-profit organization, our goal is to help all people—especially vulnerable populations—and ranking one person against another felt wrong somehow.

I used this moment of discomfort to talk about how web users can be (and for NGOs, often are) different from the people that we serve through our work. This perspective allowed me to bring the team into alignment and helped us identify the website’s intended purpose and target audience.

Team Goal 3: Analyze Research Outcomes

After we had completed the Personas exercise, I presented the team with the results from the online card sorting study and my own competitor analysis on how other non-profits were organizing/labeling their websites.

The results spoke for themselves: we saw obvious trends in how people grouped the content on our website and which labels they preferred to use for certain concepts. It's times like this when I’m most passionate about I do: seeing others have that moment of clarity that comes when you follow the lead of your users.

Team Goal 4: Recommend New Website Structure

With our primary audience in mind and a clear understanding of how our users group the content on our site, my Web Strategy / UX team formed recommendations on how we should re-structure the website. When I launched the redesign, it was a snap because my team had already done the heavy lifting of building a well-structured information architecture.

Outcomes

Building my own Web Strategy / UX Team within the office had several benefits beyond ensuring we delivered an excellent product: I had buy-in from most of the organization about the importance of user research, and my colleagues indicated they now felt confident sending out our website to donors, prospects, and partners.

After the project launch, we began to receive comments from other organizations and individuals about our website:

"I like the look and feel of [oralhealthamerica.org]. Simple design but colorful and powerful."

2016 Health Blog linking to oral health resources

“The [Jane Doe Organization] is in the process of changing its website and we really like the OHA website. We would like to know if OHA used a third-party vendor for the development of the website.” 2017 Program Partner

Our analytics data also indicated that users were finding the things they were looking for more easily than before, and that the mobile experience had also improved.

I recognize that building an in-house UX / Web Strategy Team is not always practical given time and other constraints. For this project, it was an excellent way to create a better end product while educating others about the importance of user-centered design and building mutual confidence about our web offerings.

Before/After: Homepage, On Load

Before/After: Homepage, On Scroll