Case Study

Kuda Vana Partnership

Website
UX/UI

Overview

Background

Kuda Vana Partnership is a non-profit that seeks to not only empower the children of Zimbabwe to survive, but thrive. Kuda Vana is not your typical orphanage. The staff provides care and resources for around 50 children ranging in ages from new borns up to 17 years of age.

The staff, located in Zimbabwe, focuses on providing a family style of care for all children in order to help them succeed. This redesign is to help Kuda Vana Partnership compete with other non-profits in the same market, as well as, create a better flow and navigation throughout the site.

Role
UX/UI Designer
Timeline
2 Weeks
Tools
Sketch
Whimsical
Figma
InVision
Canva
Square Space
QGiv
Problem

Kuda Vana Partnership has an administrator staff of ONE. Our client ran, monitored, and maintained a majority (if not all) of this non-profit's online presence. During our preliminary meeting, we discussed the main issues of the current site and what would be our goal deliverables. The meeting revolved around this specific question of, "how do you quickly build trust between a non-profit and its donors to secure donations?"

Solution

From the meeting our team set out to examine and implement changes that would help increase donation flow, reorganize site content and redesign the home page.

Research

Interviews and Findings

One important factor was the timeline. With just three weeks, how do we ensure we have a thorough understanding of the user and their needs while navigating through the site? We started with an online survey to quickly gather necessary results. In total, 23 participants help provide these main demographic statistics:

- 56.5% of the participants were between the ages of 20-30

- 30.4% of the participants were between the ages of 31-40

- 91.3% of the participants identified as Female

​We were also able to establish two main motivators to donate:

Alignment

91.3%

Need to feel personally aligned with the organization and its mission statement

Personal

52.3%

Want to be able to read personal stories and to be able to see the impact of their donations
Main Attributes

From the survey and interviews, we were also able to solidify four main attributes users expect from a non-profit's site:

Gratitude goes a long way - Users would like to receive personalized thank you notes customized to their specific donation.
Trust is paramount - Users want to feel personally aligned with the organization and its mission.
Users are more likely to give monthly is the amounts are smaller & they are able to see their impact, no matter how small.
Users want specific breakdowns of their donations - the use of infographics and stories to showcase effectiveness.

Personas

Forging personas

Who is donating to non-profits? Our team knew this redesign would be difficult; and we needed to thoroughly understand who would be visiting this site and how we would design/test for their wants, needs and pain points. Let's meet our two main personas for this project.

Nilda & Jon
"What makes us the happiest is seeing the children thrive through being supported emotionally and financially"
Lauren
"I care most about the authenticity of a non-profit. I want to know if their mission and my values align."

Site Reorganization

Card Sorting, Results and Site Navigation

The original site contained too many titles in the main navigation. This is problematic with users visiting the site on smaller screens. A "Hamburger Menu" is automatically applied to any monitor smaller than 16 inches which is not ideal for the user.

The solution was to reduce the amount of main navigation titles with less, more generic/encompassing titles. Doing so would allow for a prominent visible navigation on all screen sizes while still maintaining the integrity of Kuda Vana.

With the help of twenty-five participants, we were able to gain more insight into how we could group/classify most of the new site. Below is our dendrogram findings:  

Preliminary Grouping

Analyzing the results of the Card Sorting activity we were able to simplify the navigation into four main categories in which we would be able to encompass all the information on the site. From these four we went into quick prototyping in order to get some usability feedback on the new main titles:

1.) Who we are
2.) What we do
3.) Where we help
4.) How to help

Navigation User Testing Results

With the results from the card sorting exercise and the development of the preliminary site map, I was able to start testing a quick prototype to get feedback. During testing, I wanted to establish trends in how users would be using the experimental navigation. With using Figma to quickly prototype and easily share for testing, I was able to gain some insight from five individuals.

From our main takeaways from testing the initial prototype we were able to solidify the new navigation...

With decreasing the amount of main titles from eight to five, we were able to keep the "Donate Now" call to action prominent. We also reworded the main titles to mimic other non-profit sites to keep the new site familiar to the user.

Searching

89%

Of users relied on the use of secondary and tertiary navigations to find topics throughout the test.

Speed

63%

Of users were able to quickly navigate to topics presented, even with the rewording of main titles.

Specifics

20%

Of users were able to navigate to the "Blog," meaning we would have to keep "Your Impact" within the new navigation.

User Flows and information Architecture

Solidifying the User Experience

Determining the Task Flows of our Personas would clarify how our users would be using/interacting with the new site. From there, creating the full User Flow and Information Architecture were vital for establishing screens for development. But no matter what, each screen would be able to bring the user to the main donation flow.

Task Flows
User Flows
Information Architecture

