Website Designed to Increase Donations for a Food Bank

Non-Profit | Responsive Website
Designing a website for a campaign that resulted in a 11% increase in website engagement and 5% increase in donations
A laptop screen showcasing the Help and Feed homepage.
Role
Lead UX Designer & Researcher
Team
Lead Developer
Project Manager
Skills
Competitive Analysis
Lo-Fi Wireframes
Hi-Fi Wireframes
Style Guide
Timeline
2 Weeks

PROJECT OVERVIEW

Sai Dham Food Bank- Help & Feed Campaign

Sai Dham Food Bank, a nonprofit dedicated to feeding vulnerable communities, operated five programs supporting seniors, children, international students, the homeless, and emergency food assistance. Facing a financial shortfall that threatened program sustainability, the organization launched the Help & Feed Campaign to increase website traffic and raise funds. The campaign was promoted on the food bank’s website to drive awareness and donations towards the campaign website.

the problem

What was going wrong?

The campaign on Sai Dham Food Bank’s current website lacked traffic and failed to generate sufficient donations due to an overwhelming amount of content, which resulted in a dedicated campaign website to enhance awareness and increase contributions within 2 weeks.

SOLUTION & IMPACT

How did I bring more website traffic and donations to this campaign?

As the UX Designer, I designed a dedicated campaign website that streamlined the donor journey, showcased donation impact, and increased website engagement by 11% and donations by 5%.
An image of the Help & Feed website's homepage.

CONSTRAINTS

Since we were working with Stripe for payment processing, our ability to customize the pages was limited, restricted to certain CTA colors and adding our logo. Additionally, collaborating with offshore teams introduced constraints such as time zone differences, delayed feedback loops, and communication gaps, which made real-time collaboration and rapid iteration more challenging.

DESIGN PROCESS

Goals and Objectives

During our kickoff meeting with the project manager and developer, it was stated that this campaign website had two clear objectives:

Money icon
1. Increase donations
‍Simplify the process
A detailed sheet icon
2. Impact clarity
What the donation will provide

RESEARCH

Competitive Research

I conducted a competitive analysis to make informed key design decisions by identifying gaps in the food bank’s existing website and outlining must-have features for the new campaign site using competitors who are also using a donation-focused platform.
Competitive analysis of Sai Dham Food Bank and its 3 competitors.
Key Features
The key features in this design are based on insights from the competitive analysis. During a meeting with the project manager, Trust indicators, transparency and communication, and clear calls to action, were identified as the main gaps and will be prioritized. While there are also issues with responsive design and UI on the current website, those will be addressed as part of standard UX best practices.
A hierarchy icon
Clear Program Impact
‍Dedicate sections to each program, highlighting their purpose and measurable impact
An icon showcasing a list in chronological order.
Simple donation flow
Prioritize an easy-to-use donation process with clear calls-to-action (CTAs)
A shield icon
Transparency and trust
Include transparency elements like testimonials and detailed breakdowns of how donations are used

THE DESIGN PROCESS

🎯Goal #1 - Increase Donations: Simplify the Process using a 3 step process
During daily standups, the developer informed me of Stripe’s design limitations—we could only add our logo and apply brand colors to the CTA button, with limited customization of the payment flow. To work within these constraints, I added brand colors and visuals to the high-fidelity wireframes, using the CTA button to draw user attention and encourage donations. I also simplified the homepage and donation flow by removing unnecessary content, reducing distractions, and improving task completion.
A lo-fi sketch of how the journey the donate button will take the user on.
Screens showing the hi-fi wireframes
🎯Goal #2 - Program Impact: What the donation will provide

To motivate users who may be hesitant to donate, I designed a detailed program impact section that clearly explains how donations are used for each program. Each section outlines what the donation supports, helping build trust and transparency. To reinforce this message, impactful photos are included beside each program, visually showcasing the difference donations make. These images are carefully placed to align with user segments, making the content more relatable and emotionally engaging.

A lo-fi image of how the program impact information will be portrayed on the homepage.
A screen showing the hi-fi wireframe of the program section

Brand New Style Guide

The style guide is accessibility compliant, as it follows clear standards for color contrast, readable typography, and consistent layout structures that align with WCAG 2.1 guidelines.
An image of the style guide used for the redesigned website.

The Solution

During the design handoff, the high-fidelity mockups, design system and prototypes were provided to the developer who then brought this vision to life.
An image of the second half of the redesigned Help and Feed campaign website homepage.

Wrapping Up

Impact

Despite the tight timeline, the campaign website was delivered on schedule and achieved measurable success. Early metrics through Google Analytics and Stripe showed a 11% increase in website engagement and 5% increase in donations, demonstrating the effectiveness of the streamlined design and intuitive user journey.

Learnings
You may also like
Three iPhone screens with images of the Earth Hero app
A tablet with ADHD Math's lessons page.