Charitable Design: A Case Study in Motivating Donations
My experience on redesigning a nonprofit website.
Before we get started, remember this: Ouelessebougou is pronounced “way-less-uh-boo-goo” (it will come in handy, trust me).
Over the last several months I have been working on a team of five students to revamp the website lifteachother.org for the Ouelessebougou Alliance, a local Utah-based nonprofit organization seeking to make sustainable change in Mali. This was an excellent opportunity to gather real world experience working with an actual client with realistic project constraints.
Below you will find four stages of our redesign process and some of the methods we employed in each one.
1. Identify the Need
Methods:
- Stakeholder Interview
We began this project with an interview with Judy, the director of Ouelessebougou Alliance. We discovered her expectations, desires and constraints for the project. We found that she hoped to diversify her donor base by making the site more appealing to a younger audience, seeking to employ more of a “micro donation” approach to fundraising.
In order to maintain focus throughout the project, we created a mission statement:
“Our goal is to convince a millennial generation of Utah residents to donate more consistently online to further develop sustainable programs.”
2. Research
Methods:
- Qualitative and quantitative research
- Personas
- Heuristic markups
Through our surveys and interviews with our target market we gained some very helpful insights. We found that 81% of Utah millennials said they choose causes to donate to if they feel a personal connection to it. In our interviews, a majority mentioned a distrust of larger nonprofit organizations and a desire to know exactly how their money is used.
Based off these findings, our team decided to flesh out a couple of personas to help us better understand our target market. Below is one of the personas we created.
We also spent time analyzing the website via heuristic markup and found a number of potential design problems, including excessively complex navigation and hero text that looks like buttons.
3. The Design Process
Methods:
- Sitemapping
- Low- and high-fidelity wireframes
- Surface comps
After completing our research phase, it was time to put our findings to work. We began with creating a site map to evaluate and establish the overall information architecture.
After making our site map, the team met together to whiteboard some ideas for our wireframes. We then branched off to create wireframes using Adobe XD, which led to our surface comps. See the progression below:
When we were all complete with our surface comps, we met up and discussed which designs would best suit our client’s needs. We settled on Kayla’s design (you can check out her take on the process here).
4. Testing
Methods:
- Invision Prototypes
- Usability Testing
Based on Kayla’s designs, we created a prototype using Invision (available below).
We ran usability tests and found that our design still had some issues we needed to address- particularly that the design was too text heavy and some of our navigation was confusing.
We made some adjustments accordingly, implementing more progressive disclosure and simplifying our menu. Our second prototype that we presented to Judy is available for viewing below.
Here is a side-by-side comparison of the website’s original mobile design and our final design:
Final Comments
This project was an incredible learning experience that is not yet finished. I have been tasked to continue working on this project for the following four months. Our plan is to continue improving the design and then work to bring the design live to the Alliance’s site. Keep an eye out for my next Medium article laying out part two of this project!
Also check out my teammates’ takes on the experience here and here.
