Redesigning a UX-researched website for a non-profit organization

Problem: The MAAFA Redemption Project badly needed a website redesign

In mid 2020, the MAAFA Redemption Project received a sponsorship grant from the Oprah Winfrey Charitable Foundation; with the political and social events around the Black Lives Matter movement, the MAAFA Redemption Project was gaining more traffic to their website. 

The Executive Director wanted to have a “professional” redesign of the website. In an onboarding meeting with the executive director and assistant, I learned this redesign should accomplish three goals:

• Rebrand the Maafa Redemption Project

• Reorganize the website

• Increase trustworthiness of the website (for donations)

I also learned that the Executive Director designed the site, and didn’t include any UX research in his process; since I’d lead the design for this project, I insisted on also injecting our process with UX research. 

Problem: mobile users are low-earners.

John Hancock (JH) is a life insurance provider and long-time partner of the Vitality Group. JH insurance holders use the Vitality Program mobile app and website to complete activities like getting regular biometric screenings completed and engage in healthy behaviors to earn points and move up in Vitality status. By increasing their Vitality Status, insurance holders get discounted premiums and access to increasingly better rewards like discounted Apple Watches, gift cards, and cash back on groceries. The more members do healthy things, the better their rewards.

Analyzing the current website

After analyzing the website, I highlighted some potential pain points that I wanted to address in the redesign: 

• Homepage doesn’t introduce users to what MAAFA is

• Low fidelity photography 

• “Who we are/What is MAAFA” could be condensed into one page

• “Features in the news” doesn’t allow for expansion and more features 

• Gallery is nice, but what purpose does it serve? 

• “Contact” page is hidden under “More” tab

• Donate button is somewhat hidden, and opens a small PayPal popup

• Donation page should reference 501(c)(3) certification to increase trustworthiness

I hoped to verify, address and resolve these with UX research throughout the design process.

Finding MAAFA’s Branding and UI Approach

In early meetings with the internal MAAFA team made up of the Executive Director and the Executive Assistant, I learned that they described MAAFA’s brand as friendly, trustworthy, professional, and inspiring. When asked which celebrities MAAFA would be, they looked to the Obamas, Ben Mays, and Kanye - regal, approachable, inspirational, but also creative.

I also looked for inspiration from the MAAFA team; when asked, they revealed they wanted to emulate the brands and websites of Chicago Cred, the Emerson Collective, and the Obama Foundation websites.

I took notes on the experiences for each of these websites, and made a list of takeaways that I wanted to emulate in MAAFA’s branding:

• Light UI is a common theme

• Consider a minimal approach with a lot of negative space

• If they plan on getting more hi-res photos, we can also use large/high-res photography

• We can create a newsletter archive similar to the way the Obama Foundation lists their blog posts

• The Donation button must be shown on every page prominently

• The Donations page should be cleaned up and supported on a new page

• Include the social media links in the footer

• Blue can be used as a recurring color, an accent color, or in conjunction with black/white branding

I then created some moodboards that captured this feedback, as well as style tiles that translated the moodboards into UI; the style tile the MAAFA team chose would evolve depending on the customization limitations of WIX’s platform.

Discovering the website architecture

Since no previous UX research was done for this website, I decided to start with figuring out how the site should be organized.

Open Card Sort

The MAAFA team listed pages and features they wanted to keep in the website as well as some new pages they wanted to introduce:

• About MAAFA

• Subscribe to newsletter

• Mentions in the news

• Corporate sponsorship

• Volunteer opportunities

• Employment opportunities

• Contact

• Social media

• Current corporate sponsors

• Address

• Phone number

• Email address

• Donate

• 501(c)(3) certification details

• Newsletter updates

To learn how users thought this kind of information should be organized on the website, I created cards for participants to sort them in an open card sort on Optimal Workshop:

I recruited ten participants similar to MAAFA’s ‘typical user’. Since this method used only ten participants (the max number I could include on a free trial of Optimal Workshop), I was able to pull similarity matrices, dendrograms, and 3D cluster views based on the various categories participants created.

Generally, I decided that the most common categories we could use for the site would be:

• About MAAFA

• Contact Us

• Follow Us

• Get Involved

• In the Media

• Newsletter and Blog Posts

• Support MAAFA

Closed Card Sort

To verify these categories, I set up a closed card sort through Optimal Workshop; ten new participants were recruited to sort the same cards from the open card sort into the seven categories. I was able to pull the same analyses in the closed card sort, verifying the accuracy of these categories for users.

Tree Testing

I wanted to make sure users could navigate through the website given the new organization; to measure this without a clickable prototype, I used Optimal Workshop’s tree testing feature. I used the categories discovered in the card sort activities and created targets similar to the cards under each of them.

To mimic the goals that the MAAFA team wanted the website to accomplish, I tasked 12 new participants with finding the donation page, an article mentioning MAAFA in the media, and a way to subscribe to their newsletter. (With the Optimal Workshop free trial, I was allowed only 3 tasks.)

Generally, the participants were successful in finding each of the target pages using the navigation.

Empowered with this data, I was ready to translate this organization and navigation into wireframes.

Designing wireframes

So the wireframes could be easily accessed by the MAAFA team, I designed them as a clickable prototype on Figma. 

You can view the clickable wireframe prototype here.

Evaluating the prototype’s usability

I wanted to make sure the website was navigable, and user-tested the wireframe prototype with 5 participants. By testing at this stage, I would make sure the participants gave feedback based on the organization, navigation, and content instead of focusing on the UI.

Participants were tasked with finding the same three pages of the website as in the tree test, and provide comments/feedback about anything about the website they saw along the way. 

Some questions I asked participants:

• Where are you interested in clicking on? 

• Let’s pretend you wanted to make a donation - how would you go about doing it?

• You know that some news articles, videos, and blog posts have featured MAAFA. Where would you find these articles, videos, and blog posts?

• Where would you go to subscribe to MAAFA’s newsletter?

• What do you think about the organization of this website? 

User testing interviews revealed:

Participants generally could navigate this website.

• Participants were okay with donating through PayPal.

• Subscribing is easy when it’s on the homepage and newsletter page, but it should be included in the footer.

• They liked and preferred having the ‘about us’ details on the homepage.

• They never fill out contact forms - they prefer email addresses.

• The Get Involved page is easy to scan and very straightforward.

• Even though the logo is highly detailed, users will click on it to navigate to the homepage.

I made updates to the wireframes based on this feedback, and presented the updated version to the MAAFA team.

Testers said good things about this solution.

“I’m not sure I’d expect to donate through a GoFundMe - I might trust it more if I knew this were going straight to the church or whoever is responsible for the program.”

“One issue I have when I visit vendor pages, most of the times, I don’t want to submit a question on this page. I DO want to send it from my own work email, so I usually look for even a general email.”

“I kinda dig how you're combining the concept of a landing page and what normally goes in a separate "About Us" section - having a lot of that info front and center feels like an easy way to get that info without having to dig.”

Applying UI to the wireframes

With a user-tested wireframe experience, I wanted to give the MAAFA team some UI approaches for the website based on the preferences for style tiles developed earlier.

You can view the different homepage UI approaches here on Figma.

In a meeting, the MAAFA team and I decided to continue with the third option since it included the least editing of photography, we could guarantee color contrast compliance of content, and just came off as the most ‘clean’.

Building and adapting the designs on Wix

Instead of designing the rest of the website screens with the UI we landed on, I went straight to Wix to learn how much of this design could be recreated. Wix had some limitations in UI customization, and I made sure to convey these limitations to the MAAFA team.

In the end, I was still able to stick to a very close replication of the UI originally presented. You can view the live website here.