Overview

Background

Thinking Huts is an educational non-profit, utilizing architectural scale 3-D printing and local resources to build schools in Africa. As a 501(c) organization, this organization relies 100% on philanthropic efforts to fund its mission, but Thinking Huts was falling behind on the construction project’s timeline to raise $80,000 to fund a landmark 3-D printed campus called the Honeycomb Campus. A key opportunity for funding is after newly published press articles and television interviews that boost visitors to the website.

I redesigned the donation funnel for Thinking Huts to address user drop-offs and improve conversions from new users. Utilizing research, usability testing, and analytics, I streamlined the donation process for users under an urgent two-month construction project deadline, contributing to the organization’s fundraising goal for the Honeycomb Campus.

Details

Role: UX Designer, Content Designer
Duration: July 2024 - August 2024
Tools: Figma, Squarespace, Canva
Frameworks: Usability Testing, Market Research, User Interviews, Cross-functional Collaboration
‍

Outcomes:

330%

increase in donation rate

50%

of total donation goal received within 2 months

121%

increase in donation conversion rate from new visitors

Discover

Diving Into the Data

My personal design philosophy is focus strongly on user research and data to deeply understand the problem and validate any assumptions I had. In this process, I had to advocate for the importance of website analytics and user testing because the founder, Maggie, had qualitative understandings of donor behavior, but not quantitative understandings. I respect her experience and understanding of what resonates with donors from her networking and outreach efforts, and I wanted to add an additional layer of understanding user behavior on the website.
‍
To start off, I dug into the website analytics for this website to see what I could find:

Average engagement time: 11 seconds
Average donations per month: $500
Average conversion rate from Donation page: 1%

Takeaways

Users don't spend a long time on the page. Thus, they make a split second decision of whether or not the content on the page compells them.
A majority of users do not navigate to the donation page from the landing page - they come from direct referral links from ads.
A majority of users who lands on the donate page does not tend to make any donations (low conversion).

Interviews

I conducted four 30-minute interviews with the target demographic - people aged between 30-60 who have an interest in supporting nonprofits and people who had already donated before.

Confidence in the Impact

"I don't make donations unless I'm confident that 100% of the funds will go towards supporting the cause. I need to know exactly how the money is allocated and that my contribution will make a meaningful impact to a cause that I really care about."

Esther H.

Personal Connections

"I don't typically support non-profit organizations unless I feel like I have a personal connection to the founder's story and if the mission is unique. I'm usually more compelled when I see personal anecdotes and previous success stories."

David M.

Legitimacy and Trust

"There's so many non-profits nowadays, and they all seem to be soliciting donations all the time. I'm hesitant to give money unless I can validate that this organization is legitimate and has actually had successful projects that are impactful."

Stan K.

Supporting a Cause

"I'm a fan of supporting non-profits when they align with my personal values. I usually only make one-time donations, but I'll be compelled to continue contributing if I see regular updates and progress towards the mission and goals."

Geoff L.

Insights

People want to know exactly how their donated money will be used by the organization.
People want to resonate with the organization's story and mission, and what makes them stand out from the others.
People need the process to be easy, but not to the point where it feels "scammy". They need to feel that they can trust this organization.

Market Research

I looked at other successful non-profits' websites to gain insight on best practices of content design. I paid particular attention to the content design: what sections were placed where on the page, what words were used, what kinds of pictures were used, and how these come together to compel the user to commit to sending a donation.

Key Takeaways

Need a crisp call to action "tagline" that tells the user exactly what they need to know
Upsell reasonings - let the user know what $ amount will result in and how the donation will be used.
Pictures should be portraits with clear eye-contact to form a personal connection with the user

Usability testing

I conducted light-weight usability testing on the current flow to identify any key usability issues.
‍
Key insights:

Users struggled to read large paragraphs on mobile. They prefer to quickly skim and scroll through.
Headers were inclear, without clear call-to-action
Formatting and content misalignment contributed to a sense of unprofessionalism.
Content was not optimized and had redundancies.

Define

Key User Groups

