The problem

A Nielsen Norman Group study shows that "non-profits would collect much more from their websites if only they'd clearly state what they are about and how they use donations."

Other research shows that “60% of potential donors come to a nonprofit's donation page and leave before completing the transaction due to complex donation flows.”

That's why we need to focus on getting users to donate fast.

The solution

The website's home page content is a top priority. It contains information about the NGO's mission, goals, and how the it makes use of the donations. There's no need to click around in hidden menus.

To boost the NGO's community impact and improve fundraising efforts, the website offers more giving options and channels. For example, the user can donate money, food, volunteer, or register for events.

To get users to donate faster, I created a responsive design and a four-step donation form. I added frequency choices (e.g. monthly, yearly or one-time), suggested donation amounts, and the option of entering a custom amount.

My role

I researched, designed, and tested the donation flow for both desktop and mobile devices. I consulted and shared insights with another colleague from the course once a week.

Understanding the user

I conducted user interviews and created a persona to better understand the target users and their needs.

User research confirmed the importance of stating the NGO's mission, objectives, and how it uses donations. Many users found NGO websites hard to navigate, which created frustration and a rise in the abandonment rate.

Instead, a clear donation flow supports both the decision to make a contribution and to become a long-term donor.

User pain points

• Navigation: Confusing navigation and too many steps to donate
• Information: Difficulty in finding information related to how the donations are managed
• Interaction: NGO websites don't provide an easy browsing experience
• Retention: “I donated for this cause, but what happens next?” Lack of activities to encourage long-term donor loyalty

---

---

Starting the design

I started sketching wireframes to address the main user pain points: navigation and the donation flow.

On the homepage, I highlighted the way the NGO uses donations, the various ways to give (donate money or groceries), volunteer or register for events.

Since 25% of online giving happens on mobile devices, I created an optimized browsing experience for users on mobile devices.

For the digital wireframes, I focused on creating an easy donation flow and adding other ways to contribute. I prioritized useful button locations and guiding visual elements.

Before moving on to designing the mockups, I conducted an unmoderated usability study. The main findings center around navigation and payment methods.

Key design changes after the usability study

• Navigation: Make the donate button the primary focus of the home page
• Recurring card payments: Monthly, yearly or one-off donation
• Suggested amounts: Pre-populated amounts for faster checkout
• Payment methods: Offer more ways to donate with Apple and Google Pay, PayPal, and Direct Debits
• Information Architecture: Provide information about donations management and send annual reports

View the low-fidelity prototype→

High-fidelity prototype

After another usability study round, I moved the donation button to the center of the home page. I added specific numbers to better support the “How we use your money” section.

I also added the option to make one-time donations, without having to create an account. This aims to simplify the donation flow.

Accessibility considerations

• Hierarchy: Focus on visual hierarchy for headings, buttons, and text.
• Labels: Include labels for donation forms and payment check-out to mark important information.

View the high-fidelity prototype→

Takeaways

The entire project, from researching to designing to testing the prototypes made this project a challenging, but rewarding process.

I learned to pay more attention to the things users unknowingly struggle with during the usability studies. For instance, users went silent right before deciding to donate money. During these moments, I tried to encourage them to think out loud.

This project helped me better understand the impact a website's design and content have on its success.

Next steps

• Further invest in Information Architecture, content usability, and UX writing.
• Apply principles of cognitive psychology to attract new donors and build long-term donor loyalty.
• Conduct follow-up usability testing on the donation flows and identify areas to improve the payment methods.