Redesigning a Mobile-First Donation Experience for an NGO
Project Overview
The Problem
Contributions from individuals (not members) account for less than 3% of SEO/BirdLife’s total funding (according to the data from 2022). The existing donation experience is confusing, not fully mobile-friendly, and lacks clear trust signals and visible impact, leading to donor drop-off and missed opportunities.
The Goal
Redesign the current donation experience to reduce abandonment rates and increase spontaneous donations. This will be achieved by simplifying the process, implementing a mobile-first design, building trust, and demonstrating the tangible impact of contributions.
My role
UX designer leading the responsive website redesign from conception to delivery.
Responsibilities
Conducting interviews, wireframing, lo-fi and hi-fi prototyping, performing usability studies, ensuring accessibility compliance, iterating on designs based on feedback and testing, defining information architecture, and implementing responsive design principles.
Understanding the User
User research summary
I developed questions and conducted in-depth user interviews with participants aged 20-65 who donate to various NGOs at least three times a year. The research revealed several critical insights:
1. Trust and Mobile Experience are The Key
The majority of participants who make one-time donations on the go confirmed that they would abandon the donation process if the NGO’s platform did not appear or feel trustworthy.
2. Form Length Leads to Abandonment
Interviewees frequently confessed that lengthy or overly data-intensive one-time donation forms led them to abandon the page. Reasons cited included distractions and multitasking, with an intention to return later – an intention often unfulfilled due to low motivation or forgetfulness.
3. Micro-Donations Preferred by Younger Donors
Younger respondents (up to 35 years) expressed a strong preference for “micro-donations” (under €10). They felt pressured by some NGOs that initially request significantly larger sums, perceiving a message of “donate much more or nothing” due to a lack of clear communication regarding the value and importance of smaller contributions.
The collective feedback indicates a willingness among users to contribute to the NGO, provided the donation experience addresses these critical concerns.
These insights helped me in the design process. I made sure it met user needs and addressed their concerns.
Meet the Users
Sara. The Young Activist
Age: 28
Education: Master’s degree
City: Seville, Spain
Family: Has a partner
Occupation: Nurse
Motivations:
Passionate about environmental justice and takes direct action to protect birds and their habitats. Supports organizations that are actively involved in conservation efforts.
Frustrations:
- “Absence of a direct link to a donation page makes it difficult to donate quickly”.
- “I have no time to fill out forms to make an instant donation”.
- “If I already trust this NGO, why do they make it this difficult to help them?”
Quote: “We need to be the change we want to see in the world.”
Problem statement:
As a busy professional and responsible citizen, she wants to be able to make good things in a few clicks, so that she can help the community on the go with no extra effort.
User story:
Sara is 28 years old. She is a young professional who lives with her partner in a big city. She likes to read books, play video games, and travel in her spare time. At short breaks, she browses social media to relax.
Sara is frustrated with her one-time donation experience on mobile websites because of the fill-out forms and difficult payment process. She is upset when she can’t donate in 1-2 taps, as she probably will be distracted by someone before she ends the transaction.
Martín. The Concerned Parent
Age: 48
Education: Vocational Training
City: Pamplona, Spain
Family: Married, two kids
Occupation: Baker
Motivations:
Wants to ensure a healthy planet for his children and future generations. Concerned about the impact of climate change and habitat loss.
Frustrations:
- “If the donation process is long and the cause of the campaign is not vital, I’ll probably leave the process”.
- Many steps and filling out forms
- Insecure payment ways
Quote: “Active citizens have to act now for a better future”.
Problem statement:
As an active citizen and father of two, Martín wants to support important initiatives easily, so that she can do good things and spend more time with his kids.
User story:
Martín is 48 years old. He is a working father of two who lives with his wife. He enjoys participating in local initiatives and staying informed through reading online newspapers. He is an active citizen and involved in the community’s life, concerned about the impact of climate change and habitat loss. Martín supports different initiatives on a monthly basis, and he gladly donates to special campaigns too.
Martín is frustrated with his one-time donation experience on mobile websites because of the long fill-out forms and insecure payments.
Competitive Audit
An audit of a few national and international (direct and indirect) competitors’ products provided direction on gaps and opportunities to address with the SEO/Birdlife website.
Request the full competitive audit report by emailing me.
Ideation
I did a quick ideation exercise to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on one-time donation flow and building trust (making results tangible).
Starting the design
Digital wireframes
After ideating and drafting paper wireframes, I developed the initial mobile-first designs. These designs focused on creating a smooth, trustworthy, and fast one-time donation experience.
Mobile home screen with prominent Donate and Shop buttons beneath the header to make it clear the NGO is accepting donations.
Easy to start the donation process screen with a couple of options and the information about the possible outcome of such a donation.
Short fill out form with essential information and express checkout for quick donation process.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow for the one-time donation experience, starting from the home screen.
Usability Study Parameters and Findings
Study type: moderated usability study
Location: Spain, on-site and remote
Participants: 7
Length: 30-50 minutes
These were the main findings uncovered by the usability study:
Confusing Labeling
Some users were confused by the labeling of the payment buttons; an insight is to provide clear, unified labeling indicating “Payment options” instead of “Express Payment” and “Other Ways of Payment.”
Alternative support
People struggle to find alternative ways to support the NGO. An insight is to make the “How to help” CTA on the homepage more visible.
Misleading visual elements
Some users are confused by taking arrow elements for links; an insight is to substitute misleading visual elements.
Refining the design
Mockups
Home Screen
Based on insights from a usability study, I improved the site’s donation flow. To make the “How to Help” section more prominent, I replaced the “Tienda” (Shop) button with an “Ayudar” (Help Us) button in the main navigation.
Actual Home Screen
Lo-Fi Before Usability Study
Hi-Fi After Usability Study
Donate Screen
Based on insights from a usability study, I removed misleading arrows that were causing user confusion. This intervention simplified the user flow and reduced cognitive load during the donation process.
To boost conversions from one-time donors to recurring members, I also highlighted the benefits of becoming an NGO member directly beneath the donation window. This included adding a compelling image of the physical products members receive as a bonus, which serves as a powerful visual incentive.
Original Donate Screen
Lo-Fi Before Usability Study
Hi-Fi After Usability Study
Checkout Labeling
I unified the labeling for the checkout window from a split label to a single, clear call to action: “Choose your method of payment.” This change removes ambiguity and makes the user’s next step obvious.
Additionally, by placing well-known and trusted payment options like Google Pay and Apple Pay at the top of the list, we can create a sense of security and build trust in the service.
Original Fill-out Form
Lo-Fi Before Usability Study
Hi-Fi After Usability Study
Mockups Mobile Screen Size
High-fidelity prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
To view the SEO/BirdLife high-fidelity prototype, wait a second and click around following the donation user flow.
Accessibility considerations
- I employed headings with varying text sizes to create a clear visual hierarchy and guide users through the content.
- The website employs a high-contrast color palette, with color combinations meeting AAA contrast standards to ensure optimal accessibility.
For large-scale text and images of text, an AA color palette is acceptable, provided it has a contrast ratio of at least 6.47:1.
Responsive Design
Sitemap
With the mobile designs completed, I started work on designing the responsive website. I used SEO/BirdlLife sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit the specific user needs of each device and screen size.
Going forward
Takeaways
Impact: The implemented changes, such as a less complicated one-time donation form, a prominent donate button on the mobile site and high-contrast visuals, resulted in a significant improvement in user satisfaction, as measured by positive feedback and increased task completion rates during usability testing.
What I learned: I learned the critical importance of thorough user research in identifying pain points and informing design decisions. Usability testing revealed unexpected challenges that wouldn’t have been apparent otherwise. Also, I improved my skills in creating responsive designs and ensuring cross-device compatibility.
Next steps
Research how the new donation flow is decreasing the abandonment rates.
Conduct a usability study focused on the NGO’s members’ pain points.
Let’s connect
Thank you for your time reviewing my work on the SEO/BirdLife one-time donation flow redesign.
I welcome your feedback and would be happy to discuss this project further. You can find my contact information below.
For more projects, navigate to the portfolio section or visit my portfolio on Dribbble or Behance.
Email: vera@espinacco.es