Lift Each Other — Case Study
Ouelessebougou Alliance — How to redesign a nonprofit website for a brand new audience.
What is the Ouelessebougou Alliance?
Ouelessebougou Alliance is a non-profit located in both Utah and Mali, West Africa. They are changing lives by working in partnership with local villagers to improve the quality of life in the region of Ouelessebougou through sustainable programs in education and health.
Roles & Responsibilities
- Conduct thorough user research to understand our user needs.
- Restructured existing content to create new wireframes
- Created high fidelity prototypes for stakeholder feedback.
- Conducted user testing on high fidelity prototypes to prove validity of the design.
Problem & Process
Ouelessebougou Alliance needs to increase and diversify its donor base and improve their visibility in Utah by reaching a younger target audience.
Vision Statement
To convince a millennial generation of Utah residents to donate more consistently online to the Alliance to further develop sustainable programs.
Research
Before designing comes research. In our case we spent several weeks surveying, collecting data, and interviewing to understand what the user looked for.
From this quantitative and qualitative data we realized that most young people are more likely to donate small amounts to local organizations, where they can see an immediate impact, and have a personal connection with.
Personas
Based on the data received, we created various profiles in order to know our audience better.
We created personas to help us stay hyper-focused on the user and their goals, rather than our own.
User Needs
From our user testing we were able to condense the user needs in a short list:
- Small (micro) donations
- Would like to see the immediate impact
- Develop personal connection
Solution
Before building, we wanted to come up with a list of solutions to address our user needs:
- Condense text and information
- Add more stories and emotional connections
- Add more interaction to the site to engage users
- Add specific donation options to donation process so audience can choose where their donation money is going
- Add steps to donation process (this will let users orient themselves throughout the process)
- Simplify the website navigation
Content Inventory
In this phase, it was crucial for my team to sort through existing content on the website to determine what was important to the user and what wasn’t.
With over 30 pages of content it would be easy for a user to get disinterested and overwhelmed.
Design
Through the design phase of this project, we stayed user-centered by keeping their top needs in mind.
Site Map
Improving the navigation by condensing the menu and pages was a key point we wanted to target in our redesign so that users get straight to the organization’s purpose.
Sketching
We knew that we wanted a simple and clean look to the website, while still maintaining a fun and personable feeling. In our rough sketches we planned out simple pages and concepts.
Wireframes
Wireframes allowed us to focus on the functionality and content in the site. Wireframes also helped to showcase progress to stakeholders for useful feedback.
You can click through these wireframes on Invision to see how our first draft of the website flowed:
First Round Prototypes
From there, feedback received in our meetings with stakeholders, we were able to flush out a prototype implementing the style guide. These prototypes were placed in the hands of users for validation.
User Testing
Testing a design by putting it in the user’s hands is a foolproof way to scrap or improve any aspect of the design. It also proves how usable your site is and is the user understands what the purpose is.
In our testing we targeted 6 subjects aged 18–30 that are living in Utah. We had the test subjects complete two tasks.
The first task tested the overall donation process and if it would be more streamlined for the user:
You heard about Ouelessebougou on social media and you are interested in donating to their organization. You have $35 to donate to mosquito netting and need to finish the donation process.
The second task tested how easily a user could navigate to a page to find out more information about a certain subject:
Ouelessebougou builds schools to improve education. You are interested in finding out more about their work in education. Find the location that the school was built in and the year it was built in.
From these tests we gathered pain points with the new designs and how we could tackle those problems.
User Test Pain Points
- Users confused what to do on landing page
- Donation process was confusing with options given
- Spent too much time digging through text
User Test Solutions
- Prominent call to actions throughout landing page
- Simplified options within Donation process
- Put a search bar option in the menu for users to quickly access information
- Using tabs to minimize the information users had to sort through
Final Prototype
By applying this feedback, we changed our surface comps to reflect core design principles such as Chunking, Hick’s Law, Progressive Disclosure, and Functional Consistency. In the end, we got rid of the content heavy pages and inconsistent design and created an updated, refreshed version of it.
You can view this final prototype on Invision:
Lessons Learned
Looking back, there were many things our team could have improved on. Getting better quality research and survey data would have helped us understand from the beginning how a users’ mind works and their objectives. I did learn that working on a team brings diversity and strength to a design I have not seen in my previous designs. More minds to collaborate with creates an environment of growth.
While there were bumps in the road, my team and I learned a lot about taking a previous design and making something even better out of it. Creating an important design for an important cause fueled our determination.
Check out my teammates articles on their take of the redesign process!
This is a case study I executed for DGM 2240 Interaction Design, a course at Utah Valley University. Kayla Waters is a student at Utah Valley University finishing her undergraduate degree in Interaction Design. If you are interested in seeing more of her experience, check out the article below!
