🎲 User Experience Matrix
User journey: Making a donation for 'Reforest Sri Lanka'
I created a UX matrix to identify specific problems that users face when making a donation to Reforest Sri Lanka and to get a holistic view of the scenario. Insights gathered from the PO came in handy at this stage and he provided me with a rough idea where things are not working well within this user journey.
📝 User Research
In order to understand the target user group (tech savvy working professionals between 25-40), I held 30 minutes interviews with 15 participants. This research was conducted to extract important insights from the experiences and feedback shared by users when making donations to NGOs and charities within Sri Lanka.
Key Takeaways
From the interviews I learned the main factors that people consider when making a donation to a NGO or charity. It includes the following:
8 out of 15 people said that viewing past projects reinforces their trust with the NGO
9 out of 15 people said that viewing NGO registration reinforces credibility about the NGO
6 out of 15 people were comfortable making a donation via bank transfer
People appreciated receiving confirmation/thank you emails after a donation
People like to see the progress of projects and how their donation is impacting them
There are lot of money scams in Sri Lanka and therefore people are skeptical of online transactions in general
✍🏼 Paper First
The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.
Sketches were made within a short time period to get as many ideas as possible.
1️⃣ Designs - First Version
After clicking on the “Donate” header navigation button, donors will be directed to the donation page, where they need to fill in the necessary information about their donation.
The goal of this screen was to create a seamless and user-friendly donation flow by simplifying the donation process for donors.
To achieve that, I had to go through numerous design iterations, and some of them are depicted below, along with the final donation flow screen.
2️⃣ Designs - Second Version
In the second iteration, I solved few major issues. I included information about the NGO registration, a crucial piece of information that many donors were looking for. In addition, I included the option to donate every month to make it easier for donors to make consistent donations as well as get steady donations for the NGO.
A clear CTA was included in the header to make donations enabling donors to access the donations page easily from any page.
🤩Designs - Final Version
Note: I didn’t include all the iterations to prevent the case study from becoming excessively lengthy.
After making all the changes, I finally moved to the final donation flow.
Selecting multiple currencies was added as per the insights from user research
More information about why you should donate to Reforest Sri Lanka was shown, along with past projects, to portray the impact that the donation can have
'Start points', a popular mobile rewarding scheme in Sri Lanka, was added as a payment method
Viewing past projects + other pages
Monthly Donations
For monthly donations, I decided to display the impact of the donations for different plans.
🤔What Happens After Donations?
As revealed through primary research, most of the donors were often skeptical about NGOs because they don’t receive any information after making a donation. This lack of transparency leads to uncertainty, and donors are keen to understand how their donations are being utilized.
So to solve this problem, I came up with a solution.
Once a donation is placed, donors can check their donation status by clicking the “Track your impact” button after making a donation, which takes them to an impact dashboard. Of course, there are certain technical constraints of individually tracking each plant planted, and this will require additional resources to fulfill.
After the donation is confirmed, donors will receive a thank-you and confirmation message from the NGO. From that point onward, the NGO will maintain communication with donors throughout the journey until their donation reaches the needy people.
😇 So what happened next? What did I learn?
Through this project, I gained valuable experience in designing a user-friendly and functional website, with a focus on facilitating donations to NGOs.
I learned the importance of scoping out the project at each stage, identifying the key problems and needs of the users and NGOs involved, and tailoring the design to meet those needs.
When it comes to donations, especially in Sri Lanka, people fall for many scams. Donations are more spiritual and emotional than we think. Portraying trust and credibility is important to create an emotional connection within donors and motivate them to make a donation.
I learned the delicate art of balancing business goals and user needs and wants where the NGO wants to improve their donations whilst users need to feel that want to make a donation.
Due to budget and time constraints, these designs did not make into final development. However, along with positive praise from the NGO director and other stakeholders, and with accumulation of required resources, I am confident that this project will move forward in the future.
Strengths
Streamlined Navigation: As the donation page was easily accessible from any page with a CTA button on the header plus having it integrated into the main website meant that user did not have to move to a different third-party platform to make a donation.
Enhanced Donor Trust and Confidence: Incorporating NGO registration, past projects and credible evidence about its efforts and information about donation impact improved donor trust.
Flexible Donation Process: Donation process allows multiple currencies and multiple payment methods that are catered to the target user group.
Opportunities for Improvement
More Ways to Donate: More extensive user research into less tech savvy user groups would have uncovered that there is a need for more donation methods including donations by text messages etc.
More Information on Impact: Incorporating the impact of the donations for each amount of donation would have provided a better idea of the impact of each contribution
Proposed Solutions
More Ways to Donate: More extensive user research into less tech savvy user groups would have uncovered that there is a need for more donation methods including donations by text messages etc.
More Information on Impact: Incorporating the impact of the donations for each amount of donation would have provided a better idea of the impact of each contribution
By addressing these UX shortcomings and more user research, Reforest Sri Lanka can aim to increase its donations even more whilst ensuring the trust of the donors. This will empower the NGO to carry out more reforestation projects with the help of donations and achieve their goal of restoring the forests of Sri Lanka to its former levels.
📊 Solution Test
After introducing a new solution for Reforest Sri Lanka donation flow, I conducted testing with users aligned with the previously defined personas. Subsequently, I collected data, and here are the results.
User journey: Making a donation for 'Reforest Sri Lanka'
1️⃣ Designs - First Version
After clicking on the “Donate” header navigation button, donors will be directed to the donation page, where they need to fill in the necessary information about their donation.
The goal of this screen was to create a seamless and user-friendly donation flow by simplifying the donation process for donors.
To achieve that, I had to go through numerous design iterations, and some of them are depicted below, along with the final donation flow screen.
🤩Designs - Final Version
Note: I didn’t include all the iterations to prevent the case study from becoming excessively lengthy.
After making all the changes, I finally moved to the final donation flow.
Selecting multiple currencies was added as per the insights from user research
More information about why you should donate to Reforest Sri Lanka was shown, along with past projects, to portray the impact that the donation can have
'Start points', a popular mobile rewarding scheme in Sri Lanka, was added as a payment method
Viewing past projects + other pages
Monthly Donations
For monthly donations, I decided to display the impact of the donations for different plans.
🤔What Happens After Donations?
As revealed through primary research, most of the donors were often skeptical about NGOs because they don’t receive any information after making a donation. This lack of transparency leads to uncertainty, and donors are keen to understand how their donations are being utilized.
So to solve this problem, I came up with a solution.
Once a donation is placed, donors can check their donation status by clicking the “Track your impact” button after making a donation, which takes them to an impact dashboard. Of course, there are certain technical constraints of individually tracking each plant planted, and this will require additional resources to fulfill.
After the donation is confirmed, donors will receive a thank-you and confirmation message from the NGO. From that point onward, the NGO will maintain communication with donors throughout the journey until their donation reaches the needy people.
😇 So what happened next? What did I learn?
Through this project, I gained valuable experience in designing a user-friendly and functional website, with a focus on facilitating donations to NGOs.
I learned the importance of scoping out the project at each stage, identifying the key problems and needs of the users and NGOs involved, and tailoring the design to meet those needs.
When it comes to donations, especially in Sri Lanka, people fall for many scams. Donations are more spiritual and emotional than we think. Portraying trust and credibility is important to create an emotional connection within donors and motivate them to make a donation.
I learned the delicate art of balancing business goals and user needs and wants where the NGO wants to improve their donations whilst users need to feel that want to make a donation.
Due to budget and time constraints, these designs did not make into final development. However, along with positive praise from the NGO director and other stakeholders, and with accumulation of required resources, I am confident that this project will move forward in the future.
Strengths
Streamlined Navigation: As the donation page was easily accessible from any page with a CTA button on the header plus having it integrated into the main website meant that user did not have to move to a different third-party platform to make a donation.
Enhanced Donor Trust and Confidence: Incorporating NGO registration, past projects and credible evidence about its efforts and information about donation impact improved donor trust.
Flexible Donation Process: Donation process allows multiple currencies and multiple payment methods that are catered to the target user group.
Opportunities for Improvement
More Ways to Donate: More extensive user research into less tech savvy user groups would have uncovered that there is a need for more donation methods including donations by text messages etc.
More Information on Impact: Incorporating the impact of the donations for each amount of donation would have provided a better idea of the impact of each contribution
Proposed Solutions
By addressing these UX shortcomings and more user research, Reforest Sri Lanka can aim to increase its donations even more whilst ensuring the trust of the donors. This will empower the NGO to carry out more reforestation projects with the help of donations and achieve their goal of restoring the forests of Sri Lanka to its former levels.
Other case studies
Optimizing the Online Donation Experience for 'Reforest Sri Lanka'
Optimizing the Online Donation Experience for 'Reforest Sri Lanka'
Optimizing the Online Donation Experience for 'Reforest
Sri Lanka'
6 min read
At-a-Glance
Having volunteered with 'Reforest Sri Lanka', an environmental NGO based in Sri Lanka, I got the opportunity to improve the donations received by revamping its web presence.
I worked to design a new donation user flow that improved the user experience for users and potential donations for the organization through 2 rounds of wireframing, prototyping and testing.
I was able to develop a complete redesign of the current website, along with an improved donation flow and detailed style guide through collaboration with volunteers and stakeholders.
Timeline
3 weeks
My Role
UX Designer
Collaboration
4 team members
Platform
Figma
Impact
Collaboration
Improved Donation Flow
4 team members
Platform
Figma
Improved Donation Flow
Impact
My Role
UX Designer
Timeline
3 weeks
Collaboration
4 team members
Platform
Figma
Impact
Improved donation flow
As this was a revamp, below process was followed throughout this project:
Sneak peek of Reforest Sri Lanka’s Web Redesign
Sneak peek of Reforest Sri Lanka’s Web Redesign
Sneak peek of Reforest Sri Lanka’s Web Redesign
🎯 Existing Solution Blueprint
After listening to the POs story and gathering relevant notes about the user groups and their key user journeys, I began creating the existing solution blueprint before creating user personas.
I framed an existing solution blueprint for Reforest Sri Lanka donation flow, which outlined the website's current site map.
By mapping out the existing solution, I gained a better understanding of its strengths, weaknesses, and areas for improvement.
This foundation helped inform the subsequent creation of user personas, ensuring that the proposed enhancements align closely with the needs and preferences of target users.
🧑🏽💻 Product Owner (PO)'s Story
Reforest Sri Lanka started back in 2015 and had one goal in mind: to restore the forest cover of Sri Lanka to its pre 1980s levels.
Reforest Sri Lanka initially started off as a Facebook page which grew into a large group of 300+ volunteers seen today.
Donations and sponsorships are the lifeblood of the organization and in order to complete the pending CSR projects, the organization needs a steady inflow of donations.
The current third-party donation process (via GoFundMe page) is not effective, there is significant drop-off in the user journey and donations are stalled at 10% of its $20,000 goal.
There are high fees associated with using GoFundMe as the donation platform.
In the current website and donation process, there is not enough focus given for social proof.
User journey: Making a donation for 'Reforest Sri Lanka'
That’s it. Thank you for reading. 😇
🤔 Let's visualize it
When a donor arrives at the website, they will first scroll down the header image to where the donation section is.
'Reforest Sri Lanka needs a lift' text link leads to their 'gofundme' page.
Here, the donor can choose to either share or donate now.
Upon clicking donate now, the donor is taken to the donation page where they can select the amount, enter payment details and proceed to donate.
Persona: Main Segment
Persona: Main Segment
Persona: Extended Segment
Persona: Extend Segment
🧑🏽 Personas
I categorized the persona into two main segments. These personas provide a glimpse into the diverse needs, goals, and pain points of individuals within different target audience segments, offering valuable insights for designing tailored solutions to enhance their experience with Reforest Sri Lanka.
🗺️ Existing journey map for Achala
🗺️ Existing journey map for
Achala
🎲 User Experience Matrix
User journey: Making a donation for 'Reforest Sri Lanka'
I created a UX matrix to identify specific problems that users face when making a donation to Reforest Sri Lanka and to get a holistic view of the scenario. Insights gathered from the PO came in handy at this stage and he provided me with a rough idea where things are not working well within this user journey.
🎲 User Experience Matrix
I created a UX matrix to identify specific problems that users face when making a donation to Reforest Sri Lanka and to get a holistic view of the scenario. Insights gathered from the PO came in handy at this stage and he provided me with a rough idea where things are not working well within this user journey.
User journey: Making a donation for 'Reforest Sri Lanka'
📝 User Research
In order to understand the target user group (tech savvy working professionals between 25-40), I held 30 minutes interviews with 15 participants. This research was conducted to extract important insights from the experiences and feedback shared by users when making donations to NGOs and charities within Sri Lanka.
Key Takeaways
From the interviews I learned the main factors that people consider when making a donation to a NGO or charity. It includes the following:
8 out of 15 people said that viewing past projects reinforces their trust with the NGO
9 out of 15 people said that viewing NGO registration reinforces credibility about the NGO
6 out of 15 people were comfortable making a donation via bank transfer
People appreciated receiving confirmation/thank you emails after a donation
People like to see the progress of projects and how their donation is impacting them
There are lot of money scams in Sri Lanka and therefore people are skeptical of online transactions in general
📝 User Research
In order to understand the target user group (tech savvy working professionals between 25-40), I held 30 minutes interviews with 15 participants. This research was conducted to extract important insights from the experiences and feedback shared by users when making donations to NGOs and charities within Sri Lanka.
Key Takeaways
From the interviews I learned the main factors that people consider when making a donation to a NGO or charity. It includes the following:
8 out of 15 people said that viewing past projects reinforces their trust with the NGO
9 out of 15 people said that viewing NGO registration reinforces credibility about the NGO
6 out of 15 people were comfortable making a donation via bank transfer
People appreciated receiving confirmation/thank you emails after a donation
People like to see the progress of projects and how their donation is impacting them
There are lot of money scams in Sri Lanka and therefore people are skeptical of online transactions in general
🧩 Proposed Updates
Having conducted user research and gathering key insights, I created a new solution blueprint for Reforest Sri Lanka. The newly introduced features are represented by green boxes. This blueprint integrates insights from user research, feedback analysis and heuristic evaluations. I envisioned a redesigned donation experience that is integrated into the Reforest Sri Lanka website with enhanced navigation and usability. Overall, the updated solution blueprint is expected to improve the user experience and reinforce the trust for donors of Reforest Sri Lanka.
🧩 Proposed Updates
Having conducted user research and gathering key insights, I created a new solution blueprint for Reforest Sri Lanka. The newly introduced features are represented by green boxes. This blueprint integrates insights from user research, feedback analysis and heuristic evaluations. I envisioned a redesigned donation experience that is integrated into the Reforest Sri Lanka website with enhanced navigation and usability. Overall, the updated solution blueprint is expected to improve the user experience and reinforce the trust for donors of Reforest Sri Lanka.
🧩 Proposed Updates
Having conducted user research and gathering key insights, I created a new solution blueprint for Reforest Sri Lanka. The newly introduced features are represented by green boxes. This blueprint integrates insights from user research, feedback analysis and heuristic evaluations. I envisioned a redesigned donation experience that is integrated into the Reforest Sri Lanka website with enhanced navigation and usability. Overall, the updated solution blueprint is expected to improve the user experience and reinforce the trust for donors of Reforest Sri Lanka.
✍🏼 Paper First
The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.
Sketches were made within a short time period to get as many ideas as possible.
✍🏼 Paper First
The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.
Sketches were made within a short time period to get as many ideas as possible.
1️⃣ Designs - First Version
After clicking on the “Donate” header navigation button, donors will be directed to the donation page, where they need to fill in the necessary information about their donation.
The goal of this screen was to create a seamless and user-friendly donation flow by simplifying the donation process for donors.
To achieve that, I had to go through numerous design iterations, and some of them are depicted below, along with the final donation flow screen.
2️⃣ Designs - Second Version
In the second iteration, I solved few major issues. I included information about the NGO registration, a crucial piece of information that many donors were looking for. In addition, I included the option to donate every month to make it easier for donors to make consistent donations as well as get steady donations for the NGO.
A clear CTA was included in the header to make donations enabling donors to access the donations page easily from any page.
2️⃣ Designs - Second Version
In the second iteration, I solved few major issues. I included information about the NGO registration, a crucial piece of information that many donors were looking for. In addition, I included the option to donate every month to make it easier for donors to make consistent donations as well as get steady donations for the NGO.
A clear CTA was included in the header to make donations enabling donors to access the donations page easily from any page.
🤩Designs - Final Version
Note: I didn’t include all the iterations to prevent the case study from becoming excessively lengthy.
After making all the changes, I finally moved to the final donation flow.
Selecting multiple currencies was added as per the insights from user research
More information about why you should donate to Reforest Sri Lanka was shown, along with past projects, to portray the impact that the donation can have
'Start points', a popular mobile rewarding scheme in Sri Lanka, was added as a payment method
Viewing past projects + other pages
Monthly Donations
For monthly donations, I decided to display the impact of the donations for different plans.
🤔What Happens After Donations?
As revealed through primary research, most of the donors were often skeptical about NGOs because they don’t receive any information after making a donation. This lack of transparency leads to uncertainty, and donors are keen to understand how their donations are being utilized.
So to solve this problem, I came up with a solution.
Once a donation is placed, donors can check their donation status by clicking the “Track your impact” button after making a donation, which takes them to an impact dashboard. Of course, there are certain technical constraints of individually tracking each plant planted, and this will require additional resources to fulfill.
After the donation is confirmed, donors will receive a thank-you and confirmation message from the NGO. From that point onward, the NGO will maintain communication with donors throughout the journey until their donation reaches the needy people.
😇 So what happened next? What did I learn?
Through this project, I gained valuable experience in designing a user-friendly and functional website, with a focus on facilitating donations to NGOs.
I learned the importance of scoping out the project at each stage, identifying the key problems and needs of the users and NGOs involved, and tailoring the design to meet those needs.
When it comes to donations, especially in Sri Lanka, people fall for many scams. Donations are more spiritual and emotional than we think. Portraying trust and credibility is important to create an emotional connection within donors and motivate them to make a donation.
I learned the delicate art of balancing business goals and user needs and wants where the NGO wants to improve their donations whilst users need to feel that want to make a donation.
Due to budget and time constraints, these designs did not make into final development. However, along with positive praise from the NGO director and other stakeholders, and with accumulation of required resources, I am confident that this project will move forward in the future.
Strengths
Streamlined Navigation: As the donation page was easily accessible from any page with a CTA button on the header plus having it integrated into the main website meant that user did not have to move to a different third-party platform to make a donation.
Enhanced Donor Trust and Confidence: Incorporating NGO registration, past projects and credible evidence about its efforts and information about donation impact improved donor trust.
Flexible Donation Process: Donation process allows multiple currencies and multiple payment methods that are catered to the target user group.
Opportunities for Improvement
More Ways to Donate: More extensive user research into less tech savvy user groups would have uncovered that there is a need for more donation methods including donations by text messages etc.
More Information on Impact: Incorporating the impact of the donations for each amount of donation would have provided a better idea of the impact of each contribution
Proposed Solutions
More Ways to Donate: More extensive user research into less tech savvy user groups would have uncovered that there is a need for more donation methods including donations by text messages etc.
More Information on Impact: Incorporating the impact of the donations for each amount of donation would have provided a better idea of the impact of each contribution
By addressing these UX shortcomings and more user research, Reforest Sri Lanka can aim to increase its donations even more whilst ensuring the trust of the donors. This will empower the NGO to carry out more reforestation projects with the help of donations and achieve their goal of restoring the forests of Sri Lanka to its former levels.
📊 Solution Test
After introducing a new solution for Reforest Sri Lanka donation flow, I conducted testing with users aligned with the previously defined personas. Subsequently, I collected data, and here are the results.
User journey: Making a donation for 'Reforest Sri Lanka'
User journey: Making a donation for 'Reforest Sri Lanka'
User journey: Making a donation for 'Reforest Sri Lanka'
6 min read
At-a-Glance
Having volunteered with 'Reforest Sri Lanka', an environmental NGO based in Sri Lanka, I got the opportunity to improve the donations received by revamping its web presence.
I worked to design a new donation user flow that improved the user experience for users and potential donations for the organization through 2 rounds of wireframing, prototyping and testing.
I was able to develop a complete redesign of the current website, along with an improved donation flow and detailed style guide through collaboration with volunteers and stakeholders.
🗺️ Existing journey map for Achala
🚀High-Fidelity Prototype
I created an interactive high-fidelity prototype which can be accessed below.
For the best experience, go fullscreen 🤩
🚀High-Fidelity Prototype
I created an interactive high-fidelity prototype which can be accessed below.
For the best experience, go fullscreen 🤩
🚀High-Fidelity Prototype
I created an interactive high-fidelity prototype which can be accessed below.
For the best experience, go fullscreen 🤩
📊 Solution Test
After introducing a new solution for Reforest Sri Lanka donation flow, I conducted testing with users aligned with the previously defined personas. Subsequently, I collected data, and here are the results.
User journey: Making a donation for 'Reforest Sri Lanka'