Foodbank is a charity donation website, and the second project as part of the my Google UX Design Certificate. The website has been designed to be responsive across desktop, tablets and mobiles.
The Process
I followed a user-focused iterative process. Focused on understanding the user, defining the issues and identifying new creative solutions through a process of creating and testing prototypes.
Goals
#1 To develop and simple and easy to use donation flow that is responsive across mobile, tablet and desktop.
​
#2 Provide a seamless donation experience.
​
#3 To ensure accessibility is considered throughout the process.
​
​
Role
Lead UX Designer
​
​
Duration
December 2021
(4 weeks)
Tools used
Figma
​
Responsibilities
Conducting interviews, paper & digital wireframing, low & High-fidelity prototyping, conducting usability studies, accounting for accessibility
Iterating on designs
User Research
My research took a mixed quantitative and qualitative research approach. Starting with quantitative research and existing research literature to understand the core user groups that donate to charity online. This then moved on to a competitor analysis, stakeholder interviews, and the creation of persona hypothesis.
In total, four participants took part in the initial research. A mix of men and women ages from 35 to 60 took part in face to face interview via MS Teams. I went into the interviews thinking they would have very differing opinions. However, key pain points around wanting to know more about how their donations would make a difference and for the donation process to be quick and simple was something everyone wanted.
Pain Points
Three pain points arose from the user research.
Lengthy donation process
Users want the payment process to be as quick and simple as possible.
Not knowing how the money will be spent
Those interviewed felt that there wasn’t enough information provided about how the donation would be spent. They wanted to understand at a basic level the impact their donation could make.
Lack of information on non-monetary ways to help
Users also want to know information about how they can help without making a monetary donation.
Meet the users
Primary
​
Name: Jenny
​
Age: 62
​
Education: O'Levels
​
Hometown: King's Lynn
​
Family: Married with four grown up children
​
Occupation: Retired
​
​
Goals
-Simple steps and clear information on how the charity spends it’s donations
-Clear instructions on how to make my payment
-To donate more of my time to giving back
​
Frustrations
-"Confusing payment instructions, especially for one off or monthly payments”
-“Unclear donation steps”
-“A lack of info on none monetary ways you can help”
​
​
​
Jenny is a retired former Personal Assistant and lives with her husband of 34 years. She is happy to donate to charity but also has free time to get involved in a more hands on way to help charities.
She wants the donation process to be clear and simple, but she also wants to learn about the charity, so wants to know about the work or projects they undertake. She gets frustrated with unclear donation step and a lack of information about non-monetary ways you can support the charity.
Secondary
​
Name: Wee Lee
​
Age: 35
​
Education: BA (hons) degree
​
Hometown: London
​
Family: Married, no children
​
Occupation: Communications Manager
​
Goals
-To donate to a charity that I resonate with simply and quickly
-To know how the money I’ve donated has made an impact
-Visual examples of how my donation will be spent.
​
Frustrations
-"When they don’t have quick payment methods like Paypal”
-“Not understanding what Gift Aid means”
-“When there are too many steps to complete”
​
Wee Lee is a comms professional working in London. They are busy with little time, but like to know about the charities they donate to.
They want the donation process to be as quick and simple as possible, with clear explanation to industry terminology such as Gift Aid. They like to know what the charity spends their money on and specifically what their donation might be spent on. They want this information at hand for instant feeling of doing something good.
​
User Journey
Below I've explored the user journey.
Competitor Analysis
There are several big brand charities that pledge to help feed communities that raise money in the UK. The Trussell Trust is closest competitor, operating food banks across the UK. Oxfam and World Food Programme are also direct competitors but focus more on third world poverty.
​
Indirect competitors including household charities like British Heart Foundation and crowdfunding platforms GoFundMe and JustGiving. All brands have responsive websites with donation functionality.
The majority of the features between competitors were very similar, however the main difference include:
- Simple donation flow vs too many steps
- Clear information on how donation will be spent vs lack of information on how donation will be spent
- Busy page layout vs minimal design
​
Site Map
Wireframes
Digital wireframes
Desktop/laptop
_edited.jpg)
.png)
Tablet
.png)
Mobile
Interation
After creating the low fidelity wireframes, a group of four participants completed a usability test. Using a prototype while running through a range of scenarios to find the next stage of iterations.
Final Design
