The objective of this project was to design a donation flow for a charity. The charity I chose was CARE Singapore, a children’s charity in Singapore.
This is a personal self-initiated project and is not associated with CARE in any way.
UX Designer, UX Researcher
Conducting user research, competitor analysis, sitemap, wireframing & prototyping, conducting usability testing, iterating on designs and responsive design
2 weeks (December 2021)
Adobe XD
CARE is a children’s charity in Singapore which focuses on changing the lives of at-risk youth.
Currently, CARE does not provide users with an option to donate directly via the website. Instead, they use a third party platform GiveAsia, or accept donations via cheque/TT payment.
My goal is to design a simple and clear donation flow for the charity. At the same time, I want to make it easy for the user to find out more about the charity and the work they do.
I conducted interviews, which I then turned into empathy maps to better understand the target users and their needs. I discovered that most users donate when they read stories and empathise with people in need. However, a majority would only donate if they believe the organisation is trustworthy and legitimate. Also, some users prefer to donate anonymously, while others would not mind filling in their personal information in order to qualify for a tax deduction relief.
Users should be able to customise their donation amount, instead of choosing only from pre-determined, fixed amounts.
While donations in Singapore qualify for tax deduction, some users prefer not to fill in their personal information.
Users need to find out more about the work of the organisation, and the impact it has made in the community before getting involved.
Age: 37
Education: Diploma
Family: Single
Occupation: Office executive
“I have been very fortunate, so I have a duty to give back to society.”
Amelia is passionate about causes like Animal Welfare, Children & Youth and Women & Girls. She does not earn a lot and has to look after her aged mother, so she cannot afford to donate much, but feels a duty to give back to the community.
“I want to donate, but the options offered are in fixed amounts and while I feel like $50 is too little, $100 is too much.”
Age: 63
Education: Masters Degree
Family: Wife and 1 child
Occupation: Lawyer
"No one has ever become poor by giving."
Derek is a busy working professional but he will take the time to donate if he sees an ad on social media. If there is a story attached to it, he will empathise with the person in need, however he will do his research to make sure that the organisation is legitimate.
“I would prefer to donate anonymously because I don’t want people to see my details”
“I need to know the organisation is not a scam”
I created a user journey map of Amelia’s experience using the site to help identify possible pain points and improvement opportunities.
To gain inspiration and identify best practices for our website, I looked at several similar organistations - two local childrens’ charities and one international non-profit agency. A common feature I identified across these websites was the placement of the donate button at the top right of each website, in order to emphasize it as the main call to action. This is an important design pattern to make it easier and more efficient for users to get involved and donate.
I also identified a common gap in the local charities - both do not provide an option to donate directly via the website. They provide links to third party platforms or accept payment via cheque/bank transfer. This extended process may discourage the user and cause them to abandon the donation process.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
I sketched out wireframes on paper for each screen in my website. This allowed me to brainstorm for design ideas quickly. I focused on outlining the basic structure and layout of the website using simple shapes and lines. I also worked on designs for additional screen sizes to make sure the site would be fully responsive.
Moving on from paper, I created digital wireframes in Adobe XD. I focused on the placement of all visual elements. Then I connected these digital wireframes to create a low-fidelity prototype. This prototype is a simple interactive structure that provides a basic idea of how the product will look/function. I used this prototype to conduct a usability study.
Study type: Unmoderated
Location: Singapore, remote
Participants: 5 participants
Length: 5-10 minutes
Most users wanted to start with donating immediately, or to first learn more about the organisation.
After donating, users felt burdened by the next screen with the heading - “These children need your help too”.
Some users had difficulty reading the body text. Also, some users found the What We Do section too wordy.
Based on the first insight of the usability study, I made changes to improve the design of the homepage. I added a large CTA button to Donate on the hero section of the website, to emphasize it as the main call to action. I also added some information about the organisation’s mission and history, with a clear CTA to Learn More. When users click into this button, it will bring them to the About page which then provides more details about the services provided.
I changed the wording on the Thank You page to make it less guilt-trippy to the user. Instead of “These children need your help too”, I changed it to “Read other stories”. We want to keep our design ethical and we do not want to exploit the kindness of our users.
Finally, I increased the size of body text, as well as the letter and line spacing, to make it easier for users to read. I also made the What We Do section less wordy by adding “Read More” links instead. Users have a short attention span and we do not want them to lose interest because our website is too text-heavy.
In this stage, I finalised the mockups of the rest of the pages based on my digital wireframes. I added colours, images, and a clear typographic hierachy to show users the information to focus on. Then I connected the screens and added smooth transitions to create a hi-fidelity prototype which exhibits functionality and closely matches the look and feel of the final product.
View the high-fidelity prototype here.
I created a mobile variation since our users are likely to access our website from different devices. I ensured consistency by having a uniform design, so that users can feel familiar whether browsing on desktop or mobile.
Here is an example of the responsive homepage:
Our target users shared that the design was intuitive to navigate through and demonstrated a clear visual hierarchy. The donation flow was simple and easy to understand. In this process, I learned that even a small design change like letter or line spacing can have a big impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions. My next step is to conduct follow up user testing on the new website, and identify any additional areas of need.
Designing a data-rich, AI-powered portfolio strategy dashboard for retail investors.
Redesigning a trading analytics platform web experience for mobile
Designing a property listing portal for users searching for sale or rental properties.
Conceptualising the AI features of Vama, to enhance efficiency in messaging.
Crafting the Meetings functionality for Vama: An iOS mobile chat application
