Optimizing Donations Through A Streamlined Website Redesign

Role: UX, UI, Brand & Strategy

I worked as the lead on this project with another designer who worked with me on planning, creating, and building the site.

I also worked with the CEO and Director of operations throughout the entire project.

---

Overview

Better Youth has been a Non-Profit for over 20 years. They are a creative arts and business development organization for foster, homeless, and low-income children in Los Angeles.

Problem

Better Youth wanted to update their site because they felt it was time for a change. They felt the site was old and outdated. The main goal was to improve the public image of their organization and successfully encourage their desired audience to make donations.

Solution

I successfully revitalized the donation page by developing a page that caters to the needs of the target audience while also effectively achieving business objectives.

---

The Process

Kickoff Meeting to Understand Business Goals

My process started with a kickoff meeting, which included getting to know my fellow designer and my stakeholders to understand why they want a new website.

From our discovery session, I learned that success looks like a site that reflects the brand and is on par with other non-profit sites.

The Current Experience

To better understand the gaps between Better Youth's site and other non-profits, I audited the website.

While I was reviewing the website, I noticed that the donation page appeared to be the biggest concern. As a non-profit organization, every dollar counts towards supporting their cause, so it's important for them to make the donation process as seamless as possible.

What was working:

• They included information about the impact they have already made, which could encourage users to donate.

What wasn’t working:

• Both PayPal and Network for Good payment methods redirect the user away from the site

• The Network for Good site makes a user create an account before they donate

It seems like the current experience of accepting donations is causing some issues for the organization. The donation page is a crucial part of any non-profit's website, and it's important to make the process as smooth as possible. However, with the current setup, users are being redirected away from the site and may be discouraged from completing their donations due to the extra steps involved.

Competitive Analysis

To understand how donation experiences work on other non-profit sites, I compared Better Youth's site to similar organizations and found:

• A donation button is very visible somewhere on the site

• Organizations have embedded donation form that lives on their donation page

These experiences at other non-profit sites have a much more user-friendly and streamlined donation process which can help to increase the likelihood of completing the donation.

Presenting The Findings

I shared my discoveries with the team and discovered that they currently receive donations at events through direct PayPal payments and written checks. We promptly devised a plan to move forward, agreeing to first seek out solutions.

In my next team meeting, I presented a new built-in donation form for the donation page. Additionally, I suggested adding a donor wall and a 'Donate' CTA in the Navigation.

Why this solution can work?

The form will make it easier for a user to make a donation which can reduce friction in the donation experience. This feature aligns with industry norms and helps organizations stay competitive in the non-profit market.

Implementing the Solution

Wireframes were well received until the inevitable happened....constraints!

The CEO informed me that we have a budget for the redesign. The platform expenses need to stay within the yearly budget and have reasonable donation processing fees. I proposed a few platform solutions they could go with. Ultimately, they chose the one that best fit their needs which made me make some adjustments to my original solution. While we had to remove the donor wall feature, we were able to keep the embedded donation form feature, which was a crucial part of the redesign. To make up for the missing feature, we added some branding to give it a unique touch

and bring the design together.

Post Launch Testing

After implementation, I conducted a usability test with users to understand their experience and validate that the design decisions worked. I recruited 5 users but got 2 since there were scheduling conflicts and no-shows. Despite the tight timeline and limited number of users, I persevered to finish this part of the project by month's end.

Of the 2 users, both were able to make a donation when tasked to do so. They both commented on the ease of use which coincided with the jovial praise from organization members on the new page design. The user's feedback gave me the confidence to keep the design.

Another insight that was revealed in usability testing was that both users reported the dropdown menu above the donation amounts was causing confusion. This feedback was a great eye-opener to improving the user experience which we're currently working on!

Learnings

#1 Making it Work

Throughout the project, I had many ideas in mind, but I quickly realized that not all of them could be implemented. It was important to take into consideration the donation platform we were using and whether my ideas aligned with it. If they didn't, it could have resulted in a much more significant change than what I planned.

#2 Timeline Matters

We were able to successfully launch the website by the intended deadline, thanks to my leadership and the dedication of the team. Despite some challenges along the way, we were able to stay on track by communicating frequently and making adjustments as needed. I am proud of the work we accomplished together and believe that the website will be a valuable asset for Better Youth in achieving their fundraising goals.

Overall, I was pleased with the final result and believe that it will help Better Youth achieve its fundraising goals effectively and efficiently.