Upendo Kwanza Site Redesign

What I did: C&C Analysis, User Interviews, HiFi Wireframes, Usability Tests
Project Duration: Three months
Tools I used: Figma, Slack, Asana, Google Suite, my brain

The Problem

An educational nonprofit based in Tanzania experienced stagnation in their donations, meaning less financial support for their students.

My Solution

Transform insights on why people donate into new brand guidelines, improved storytelling, and an emphasis on visuals within a redesigned website to increase donations.

Redesigned Site

Upendo Kwanza saw a decline in donor dollars

This is an issue for any nonprofit, naturally, but especially for one who uses its funding to supply rural Tanzanian students with academic materials and school tuition; the ability for students to attend school was at stake! I worked alongside another UX Designer and UX Writer under a Project Manager to identify and address this concern.

We did not have access to donor's contact information, so we interviewed our personal network. We asked them about their donation habits and preferences. Then we showed them the existing Upendo site and gauged their likelihood to donate.

Upendo's site does not evoke a sense of trust

Here is what users said when viewing the old website:

"The colors are too muted. It feels so dreary."

"These all look like stock images. Are these the actual kids?"

"What does it mean to become a volunteer?"

"The colors are too muted. It feels so dreary."

1/4

Overall, users felt uninspired by the site and were unaware of how their donations would create an impact. Additionally, the site's colors and imagery made it feel untrustworthy. This feedback helped illuminate the stagnation in donations towards Upendo.

Other nonprofit sites informed our designs

I focused on the colors, imagery, and copywriting of competitor sites to understand how/why they evoked trust.

Success stories create trust by describing the real-world impacts of user's donations

Vivid imagery supports this donation box with pre-filled options to encourage higher donations

Images of scholars creates empathy towards those you're trying to help

Imagery of the mission in action helps users understand what the organization is accomplishing

Hero banner that stands out right on the landing page. Include a CTA

Another example of the mission in action

Another hero banner that stands out with a CTA to connect to social media

Future endeavor - make donations as accessible as possible for users

Remind users what the problem is and how their donation can solve it right next to the donation box

1/1

This exploration allowed us to isolate several patterns in successful nonprofits that we would emulate in our own designs:

Clear Mission and Impact: let users know the difference the organization is making in the world
Transparency: provide information on what happens to the money once it's received
Testimonials: highlight stories about beneficiaries, volunteers, and donors to demonstrate the real-world impact of the organization's work
Visuals: use high-quality photos and videos to showcase the work in action. This both engages users and makes the organization feel more credible

Updated Colors, Copywriting, and Campaigns

Thus, the design team created a new design system with hierarchical fonts to maintain visual consistency, updated brand colors that evoked a sense of happiness and peace, and asked our on-the-ground volunteers in Tanzania to take photos of our programs in action.

A UX Writer was brought on to maintain brand tone, communicate our mission and values, and galvanize users to donate. I created the component library of buttons, banners, and cards to maintain visual consistency and quicken our workflow.

Usability testing showed that our designs addressed Upendo's central problem

Figma Screens

The New Site

Quantitative Metrics

🫡 Percentage of users that selected "I would trust this nonprofit with my money" increased by 82%
⚡️ Consolidated 6 navigation tabs to 3 to streamline website flows and tighten IA
📝 Amount of text on each page decreased by 30% (on average)

What I learned

Cross-functional collaboration requires transparent communication
- Since our UX Writer joined the team later on, we had to work extra hard to catch them up to speed on the intent behind our current copywriting and content layout while still giving her space to create and weigh in on our designs. As time went on, I became more proficient in collaborating with our writer.
Establishing an MVP is necessary to hit target goals
- Initially, we wanted to create pages for brand ambassadors and company sponsors as well. Regrettably, nobody in our personal network had experience with this, so there was a lack of primary research to support designs and the other logistics that these programs would entail (outreach, promotional materials, compensation, etc.) We realized that the majority of Upendo's money comes from individual donors anyways, so this became our MVP user flow.
This was a qualitative project, and that's okay!
- Our intent was not to measure the speed through which a user donated to the site or the number of clicks per visit, but to see how user understood the mission and goals of Upendo Kwanza, and how they felt while navigating the site. Ultimately, we were highly pleased with the results.

Next Case Study