Crafting a Compassion-Driven Donation Platform for Animal Welfare
Crafting a Compassion-Driven Donation Platform for Animal Welfare
A user-focused platform designed to inspire donations and share the charity’s mission.
A user-focused platform designed to inspire donations and share the charity’s mission.
Crafting a Compassion-Driven Donation Platform for Animal Welfare
Crafting a Compassion-Driven Donation Platform for Animal Welfare
A user-focused platform designed to inspire donations and share the charity’s mission.
A user-focused platform designed to inspire donations and share the charity’s mission.
Design challenge and responsibilities review
Design challenge and responsibilities review
Design challenge and responsibilities review
The Challenge
The Challenge
The Challenge
The Challenge
Finding trustworthy charities, donating, and exploring pet adoption should be simple, but confusing websites and lack of transparency make it overwhelming. A centralized, user-friendly platform is needed to streamline support for animal welfare.
Finding trustworthy charities, donating, and exploring pet adoption should be simple, but confusing websites and lack of transparency make it overwhelming. A centralized, user-friendly platform is needed to streamline support for animal welfare.
Finding trustworthy charities, donating, and exploring pet adoption should be simple, but confusing websites and lack of transparency make it overwhelming. A centralized, user-friendly platform is needed to streamline support for animal welfare.
The Opportunity
The Opportunity
The Opportunity
The Opportunity
Create a centralized, transparent platform to simplify donations, track usage, and connect users with trusted animal charities and adoption resources.
Create a centralized, transparent platform to simplify donations, track usage, and connect users with trusted animal charities and adoption resources.
Create a centralized, transparent platform to simplify donations, track usage, and connect users with trusted animal charities and adoption resources.
Client
Client
Client
Client
Animal Care Shelter
Animal Care Shelter
Animal Care Shelter
Duration
Duration
Duration
Duration
September 2023 - December 2023 (12 weeks)
September 2023 - December 2023 (12 weeks)
September 2023 - December 2023 (12 weeks)
Our Team
Our Team
Our Team
Our Team
Manjot Kaur (Me), Leo Geng, Shivani Mehta, Xueying Liu
Manjot Kaur (Me), Leo Geng, Shivani Mehta, Xueying Liu
Manjot Kaur (Me), Leo Geng, Shivani Mehta, Xueying Liu
Tools
Tools
Tools
Tools
Figma, Figjam, Google slides, Zoom, Google Docs, Google meet
Figma, Figjam, Google slides, Zoom, Google Docs, Google meet
Figma, Figjam, Google slides, Zoom, Google Docs, Google meet
My Role
My Role
My Role
My Role
UX Designer, Researcher
UX Designer, Researcher
UX Designer, Researcher
BACKGROUND
THE STORY BEHIND THE SPARK
THE STORY BEHIND THE SPARK
THE STORY BEHIND THE SPARK
As an animal lover, I often think about the little furry friends in need and how I can help. I’d love to adopt a pet one day, but I always wonder where I could do that and…
"How might I support animal charity platforms with donations to make a real difference?"
When I set out to research animal charities and adoption centers, I imagined it would be simple—find a trustworthy organisation, learn how to help, and take action. Instead, I found myself navigating a tangled web of endless websites, each more confusing than the last. Information was scattered, resources felt unreliable, and transparency was nowhere to be found. It was overwhelming, and worst of all, it left me questioning the credibility of it all.
As an animal lover, I often think about the little furry friends in need and how I can help. I’d love to adopt a pet one day, but I always wonder where I could do that and…
"How might I support animal charity platforms with donations to make a real difference?"
When I set out to research animal charities and adoption centers, I imagined it would be simple—find a trustworthy organisation, learn how to help, and take action. Instead, I found myself navigating a tangled web of endless websites, each more confusing than the last. Information was scattered, resources felt unreliable, and transparency was nowhere to be found. It was overwhelming, and worst of all, it left me questioning the credibility of it all.
As an animal lover, I often think about the little furry friends in need and how I can help. I’d love to adopt a pet one day, but I always wonder where I could do that and…
"How might I support animal charity platforms with donations to make a real difference?"
When I set out to research animal charities and adoption centers, I imagined it would be simple—find a trustworthy organisation, learn how to help, and take action. Instead, I found myself navigating a tangled web of endless websites, each more confusing than the last. Information was scattered, resources felt unreliable, and transparency was nowhere to be found. It was overwhelming, and worst of all, it left me questioning the credibility of it all.
The Problem Uncovered:
The Problem Uncovered:
The Problem Uncovered:
The Problem Uncovered:
Curious, I dug deeper. Through conversations with fellow animal lovers in my building, I discovered common frustrations:
• Where do donations actually go?
• Which charities are trustworthy?
• How do I find the right pet for adoption and understand the process?
The lack of a centralised, user-friendly platform left many donors and adopters feeling stuck. Smaller, deserving charities and shelters struggled to gain visibility, further compounding the issue.
Curious, I dug deeper. Through conversations with fellow animal lovers in my building, I discovered common frustrations:
• Where do donations actually go?
• Which charities are trustworthy?
• How do I find the right pet for adoption and understand the process?
The lack of a centralised, user-friendly platform left many donors and adopters feeling stuck. Smaller, deserving charities and shelters struggled to gain visibility, further compounding the issue.
Curious, I dug deeper. Through conversations with fellow animal lovers in my building, I discovered common frustrations:
• Where do donations actually go?
• Which charities are trustworthy?
• How do I find the right pet for adoption and understand the process?
The lack of a centralised, user-friendly platform left many donors and adopters feeling stuck. Smaller, deserving charities and shelters struggled to gain visibility, further compounding the issue.
Taking The Dive:
Taking The Dive:
Taking The Dive:
Taking The Dive:
To explore these challenges in depth, I collaborated with my fellow UX designers—Leo Geng, Shivani Mehta, and Xueying Liu.
Together, we began to analyse the gaps in current systems and brainstorm how we could create a solution that truly empowers animal lovers and organisations alike.
To explore these challenges in depth, I collaborated with my fellow UX designers—Leo Geng, Shivani Mehta, and Xueying Liu.
Together, we began to analyse the gaps in current systems and brainstorm how we could create a solution that truly empowers animal lovers and organisations alike.
To explore these challenges in depth, I collaborated with my fellow UX designers—Leo Geng, Shivani Mehta, and Xueying Liu.
Together, we began to analyse the gaps in current systems and brainstorm how we could create a solution that truly empowers animal lovers and organisations alike.
THE RESEARCH
We kicked off our research by:
We kicked off our research by:
We kicked off our research by:
Competitive Analysis by exploring existing charity websites like 'The Humane Society of the United States', 'Best Friends Animal Society', etc., analysing how they communicate their mission, facilitate donations, and foster community engagement.
Engaging in User Interviews and Observations with individuals who have previously supported animal charities or made significant contributions to relevant causes. Subsequently, we transcribed these interviews and meticulously synthesised the key discoveries and insights derived from them to define our design requirements.
Key insights:
Emphasize safe environment and responsible pet ownership.
Utilize emotional appeal and informative content to attract support.
Host live streams to strengthen connections and showcase impact.
Prioritise brand credibility and transparent donation usage.
Competitive Analysis by exploring existing charity websites like 'The Humane Society of the United States', 'Best Friends Animal Society', etc., analysing how they communicate their mission, facilitate donations, and foster community engagement.
Engaging in User Interviews and Observations with individuals who have previously supported animal charities or made significant contributions to relevant causes. Subsequently, we transcribed these interviews and meticulously synthesised the key discoveries and insights derived from them to define our design requirements.
Key insights:
Emphasize safe environment and responsible pet ownership.
Utilize emotional appeal and informative content to attract support.
Host live streams to strengthen connections and showcase impact.
Prioritise brand credibility and transparent donation usage.
Competitive Analysis by exploring existing charity websites like 'The Humane Society of the United States', 'Best Friends Animal Society', etc., analysing how they communicate their mission, facilitate donations, and foster community engagement.
Engaging in User Interviews and Observations with individuals who have previously supported animal charities or made significant contributions to relevant causes. Subsequently, we transcribed these interviews and meticulously synthesised the key discoveries and insights derived from them to define our design requirements.
Key insights:
Emphasize safe environment and responsible pet ownership.
Utilize emotional appeal and informative content to attract support.
Host live streams to strengthen connections and showcase impact.
Prioritise brand credibility and transparent donation usage.
Then, we analysed the data with these methodologies:
Affinity mapping: We identify key themes, pain points, and user behaviours by categorising them into distinct areas: Connection with animals and charity, Responsible decision-making, Recognition and reputation, Security and trust, Visual appeal, Navigation and accessibility, Information needs, and user preferences.
Then, we analysed the data with these methodologies:
Affinity mapping: We identify key themes, pain points, and user behaviours by categorising them into distinct areas: Connection with animals and charity, Responsible decision-making, Recognition and reputation, Security and trust, Visual appeal, Navigation and accessibility, Information needs, and user preferences.
Then, we analysed the data with these methodologies:
Affinity mapping: We identify key themes, pain points, and user behaviours by categorising them into distinct areas: Connection with animals and charity, Responsible decision-making, Recognition and reputation, Security and trust, Visual appeal, Navigation and accessibility, Information needs, and user preferences.
Then, we analysed the data with these methodologies:
Affinity mapping: We identify key themes, pain points, and user behaviours by categorising them into distinct areas: Connection with animals and charity, Responsible decision-making, Recognition and reputation, Security and trust, Visual appeal, Navigation and accessibility, Information needs, and user preferences.
Fig 1. Affinity Mapping
Fig 1. Affinity Mapping
Fig 1. Affinity Mapping
The AEIOU analysis guided us to develop Persona and Empathy Map, allowing us to dive into user behaviour, goals, pain points, and what motivates them to donate.
The AEIOU analysis guided us to develop Persona and Empathy Map, allowing us to dive into user behaviour, goals, pain points, and what motivates them to donate.
Fig 2. User Persona
Fig 2. User Persona
Fig 2. User Persona
Furthermore, through Journey Mapping, we mapped the user’s path to enhance their experience while aligning with organisational goals, uncovering pain points and boosting engagement.
Furthermore, through Journey Mapping, we mapped the user’s path to enhance their experience while aligning with organisational goals, uncovering pain points and boosting engagement.
Fig 3. User Journey Map illustrating user frustration on a scale of 1 to 5 for each task.
Fig 3. User Journey Map illustrating user frustration on a scale of 1 to 5 for each task.
Fig 3. User Journey Map illustrating user frustration on a scale of 1 to 5 for each task.
Our User Mental Model captures key insights, highlighting recurring patterns in user thoughts, behaviours, and expectations, ensuring we meet their needs effectively.
Our User Mental Model captures key insights, highlighting recurring patterns in user thoughts, behaviours, and expectations, ensuring we meet their needs effectively.
Fig 4. Analysing mental models.
Fig 4. Analysing mental models.
Fig 4. Analysing mental models.
Unlocking The Insights:
Unlocking The Insights:
Unlocking The Insights:
Unlocking The Insights:
Our research revealed two compelling drivers behind user donations: Emotion and Transparency. These insights emerged from the following key findings:
Our research revealed two compelling drivers behind user donations: Emotion and Transparency. These insights emerged from the following key findings:
Our research revealed two compelling drivers behind user donations: Emotion and Transparency. These insights emerged from the following key findings:
Promote a safe environment and responsible pet ownership through the website.
Promote a safe environment and responsible pet ownership through the website.
Promote a safe environment and responsible pet ownership through the website.
Promote a safe environment and responsible pet ownership through the website.
Get more information about the organisation and it’s stories.
Get more information about the organisation and it’s stories.
Get more information about the organisation and it’s stories.
Get more information about the organisation and it’s stories.
Host live streams to foster connections and highlight real-time impact.
Host live streams to foster connections and highlight real-time impact.
Host live streams to foster connections and highlight real-time impact.
Host live streams to foster connections and highlight real-time impact.
Emphasize brand credibility and ensure transparency in donation usage by showcasing detailed financial reports.
Emphasize brand credibility and ensure transparency in donation usage by showcasing detailed financial reports.
Emphasize brand credibility and ensure transparency in donation usage by showcasing detailed financial reports.
Emphasize brand credibility and ensure transparency in donation usage by showcasing detailed financial reports.
Offer diverse donation options with robust payment security.
Offer diverse donation options with robust payment security.
Offer diverse donation options with robust payment security.
Offer diverse donation options with robust payment security.
The Site Map:
The Site Map:
The Site Map:
The Site Map:
To better understand how users would navigate the primary workflow of an animal charity organization, we've created a site map. We've identified four primary goals for users, each linked to the following 10 pages in the user flows:
To better understand how users would navigate the primary workflow of an animal charity organization, we've created a site map. We've identified four primary goals for users, each linked to the following 10 pages in the user flows:
To better understand how users would navigate the primary workflow of an animal charity organization, we've created a site map. We've identified four primary goals for users, each linked to the following 10 pages in the user flows:
Fig 5. Site Map.
Fig 5. Site Map.
Fig 5. Site Map.
Information Architecture:
Information Architecture:
Information Architecture:
Information Architecture:
Guided by research, we crafted an information architecture map to align content with the user journey. Every detail was designed to foster trust, emotional connection, and inspire meaningful donations, creating an experience that's both impactful and engaging.
Guided by research, we crafted an information architecture map to align content with the user journey. Every detail was designed to foster trust, emotional connection, and inspire meaningful donations, creating an experience that's both impactful and engaging.
Guided by research, we crafted an information architecture map to align content with the user journey. Every detail was designed to foster trust, emotional connection, and inspire meaningful donations, creating an experience that's both impactful and engaging.
Fig 6. Information Architecture
Fig 6. Information Architecture
Fig 6. Information Architecture
THE SOLUTIONS
From Insights to Impact: Designing the Ultimate Animal Charity Experience
From Insights to Impact: Designing the Ultimate Animal Charity Experience
From Insights to Impact: Designing the Ultimate Animal Charity Experience
With our research complete and the Information Architecture in place, we brought our vision to life. Starting with low-fidelity wireframes and progressing to polished high-fidelity designs, we ensured every insight shaped the experience. Our goal: a seamless, user-friendly animal charity website that truly makes an impact.
With our research complete and the Information Architecture in place, we brought our vision to life. Starting with low-fidelity wireframes and progressing to polished high-fidelity designs, we ensured every insight shaped the experience. Our goal: a seamless, user-friendly animal charity website that truly makes an impact.
With our research complete and the Information Architecture in place, we brought our vision to life. Starting with low-fidelity wireframes and progressing to polished high-fidelity designs, we ensured every insight shaped the experience. Our goal: a seamless, user-friendly animal charity website that truly makes an impact.
With our research complete and the Information Architecture in place, we brought our vision to life. Starting with low-fidelity wireframes and progressing to polished high-fidelity designs, we ensured every insight shaped the experience. Our goal: a seamless, user-friendly animal charity website that truly makes an impact.
Low-Fidelity Wireframes:
Low-Fidelity Wireframes:
Low-Fidelity Wireframes:
Low-Fidelity Wireframes:
Fig 7. Low-fi wireframes.
Fig 7. Low-fi wireframes.
Fig 7. Low-fi wireframes.
Perfecting the Experience: Usability Testing Insights
Perfecting the Experience: Usability Testing Insights
Perfecting the Experience: Usability Testing Insights
Perfecting the Experience: Usability Testing Insights
Before crafting our high-fidelity wireframes, we wanted to ensure our designs truly connected with users. Through usability testing with four participants, we uncovered valuable feedback:Participants praised the website's smooth navigation and found joy in the adorable pet images. Features like the live stream page and downloadable donation certificates stood out as favorites. Alongside these wins, we also identified key pain points that needed addressing, ensuring our final design would be as seamless as it is engaging.
Before crafting our high-fidelity wireframes, we wanted to ensure our designs truly connected with users. Through usability testing with four participants, we uncovered valuable feedback:Participants praised the website's smooth navigation and found joy in the adorable pet images. Features like the live stream page and downloadable donation certificates stood out as favorites. Alongside these wins, we also identified key pain points that needed addressing, ensuring our final design would be as seamless as it is engaging.
Before crafting our high-fidelity wireframes, we wanted to ensure our designs truly connected with users. Through usability testing with four participants, we uncovered valuable feedback:Participants praised the website's smooth navigation and found joy in the adorable pet images. Features like the live stream page and downloadable donation certificates stood out as favorites. Alongside these wins, we also identified key pain points that needed addressing, ensuring our final design would be as seamless as it is engaging.
Fig 8. Usability Testing Insights
Fig 8. Usability Testing Insights
Fig 8. Usability Testing Insights
Refining the Vision: From Feedback to High-Fidelity Designs
Refining the Vision: From Feedback to High-Fidelity Designs
Refining the Vision: From Feedback to High-Fidelity Designs
Refining the Vision: From Feedback to High-Fidelity Designs
Armed with insights from usability testing, we fine-tuned our designs to address user needs and enhance the experience. With these improvements in place, we moved forward to create polished, high-fidelity mock-ups that brought our vision to life.
Armed with insights from usability testing, we fine-tuned our designs to address user needs and enhance the experience. With these improvements in place, we moved forward to create polished, high-fidelity mock-ups that brought our vision to life.
Armed with insights from usability testing, we fine-tuned our designs to address user needs and enhance the experience. With these improvements in place, we moved forward to create polished, high-fidelity mock-ups that brought our vision to life.
Armed with insights from usability testing, we fine-tuned our designs to address user needs and enhance the experience. With these improvements in place, we moved forward to create polished, high-fidelity mock-ups that brought our vision to life.
The Landing Page
The Landing Page
The Landing Page
The Landing Page
The landing page is meticulously designed to seamlessly guide users through their website exploration while continuously inspiring them to contribute to the charity at every step, ensuring a user-friendly and enjoyable experience.
The landing page is meticulously designed to seamlessly guide users through their website exploration while continuously inspiring them to contribute to the charity at every step, ensuring a user-friendly and enjoyable experience.
The landing page is meticulously designed to seamlessly guide users through their website exploration while continuously inspiring them to contribute to the charity at every step, ensuring a user-friendly and enjoyable experience.
Fig 9. Annotated Landing Page.
Fig 9. Annotated Landing Page.
Fig 9. Annotated Landing Page.
About Us Page
About Us Page
About Us Page
About Us Page
The About Us page plays a pivotal role in establishing the organization’s credibility. It introduces the team behind the mission, shares the organization’s values, and highlights milestones achieved over the years. By offering transparency, this page fosters trust and reassures users that their support is making a genuine impact.
The About Us page plays a pivotal role in establishing the organization’s credibility. It introduces the team behind the mission, shares the organization’s values, and highlights milestones achieved over the years. By offering transparency, this page fosters trust and reassures users that their support is making a genuine impact.
The About Us page plays a pivotal role in establishing the organization’s credibility. It introduces the team behind the mission, shares the organization’s values, and highlights milestones achieved over the years. By offering transparency, this page fosters trust and reassures users that their support is making a genuine impact.
Fig 10. Annotated About Us Page.
Fig 10. Annotated About Us Page.
Fig 10. Annotated About Us Page.
Donation Page
Donation Page
Donation Page
Donation Page
The Donation page serves as the centerpiece of our Animal Charity organization, aligning with our design frame to encourage user donations. We've meticulously designed this page to ensure a smooth and engaging user experience as they explore our website, incorporating numerous features to enhance their overall journey.
The Donation page serves as the centerpiece of our Animal Charity organization, aligning with our design frame to encourage user donations. We've meticulously designed this page to ensure a smooth and engaging user experience as they explore our website, incorporating numerous features to enhance their overall journey.
The Donation page serves as the centerpiece of our Animal Charity organization, aligning with our design frame to encourage user donations. We've meticulously designed this page to ensure a smooth and engaging user experience as they explore our website, incorporating numerous features to enhance their overall journey.
Fig 11. Annotated Donation Page.
Fig 11. Annotated Donation Page.
Fig 11. Annotated Donation Page.
Money Donation Page
Money Donation Page
Money Donation Page
Money Donation Page
Fig 12. Annotated Money Donation Page.
Fig 12. Annotated Money Donation Page.
Fig 12. Annotated Money Donation Page.
Food/Other Goods Donation Page
Food/Other Goods Donation Page
Food/Other Goods Donation Page
Food/Other Goods Donation Page
Fig 13. Annotated Food/ Other Goods Donation Page.
Fig 13. Annotated Food/ Other Goods Donation Page.
Fig 13. Annotated Food/ Other Goods Donation Page.
Live Stream Page
Live Stream Page
Live Stream Page
Live Stream Page
The "Live Stream" page is a response to the polite requests from our interviewees during the interviews we conducted. We recognized that users who donate to such charities are often emotionally driven and desire more visual content of the pets to help them decide to contribute. Therefore, we've designed our own version of the live stream page to enrich the user experience and inspire donations.
The "Live Stream" page is a response to the polite requests from our interviewees during the interviews we conducted. We recognized that users who donate to such charities are often emotionally driven and desire more visual content of the pets to help them decide to contribute. Therefore, we've designed our own version of the live stream page to enrich the user experience and inspire donations.
The "Live Stream" page is a response to the polite requests from our interviewees during the interviews we conducted. We recognized that users who donate to such charities are often emotionally driven and desire more visual content of the pets to help them decide to contribute. Therefore, we've designed our own version of the live stream page to enrich the user experience and inspire donations.
Fig 14. Annotated Live Stream Page.
Fig 14. Annotated Live Stream Page.
Fig 14. Annotated Live Stream Page.
Donate to Fundraisers Page
Donate to Fundraisers Page
Donate to Fundraisers Page
Donate to Fundraisers Page
The "Fundraisers" page is dedicated to raising funds for pets with special needs and aims to inspire users to support specific pets by making donations.
The "Fundraisers" page is dedicated to raising funds for pets with special needs and aims to inspire users to support specific pets by making donations.
The "Fundraisers" page is dedicated to raising funds for pets with special needs and aims to inspire users to support specific pets by making donations.
Fig 15. Annotated Fundraisers Page.
Fig 15. Annotated Fundraisers Page.
Fig 15. Annotated Fundraisers Page.
Financial Reports Page
Financial Reports Page
Financial Reports Page
Financial Reports Page
Shows the users how the money and items are used for the animals well-being.
Shows the users how the money and items are used for the animals well-being.
Shows the users how the money and items are used for the animals well-being.
Fig 16. Annotated Financial Reports Page.
Fig 16. Annotated Financial Reports Page.
Fig 16. Annotated Financial Reports Page.
REFLECTIONS
A Journey of Learning and Impact
A Journey of Learning and Impact
A Journey of Learning and Impact
Immersive Learning: Designing an animal charity website was a fun and insightful journey. I had the opportunity to meet and interact with interviewees and professionals from various charities, learning about their daily struggles and needs.
Real-World Impact: Understanding the challenges faced by these organizations, from securing donations to arranging medical care for animals, fueled our mission to create a solution that truly addressed these issues.
Collaboration and Growth: Working with a talented team with diverse skill sets was an amazing experience. It taught me how to collaborate effectively and harness each team member's strengths.
UX & Figma Mastery: This project helped me significantly enhance my Figma and UX design skills, improving both my technical abilities and my understanding of user-centered design.
Immersive Learning: Designing an animal charity website was a fun and insightful journey. I had the opportunity to meet and interact with interviewees and professionals from various charities, learning about their daily struggles and needs.
Real-World Impact: Understanding the challenges faced by these organizations, from securing donations to arranging medical care for animals, fueled our mission to create a solution that truly addressed these issues.
Collaboration and Growth: Working with a talented team with diverse skill sets was an amazing experience. It taught me how to collaborate effectively and harness each team member's strengths.
UX & Figma Mastery: This project helped me significantly enhance my Figma and UX design skills, improving both my technical abilities and my understanding of user-centered design.
Email: mj.kaur2292@gmail.com
Copyright © 2024 by Manjot Kaur
Email: mj.kaur2292@gmail.com
Copyright © 2024 by Manjot Kaur
Email: mj.kaur2292@gmail.com
Copyright © 2024 by Manjot Kaur
Email: mj.kaur2292@gmail.com
Copyright © 2024 by Manjot Kaur