Simplify the donation process-UX case study
Overview
Singapore Children’s Society (SCS) — a charity since 1952 — protects and nurtures children and youth of all races and religions.
Their website provides their work information and also allows people to make online donations or apply for volunteers.
Disclaimer: I am no way affiliated to Singapore Children’s Society, instead, I handled this case study under a school project to experience more in UX research, design, and writing skills.
The Problem
Online donation is popular nowadays. Although the rate of people in Singapore donating through online donations has increased, the Singapore Children’s Society website and especially its online donation process is outdated. It could lead to losing many potential donors.
How to make the donation process simple and modern to encourage donors in contributions?
Online Research
I kicked off the project by conducting quick research on its website to have an overview of the Singapore Children’s Society website. Then made some further online research and an online survey to understand people’s behavior and perceptions in Singapore about charity.
Singaporeans willing to donate more than to volunteer
- Singaporean most willing to support children’s causes.
- Online donations gaining popularity in Singapore
- Singapore Children’s Society is always on the recommendation charity list to donate in Singapore.
- And according to the Individual Giving Study (IGS) 2018 of National Volunteer & Philanthropy Centre research, people from 24–54 years old are the most active group in donations and volunteers.
Online Survey
17 people from 24 to 64 years old responded to the survey:
- 76.5% of respondents prefer to support charities by money.
- 70.6% of respondents prefer using Credit/Debit Cards/GIRO for online donations.
- 14/17 responded that they donate to feel good and get a tax rebate.
- 17/17 responded that they want to know about the charity’s work before donating.
- 12/17 responded that they use a desktop when making online donations if the donation amount is more than $50.
Business Model Canvas
Then I used the Business Model Canvas to clarify the product goals, as well as the customer segment of the Singapore Children’s Society website.
Assumptions
- I believe that donors are the most important user group to the SCS website, and they have a desire to donate to the beneficiaries of SCS charity.
- Their desires can be solved with an online simple and modern donation process.
- The #1 value a donor wants to get out of the SCS’s website is convenient to choose a suitable donation method to contribute to SCS through the SCS website. The user can also get these additional benefits: tax deduction, fundraising updates, or future fundraising events.
- SCS website receives donations mainly from donors.
- The primary competition in the market will be the Care Community Services Society and Club Rainbow Singapore websites.
- SCS website’s biggest product risk is an outdated donation process.
- We will solve this through the improvement of the SCS website’s online donation process.
Usability Testing
To understand more about what user needs and the main problems of the SCS website, especially the donation process. I conducted an early Usability Testing based on the current SCS website with a participant (age 35 years old, tech-savvy, the recruitment based on the online research and online survey) using a desktop to make an online donation in 10 minutes.
There were some main points taken during the participant’s donation process:
- Task performance timing: can finish the task but the timing was extended to 20 minutes.
- Desires: the participant wanted to know more about SCS before donating and was not so happy with the donation process.
- The participant was lost at the donation page and didn’t know which donation method was convenient to proceed with.
- Choosing a donation method: the participant had to spend a lot of time, just to think of which donation method is the most convenient to get a tax rebate.
- Donation amount: after choosing the Credit card method to proceed with, the participant wondered about the suggested donation amounts and wished to know how the donation amounts will be utilized.
- Credit card details: had no problem when filling in.
Affinity Mapping
I also made an Affinity Mapping by processing and organizing all the data from my research that can help me to identify common issues.
Persona
Based on the affinity mapping, I created a persona to represent for the donor group, as well as to keep the project following the user goal.
Customer Journey Mapping
I made a Customer journey mapping, based on the Usability Testing on the current website of SCS, to perform the tasks of the persona to get the insight of the problem, then find opportunities/ideas for improvements.
How might we?
- Encourage donors in contributions by simplifying the donation process?
- Help donors easily navigate to related pages by improving the navigation more user-friendly?
- Help donors to find FAQs answer faster and easier by providing FAQs chatbot?
- Help donors quickly choose a convenient donation method to get a tax rebate by making the explanation of the donation method more concise and attractive?
- Help donors know how the donated amounts will be utilized?
Competitor Analysis
To understand how the market is and also to learn from the competitors, I conducted two competitor analyses.
◾ Care Community Services Society serves the community and to influence and equip individuals and families for empowered living through all generations.
The good:
- A clear donation button sign.
- Easy to choose a donation method to go with.
- Colors branding and content are matched, even adds in their own illustration.
- Combining donation methods and FAQs.
The bad:
- Extra CTA button to link to Giving.sg is confusing donors.
- Provided link for the Credit/Debit cards donation method doesn’t show/work, that makes donors don’t know what next to do if donated with Credit/debit cards.
◾ Club Rainbow Singapore supports and empowers children with chronic illnesses & their families.
The good:
- User-friendly navigation, Users can easily reach the donation page.
- Ease of finding the donate button sign on the header.
- Most common donation method to the top.
The bad:
- The donate button is pushed too much to the right.
- The donation page is wordy.
Value Proposition Canvas
Based on Business Model Canvas and the opportunities from the Customer Journey Mapping, I used the Value Proposition Canvas to refine the existing product and service offering to donors and I ranked to know which one is essential to build.
Assumption
I believe encouraging donor to contribute more will be achieved if donors successfully achieve making online donations with:
- ease of finding the needed answer from FAQs.
- ease of choosing a convenient donation method for tax rebates.
- knowing how the donation amount will be utilized.
- easily navigate to related pages.
Content Requirements
User Stories & MoSCoW Prioritization
I wrote down user stories and used MoSCoW Prioritization to rank which feature is really necessary to build. The contents for the donation process screens will be based on Must have and Should have.
Interaction Design
According to the result of the online survey that 12/17 responded that they use a desktop when making online donations if the donation amount is more than $50, I made an Assumption for Interaction:
Information Architecture (IA)
Since the limit of time and the name of each category are quite concise so I decided to conduct only closed card sorting with 1 individual candidate to organise the IA of the SCS website and mainly focused on Donate and related pages.
User Flow
Wireframes
Job to be done
- As a donor, John wants to easily navigate to the Donation page from the Homepage so that he can make a donation.
- As a donor, John wants to quickly know which donation method is suitable for him to make a donation with a convenient tax deduction so that he can choose one and quickly process his donation.
- As a donor, John wants to make a donation fast so that he can save his time and effort.
So, what the SCS website will be improved?
The result of my research has shown that having a convenient donation method with tax deduction has a big impact on users when they want to donate to SCS.
So in this case study, I will mainly focus on the improvement of the donation process, which helps the current users feel pleasure when making any donation and new users also feel enjoyable instead of overwhelmed by thinking of which donation method to choose for the first time donating to SCS.
And making users feel connected or even impressed at first sight when they visit the SCS’s website so that they are willing to eventually make a donation to SCS. Thus I decided to also make some improvements to the SCS’s homepage.
3 key design improvements
- How might we make users feel connected and impressed at first sight when they visit the SCS website?
- How might we help users easily choose a convenient donation method with a tax deduction?
- How might we make the donation process via Credit/Debit cards convenient and smooth?
Interface & Information Design
1. ”Connected and impressed at first sight”
Homepage’ header and slides:
- Grabbing the user’s attention to the main CTA donate button:
As my research has shown that donors are the most important users to the SCS website so I decided to keep only the CTA donate button on the global navigation on the header to make it more outstanding so that users can locate where to click to make a donation. The current SCS website has both CTA volunteer and donate buttons which can potentially confuse the users.
The current SCS website displays both CTA volunteer and donate buttons on the top for the mobile version and on the left for the desktop version so it is inconvenient for users to search for the CTA buttons when they want to make a donation to SCS.
I also adjusted the ratio between the CTA button and the SCS logo by designing it larger in width than the SCS logo’s size.
- Making the users feel connected and impressed to SCS at the first sign on the new homepage with real human images, direct eye contact, or smiley faces can bring a big connection to users’ philanthropy on the slides. All of the other banners must have the same style of colors and fonts to the 1st one.
Homepage’s body content
- Providing the summary of SCS’s work: users don’t use the website as the way we think and users don’t read, users skim. So I provided users with information about SCS works in short summaries, plus the illustrations to make a strong visual to users’ eyes.
- Action suggestion: I added more CTA buttons with some summary about what SCS needs support from users to suggest users what they can do for SCS and give users something to do while exploring the site, instead of reading only.
- Rhythm of suggestion: The shape of the kids’ image, like a pushing rhythm to remind users to click on CTA to subscribe and can get updates from SCS.
2. “Ease of choosing a convenient donation method with a tax deduction”
Donation page
- Easy of scanning: The description text for the main heading was shortened. All the unnecessary COVID 19 updates were also moved to the News & Events page so that won’t make the user overload with 1 task and easy to scan what this page is about.
- Visual consistency: I kept the slides’ visual style to the Donation page but changed the slides to become a hero image of this page.
- Categorized the donation methods
Following the techniques of Sheena Iyengar on how to make choosing easier. I gave the users a list of categories with only 5 options to click on to read and find out how each donation method is, instead of having to read a long text page on the current SCS website.
Based on my research, the most popular donation method users prefer to use is a Credit/Debit card so I place it on the top list of the donation ways.
I made 2 options. The 1st one with the description of each category will be displayed horizontally when the users click on the dropdown button. But after that, I realized the description of each category can not be displayed with all the necessary details.
So I decided to go with the 2nd one with the donation method’s information displayed in vertical which can display all the necessary information for each donation method. When the users click on each donation category, the details and descriptions will be displayed. The content of each donation method is also shortened which helps users save time and effort when choosing. Besides that, I also added icons or banks’ logos to illustrate for each donation method.
- Active text: When the users hole over the mouse on each donation method, they will change the color to white to notify the users that action can happen if the users click on it.
- Two in one: I removed the unnecessary local navigation on the left side of the current website and combined the FAQs page to the Donation page by adding it below the Donation ways section so that users can easily find it.
- Ease of reading: Listed down buttons are also used for FAQs to shorten the long FAQs page by displaying one by one the answer’s content when users click on each question.
3. “A enjoyable donation process via Credit/Debit cards”
Donation via Credit/Debit Cards pages:
- More steps but faster and user friendly for users to understand what they need to do each step and next steps by displaying the process bar and breadcrumbs.
Donation Amount page
- Convenient donation options by changing the donation buttons to display “Give once” or “Monthly” that users can easily recognize and switch the options.
- Knowing how the donated money will be utilized by displaying the description text below each donation amount when users click on them.
- Displaying the chosen donation amount on the confirm donation amount button by showing the chosen donation amount on the confirm donation amount button that is similar to reminding the users again whether they have chosen the correct donation amount they wanted to give.
Personal details & Tax deduction page
- Changeable donation amount by reversing navigation: after finished choosing the donation amount step, the users go to the next page, Personal and Tax deduction details, they can change the donation amount again if they desire on this page by selecting the clickable donation amount to reverse back to the Donation amount page.
- Shorten the page by setting the default of the Tax deduction section is closed until the users tick on to display the Tax deduction form.
Credit/Debit card details page
- Visual consistency: made the visual layout with consistency instead of bringing the users to a different visual page like the current SCS website.
- Simplify the Credit card detail forms by grouping them to similar groups.
Donation confirmation page
- The pleasure of contribution: a thank you title, plus the donor’s name, and a short summary of the important details of the online donation to make users feel pleasure and be sure about their donation.
- The suggestion of sharing: displaying the social media icon section to remind and ask users to help to share with other people about SCS.
Navigation Design
- The users can navigate forward to the Donation page from Homepage by selecting the CTA donate button or Support us Category or reverse back to Homepage easily.
- From the Donation page, the users can go forward to Donation via Credit card and reserve back.
- Three pages of the Donation amount page, Personal, Tax deduction detail page, and Credit/Debit card details page have the same level of the hierarchy, so they have lateral navigation.
- Notes: ( Purple: forward navigation. Cyan: reverse navigation)
- Users also can navigate to the Donation page from the global navigation bar on the header.
Prototyping
Desktop version
Mobile version
Of the Homepage and the Make a donation page.
Usability testing
(on desktop version)
User tasks
Task 1: You visit the SCS website and decide to make a donation to them by going to the donation page and choose a convenient donation method with a tax deduction.
Task 2: You use a Credit card to make a donation of $100 to support the SCS and receive a thank you message for your donation.
The results
Task 1:
- Homepage: The participant enjoyed the visual and structure of the new homepage but wished to add more summary of other pages like the gallery, the coming events, and the fundraising campaign list.
- Donation page: The participant spent less than 30 seconds to pick one suitable donation method with a tax deduction.
Task 2:
- The participant can easily finish the task.
- The participant was happy with the process bar
- The participant wished to see other suggested fundraising on the confirmation page, instead of the Back home button.
Conclusion
Further features improvements
- Adding testimonials, fundraising campaign section for the Homepage, Donation page, and Donation confirmation page.
- Adding more banners for slides on the Homepage.
- Providing chatbot.
Personal challenges and lessons to learn
- Doing this project as an individual was a challenge for me, but it forced me to try to read, think, and practice more on different research methods.
- Defining which research method to use for which stage that prevents the wasting of time on the research journey is also important.
- Having knowledge of culture is important because different cultures have different views on goals or needs. Most of the donors in Singapore are Chinese so even the SCS website has provided suggested donation amounts like $68, $158, and $268, tend to Chinese believe. This is a school project so I would like to change all the suggested donation amounts to simpler donation amounts.
- Online research was an interesting part for me because it helped me to learn and know about users’ behaviour. For example, while most of the donors in Singapore want to get tax rebates when making a donation, in Vietnam most of the donors don’t care much about tax rebates, their donation motivation is mainly to feel good when doing good things.
- Write a summary title list for the design process of the report that I can control and manage what I am going to work on and avoid getting lost.
- Test often and early as much as possible is the best way to prevent wasting time on the design.
