Project Vision
Goodwill Foundation site is a responsive site that aims to gather the donations to help support the charities and society-supporting projects. Nowadays people want to donate but their problems are having trouble with the complicated online donation flow as well as they don't trust the website.
Our goal is to create a user-friendly donation flow and build trust for users while making payment.
Challenges
1. Make users feel trustable towards the donation flow of the foundation
2. Design a simple and straightforward steps for users to complete for donating
3. Design a smooth experience for users to donate across different platforms
From The Start
For this project, I'm assigned to design a donation flow for a foundation that I support. Foutunately, the Goodwill Foundation is the one that my family is supporting. Therefore, I redesigned its brand image and started to empathize by conducting interviews to understand the donor's pain points.
What I got is that many people are willing to donate online for their convenience nowadays but they're worried about the complicated donating process and the site's reliability. This cause anxiety for the donors which in fact they shall feel relieved and happy when they're making a donation.
Meet The Users
John is an online donator who needs to donate to trustable charity because he wants to make sure that the donation really reaches and helps the recipients
Nicky is an online seller who needs to find the right charity to donate because she wants to feel relieved that the donation really reach and help the society.
The Pain Points
Reliability
Donors don't trust that the money really reach the receivers which make them hesitate to make an online donation
Complicated Process
Many foundation website user flow is complex which makes donors prefer donating offline
Experience
Donors can't see the donation results, making them feel curious instead of feeling relieved after making a donation
User Journey Map
I created a user journey map of the user's experience to identify pain points as well as conducting a competitor research to identify the room of improvements.
Site Map Design
My goal is to design the website structure that has a simple navigation and donation flow process to enhance best user experience. As well, to provide relevant information for users to understand and gain trust of the foundation.
Wireframes
Then I sketched out the paper wireframes for each screen on my website, keeping the user pain points about the concept of simple and trustable donation flow in mind.
Low-Fidelity Prototype
From the design regarding the users feedbacks, all screens are connected for a simple donation flow. The flow starts from filling the donation amount, choosing and completing payment method until requesting a donation certificate.
Feedback From Usability Study
I conducted the usability test with 5 different participants and asked them to complete the tasks in order to gather feedback of user flow. Then I created an affinity diagram, identified patterns and came up with some insight identifications.
Payment Confirmation
Lack of payment confirmation page after paying by credit card makes users feel worry
Long Page Scroll
Users were annoyed when they have to scroll a lot. They wanted to see everything at one glance.
Limited Donation Option
Users were concerned about the inconvenience of a limited choice of making donation
High-Fidelity Prototype
Before VS. After Usability Study
>
No payment confirmation which makes users feel insecure
The OTP verifying feature is added to let users make payment with confidence
>
Long page scrolling makes users feel annoyed
The payment pages are redesigned to fit in one screen for easy glance
>
Users felt inconvenient due to limited payment options
Alternative transfer methods are added for more user choices
Let's Solve The Challenge!
Challenge 1
Make users feel trustable towards the donation flow of the foundation
The verification features after making payment are added as well as provide information of donation status and forums to inform donors about their donation.
Challenge 2
Design a simple and straightforward steps for users to complete for donating
The steps of making donation does not require a lot of information. Users only fill their names, email, and phone no. The design also provides a status completion bar on the top to guide users where they are in each step.
Challenge 3
Design a smooth experience for users to donate across different platforms
To allow users access the site from varieties of devices, the site is a responsive design that will let users have the smoothest experience, enhancing a better UX design.
Mockups & Screen Variations
Next Steps
I will continue conducting a new round of usability testing of the latest version of the website to find areas of improvement. As well, I will develop the tablet-based version to enhance a fully responsive site and develop further user flows of the site regarding the users needs.
Key Takeaways
From letting users experiencing my product, they told that the site is easy to follow which makes them feel more open to make online donation and the improved features regarding their feedback makes them feel more confident to donate for the foundation.
As this is my second UX project, I learned that users needs and their feedbacks are the most important things to consider. Not only users achieve their goal, but also the foundation fulfill its goal for gaining more trust and donations. A continuous feedback is important to make the product be more successful for the foundation and enhance best user experience for the users.