Based on my research, I discovered that there were 2 main user groups on the website. I identified that the donation funnel should be streamlined to target the small contributors.

High Impact, High Net Worth

They don’t donate through the website, but use it for information to supplement their knowledge and trust from establishing an in-person connections with the founder.

Small Contributers

Use the website both for information, establishing a connection with the mission, and use the donation platform to make donations between 10-50 dollars.

Problem Statements

A potential donor needs to quickly and easily resonate with the organization's mission in order to make a decision and commit to donating.

A philanthropic individual needs feel a sense of trust in the organization and a sense of pride in their potential impact in order to feel inclined to committing monetary support.

How Might We...

...inspire users to understand how special their impact is and make the donation process quick, intuitive, and trustworthy to users?

Design

Analysis of Current Donate Page:

Areas to Improve:

Unclear and vague headline.
Fix: Come up with a clear and concise call-to-action headline.
Floating donation button. Video thumbnail is unidentifiable landscape, so users have no connection to it.
Fix: Replace video with a portrait image that can have "eye-contact"
Fix: Remove the floating donation button and focus only on the embedded donation check-out widget.
Text content is too long. Users will not read the whole thing if they are only spending 11 seconds on this page. Consider mobile users who will not scroll all the way through the content.
Fix: Consolidate text in paragraphs into short bullet points.
Too many options to click on before checking-out of the donation widget. And, the pre-set amounts were not optimized for the target user group. Users will drop-off and give up.
Fix: Move this donation check-out widget to the top of the page, and remove unnecessary options to reduce the amount of work for users.

Wireframes

I started with low-fidelity wireframes to sketch out layout ideas.

Design Iterations

Version 1

In my original designs, I focused on addressing these key issues:

Clear and concise headline - tells users exactly what we're requesting.
Impact: Users get an immediate understanding of what action to take.
Consolidated key information into bullet points.
Impact: Users can quickly scan the points and understand the impact of their donations.
Moved the embedded donation check-out widget to a higher position, and reduced the amount of steps needed to check-out.
Impact: Amplify the call-to-action and streamline the check-out process.
Additional description about the organization's mission is moved further down the page. Added icons to break up text walls.
Impact: Users don't need to scroll past a lot of text in order to get to the donation check-out. Users can easily scan the content to get the big idea.

Iterations

Based on feedback from design reviews and lightweight user testing, I updated the designs to improve visual hierarchy and reduce cognitive load on viewers.

I created high-fidelity mockups of the page redesigns in order to clearly communicate my design decisions to the founder and the rest of the development team. By creating the mockups, I was able to save time and effort by iterating on the designs in Figma, get buy-in from the founder, before implementing the changes in Squarespace.

Wireframe:

Implemented Update:

Next Steps

Further work

Designing a perfect product is a constantly moving goal. What we have now is a great start, but we can continue to make improvements to the page. The organization is gearing up for their next donation campaign, and the founder wants to shift the target audience to a younger generation and those in sports and media. Further work can be done to:

Understand the new target audience - what motivates them and what are they looking for?
Update the page to reflect the organizations marketing campaigns. Currently, they are gearing up for an end-of-year fundraising auction, and I'm working to adding elements that will reflect these campaigns.

REFLECTIONS

Were our goals accomplished?

Yes! After implementing the changes, we saw an increase in donation conversions on the website. We reached our goal of $80,000 in two months, and improved donation conversions from first time visitors.

Lessons learned?

Throughout this process, I learned a few things that I'll take with me as a designer in future projects:

Don't assume user behavior - understand user behavior and validate assumptions with quantifiable and qualitative data. Although Maggie, the founder, had many assumptions and understandings of donations through her work in the field, some of those assumptions were untrue when we looked at the data.
Valuable information can be learned from competitors and similar organizations in the space - market research is valuable to garner best practices.
Focus on reducing friction, not just adding new features. By cutting out unnecessary features and focusing on reducing the friction for users to make their split-second decision and commit to donating, we achieved our goals in the redesign.

Thinking Huts