Overview

Background

Thinking Huts is an educational non-profit, utilizing architectural scale 3-D printing and local resources to build schools in Africa.
For this project, I focused on redesigning their donation funnel to streamline that process for users. I utilized usability testing and looked at data analytics to analyze user behavior and inform design decisions. I completed this project under a tight timeline in 2 months due to urgent construction project deadlines.

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

$80,000

donations received within 2-months of redesigns

121%

increase in conversion rate

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, users 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.
A majority of users who lands on the donate page does not tend to make any donations.

Limitions: I also want to acknowledge that I was working with limited website analytics data, using basic Google Analytics functions because our team current lacks a data analyst who can set-up detailed tracking flows.

Interviews

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

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

Define

SWOT Analysis

Strengths

Good feedback on the branding designs - feels warm and friendly to users.
Organization has a unique solution (architectural scale 3-D printing) to a commonly targeted problem (inaccessibility of education in rural Africa).
Founder has a touching personal story that resonates with people

Weaknesses

Content design on website is unorganized and lacks attention to UX/UI design principles.
Lack of expertise to implement and interpret marketing and website analytics to inform company strategy.
Tight construction timelines create pressure for marketing and philanthropy efforts.

Opportunities

Implement best practices learned from market research.
Highlight organization's unique value proposition and stories that resonate with people's emotions.
Use UX principles to design clear call-to-actions for users, more intuitive user flows, and reduce decision fatigue.

Threats

Over saturation of nonprofits, especially ones targeting education accessibility in Africa.
A reliance on volunteer resources can mean lack of strong expertise and high turnover.
Small design team means limited opportunities for design reviews and diversity in ideas.

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...

...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 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. 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

High Fidelity Mockups

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 before implementing the changes in Squarespace.

Improvements

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 bunch of text in order to get to the donation check-out. Users can easily scan the content to get the big idea.

Continuing to Iterate

I put together medium-fidelity wireframes to draft my proposed design solutions and present my design rationale to advocate for the importance of my design decisions.. Once I presented to the team and got buy-in from the founder, I implemented the updates on the website.

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 for the first time, we received a large donation of $5,000 through the website!

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