Donation Flow

Full Buildout

We knew the current donation flow/form would not help with the ideal user flow. The main issues were at the moment it was a single long form (which made the user feel like donating was a process), a call to do multiple actions within such a small space and an outdated look and feel of the entire donation process (which users didn't trust).

As a team we searched and compared other sites using the QGiv platform and found there could be more flexibility/customization with the form. We reached out to our client and we were able to set up a call with a QGiv representative to go over ideal forms/user flows.

Before we met with the representative, I quickly put together a Lo/Mid-Fi prototype of an ideal solution and an ideal flow to present to QGiv...

QGiv Form

From our meeting, our team was given the news that the QGiv platform would be changing their user experience within the coming months and we were able to be one of the few groups to use their new Beta form.

Now, even though the Beta form was exactly what we wanted, we still had to build out all the necessary options to allow for testing. We wanted to tailor the user experience specifically to Kuda Vana donors. The following are the multiple build-outs I put together within Sketch and Figma:

Wireframing & Prototyping

Donation Flow

Once all the options were built out, quickly prototyping the wireframes were imperative to get started on Usability Testing. Our goals from having the users click-thru the prototype were to get feedback on if users preferred photos during the donation process, if users wanted multiple donation amounts to fit their budget, if users liked having the option to volunteer and if users enjoyed the multi-step process?

User testing

Testing and Findings

After we were able to test all options of the Donation Flow, we were able to interpret the results and make necessary design decisions for the final deliverable. With donations being a pivotal part of any non-profit, we knew we had to get this right. With guidance from our participants, we were relay our findings to the client.

Volunteer Option

80% of users stated having a volunteer option was a good idea, however, they didn't know how they would be contacted. There was some confusion with what they would be signing up for and if it would be something they would be able to commit to.

After speaking with the client this page was excluded from the new donation flow due to the lack of volunteer opportunities.

Monthly Donation Nudge

As a team, we knew there would have to be a series of "nudges" to encourage users to donate monthly rather than a one time lump sum. Luckily, the QGiv beta form already allowed for a "nudge," but we wanted to add additional verbiage that would explain the impact of the user's donation.

This verbiage would be specific to a program and would be along the lines of, "3 Monthly installments of $50 will provide 6 children with nutritional support."  During user testing, 100% of users stated this made them rethink choosing monthly donations.

Correlating Visuals

From A/B testing the child sponsorship form, we found that 80% of users preferred to have a photo along with donation amount options.Since this form was in beta, we built  the ideal form to be implemented in the site

100% of users also stated they would prefer to see pictures that correlated with specific programs/donations. This would give them a better understanding of where their donation was going within Kuda Vana.

Child Sponsorship

The most important and enlightening information came from the results on the Child Sponsorship. 100% of users disliked choosing a specific child to sponsor. They stated they liked the pictures, however, did not like having to make the decision of which child would receive their sponsorship.

While speaking with the client, we were able to agree with allowing Kuda Vana to choose for the donor. This would hopefully generate more child sponsorships rather than generic donations.  

Site Buildout

Home Page and Beyond

To create and cultivate trust with our users, we knew we had to deliver an entirely new site for Kuda Vana. With the branding guidelines in mind, we set out to build a cohesive website within Square Space.

Inspiration

We started looking for inspiration from other non-profits. We found that many of them had large header images to grab the user's attention, infographics/numbers to display information, "donate" calls to action in the hero, as well as, in the navigation.

Initial Sketch

At first glance, the original home page served its purpose, but we wanted add more character and establish trust with our users. This is paramount for all non-profits. Without establishing trust and having a clear mission, users and potential donors may abandon the site. We set out to tell a story while using images and visuals throughout the home page.

We also wanted to communicate past to present with creating sections focused on why Kuda Vana is in Zimbabwe​, who Kuda Vana is, what Kuda Vana does, what is happening now with Kuda Vana and most importantly to show transparency.  

Final Home Page

After some A/B testing on the home page, we were able to solidify the final product. One user gave specific feedback on wanting the page to mimic the main navigation. This would help connect all the information on the site without having the user to search. throughout the site. Check it out!

Deliverables and Next Steps

What’s next?

Since Kuda Vana Partnership had only one person state-side to support the organization and monitor the site, our team planned from the beginning of this process to deliver a fully functioning site. We generated templates and receipts to help our client get the site live as soon as she was able to. With next steps established with the client (while awaiting the board's approval) only a few pieces of the site will need to be linked and added.

Other Projects

More To Peak Your Interest

CNN Connect

Mobile IV Medics

View All Projects

Contact

Want to join forces?

Think I have that "special sauce" your company or team needs?
Let’s get in touch!