A redesign of the The Alma Mater Society (AMS) food bank website, which is an emergency food relief service for UBC students, faculty and staff in need.
During our design second design sprint in the middle of the program. We were tasked to review a website or app for a non-profit organization and apply our newly learned design principles to better the experience for users that may want to donate to the organization.
We were given the following guidelines for the project:
Design for social good means using design to help non-profit, NGOs and Social enterprises extend their reach, grow support, and drive impact on the world’s most pressing challenges.
How might we help social impact organizations express their value, and inspire people to take action in order to drive positive change?
Rising cost of food
Cost of food and number of people relying on food banks has risen
Meal Cuts
20% of Canadians skipping meals to cut down on food costs
Students Access Food Banks
Greater Vancouver Food Bank registered 7,725 new clients in recent year, including 1,844 students
Why we chose the AMS Food Bank
The Non-Profit we choose is the AMS Food Bank, which provides emergency food to students and staff, No Questions Asked.
AMS Food Bank Usage Statistic
- AMS Food bank has had year over year increase
- Between 2020-2021 they had 2373 Visits
- 50% of their client supporting children
- A visit may feed 1 person, or a family of 5
User Interviews
During our primary research our group spoke with twelve different individuals to find out more about how they chose to donate and what made them choose who to donate to.
Some questions we asked were:
Do you donate to any organizations or causes?
Where do you usually find information about where or how to donate?
What causes do you feel strongly about?
Link to the complete list of questions below:
User Insights
Why we donate?
During our research interviews we found out that majority of our … donated to causes they were introduced to by family and friends. They felt really strongly about the cause and chose to donate online rather than in-person but would also do so in person if give the opportunity.
- Common limitations are trustworthiness, confusing site organization, lengthy donation process, and lack of information.
- Everyone feels good to help out, no matter how small the donation
- Often people don’t realize that they can donate monetarily as well.
Buried deep within the main AMS Website
The AMS website itself was fairly hidden. Not to mention the actual food bank that people are encouraged to donate to is buried deep within the website and is not easily found.
Hard to see impact on the main page
Even though the website showcases it’s partnerships with local businesses but does not show the impact its donors are having by contributing to the food bank.
GoFundMe page making process long
Additionally the AMS website does not have an onsite process to donate. It uses the GoFundMe platform which is another process that the user might not be familiar with or trust to make the donation.
During the exploration of the journeymap we were able to identify a key moment where our potential users land on the website but our not entirely sure how to proceed as the current website does not provide a clear path.
Our key moment lead us to create a persona which embodied all of the qualities and traits of our interviewees.
Our core taskflow was to create an easy to understand and thoughtful path that the user could follow.
Build Trust
The AMS website itself was fairly hidden. Not to mention the actual food bank that people are encouraged to donate to is buried deep within the website and is not easily found.
Show Impact
Even though the website showcases it’s partnerships with local businesses but does not show the impact its donors are having by contributing to the food bank.
Easy Donation
Additionally the AMS website does not have an onsite process to donate. It uses the GoFundMe platform which is another process that the user might not be familiar with or trust to make the donation.
Inspiration
We started to gather inspiration that reflected the quality design patterns we found that were validated by our interviewees.
Selecting components
Subsequently our group started to narrow down the specific components that matched the user donation process criteria.
Solution Sketches
Each group member then selected a section and component of the website that they wanted to redesign. We started to explore various designs that would express the section of the process in different ways. Finally we voted on the best solutions that our group collectively felt not only met the users needs but also merged the design and its overall composition.
Wireframes
The group considered making wireframes but as our solution sketches were fairly structured we decided as a group to use our sketches and make a sketch wireframe that gave us a good idea of the functionality of the website and the user experience process.
UBC Brand Guidelines
Advised by one of our class mates, we were told that UBC and the AMS Food Bank follow a very strict branding criteria. Following their advice, we researched and found UBC and AMS brand guidelines including the AMS logo font which took a couple of hours to find as it had very special letter characteristics in between working on the project. Aftika Bold was discovered to be the font of the logo.
Sessions Output Chart
During our usability testing we found out that even though the tasks were fairly simple to understand and was to complete, certain visual elements were not clear to users.
Confirmation page
Our users asked us what happens when the money is donated. Do they get a receipt? Can they edit or opt our of a recurring donation?
Though the group felt that this problem needed a complete process in itself a simple solution due to time constraints was to include a small message with the confirmation notice that would notify the user that an email with the receipt has been sent to their email from which they can opt out of the recurring donation should they choose to .
Donation Page
Another element that caused confusion was which option was selected the monthly or one time option as the selected option colour was a light blue and the monthly option had a heart on it.
We discussed and changed the one-time option to gray to indicated that option was in-active. Though we did not get a second chance to validate this with users due to time constraints we were told by our peers that the change made better conveyed the selection made.
Final Prototype
Our final prototype utilized all of our donation framework which was to build trust with the donors, show the impact of the donation and making the donation process easy. Check out the prototype below.
Key Learnings
- We learned that the non-profit sector could use a helping hand to design a better experience for their users
- Designers need their own time to explore their thoughts and process pull from their knowledge and experience.
- Designing for non-profits or for a good cause can feel rewarding and have a greater impact on the community.
Next Steps
- The next steps will be to conduct more user testing of the prototype and explore accessibility options.
- Dig a little deeper to find real users who already donate specifically to food banks and how they choose to donate.
- What makes people donate to the charity of their choice? What is the emotional connection and how is that leveraged to promote action.
