Redesigning a nonprofit's public-facing donation experience to build donor trust, simplify giving, and communicate real community impact.
Extended Hands Pantry serves families in need across the greater Madison area. While the organization does meaningful work, their website wasn't reflecting it, the donation experience was fragmented, the impact of contributions was invisible, and donors had little reason to return after giving.
My goal was to redesign the donor-facing web experience: simplifying the giving process, surfacing transparent impact data, and creating emotional connection between donors and the families they support, all while ensuring the design worked seamlessly on both desktop and mobile.
Through early scoping and research, three distinct but connected problems emerged, each chipping away at a donor's motivation to give and their sense of belonging to the mission.
The website offered no storytelling or transparency about how contributions help real families, leaving donors unsure their money mattered.
The donation flow was confusing and slow, creating friction that caused potential donors to abandon before completing their contribution.
After donating, users felt no relationship with the organization, no follow-up, no impact updates, no sense of community belonging.
How might we design a donation experience that is fast and frictionless, communicates real impact, and keeps donors feeling connected to the mission long after they give?
Over three weeks, I moved through a full UX cycle, from in-person interviews with pantry users to two rounds of usability testing, with iteration at every stage.
I conducted 5 in-person and phone interviews (20–30 min each) with pantry users and occasional volunteers between June 10–15, 2025. Sessions were recorded with permission and transcribed via Otter.ai. Participants varied widely in age, tech access, and relationship to the organization.
After interviews, I organized all observations into an affinity map, clustering notes across 5 participants into 6 meaningful insight themes.
Users rely on incompatible channels, SMS, flyers, Google, word-of-mouth, with no unified source.
Unclear hours and unexpected closures cause wasted trips and erode trust in the organization.
Users want to know what's available before visiting, especially fresh produce and specialty items.
Interest in volunteering is high, but the sign-up process is opaque, discouraging first-time helpers.
Several users, particularly older participants, prefer fewer words, more visuals, and clear hierarchy.
A significant portion of users lack smartphones or reliable internet, requiring offline-compatible solutions.
Research insights coalesced into a primary persona, a busy, community-oriented donor who wants to give quickly, trust that her money is making a difference, and feel like more than a transaction number.
I began with hand-drawn wireframes to quickly explore layout concepts for the homepage and donation flow, without getting attached to visual details. The goal was to establish hierarchy and information architecture first.
Lo-fi usability testing revealed that users needed clearer separation between "Get Help" and "Donate" paths, more prominent trust indicators, and larger, more accessible touch targets on mobile. These findings directly shaped the mid-fidelity structure.
The user flow defined two parallel paths through the site, one for donors completing a contribution, and one for pantry visitors seeking assistance or appointments. The donation flow was the primary scope of this project.
A secondary path handles walk-in visitors searching for pantry hours or food availability, an insight driven directly by research showing users frequently arrived without knowing what to expect.
The hi-fi prototype translated lo-fi insights into a polished, responsive design. Key design decisions were grounded in research: the navy/green palette establishes authority and approachability, predefined donation tiers reduce decision fatigue, and the impact section was placed above the fold to build confidence before asking for a contribution.
The prototype covered four core screens, Homepage, Impact Page, Donation Form, and Confirmation, each designed responsively for both desktop and mobile breakpoints.
After hi-fi usability testing with 5 participants, I identified 5 priority changes. Iterations were ordered by severity of user impact, issues that caused task failures or confusion came before enhancements.
2 of 5 users did not notice the recurring donation option. I increased its visual prominence and added supporting copy, "Make this a monthly donation" — to clarify its purpose and encourage opt-in.
One user tapped the wrong input due to tight spacing on mobile. I increased spacing between form fields and improved touch target sizes to meet minimum accessibility standards.
Some users hesitated before selecting a tier without guidance. I added contextual labels ("Most Popular," "Feeds a family for a week") to each amount to accelerate decision-making.
Users paused after submitting, unsure what came next. I redesigned the confirmation screen to include a clear receipt summary, impact reminder, and explicit next steps.
The navigation bar tested with low contrast in certain scroll states. I adjusted background opacity and increased type weight to maintain readability across all page contexts.
Hi-fi usability testing was conducted remotely with 5 participants in moderated video sessions. Participants were given 4 scenarios, one-time donation, recurring donation, viewing impact, and mobile donation, all mapped to the primary persona's needs.
No matter how confident I felt about a design, usability testing consistently revealed gaps and opportunities for improvement. That humility, and the discipline to act on it, is what separates good design from assumed design.
— Luis, DesignerOne of the biggest surprises was how often users overlooked the recurring donation option. I'd assumed it would be an obvious, attractive feature, but placement and visual weight mattered far more than I anticipated. The lesson: don't mistake "it's in the design" for "users will see it."
Balancing simplicity with completeness was the central tension throughout. The donation flow needed to be quick and frictionless, but also include enough impact content to build the trust that makes someone click "Submit." Finding that balance required constant reference back to the persona and real user behavior, not my own assumptions about what felt right.
Designing for responsiveness from the very beginning, not as an afterthought, also proved critical. Mobile users showed far less tolerance for friction, and small inconveniences that were easy to overlook on desktop caused genuine hesitation on a phone screen.
Lo-fi testing caught structural issues before they were baked into a polished prototype, saving significant rework time.
Mobile users were consistently less tolerant of friction. Designing for the constrained viewport first produced better solutions at both breakpoints.
The recurring donation finding, a feature present but unseen, reinforced that placement, weight, and contrast are as important as content.
Every design decision was filtered through Maria's needs. That consistent reference point prevented scope creep and kept priorities clear.
This project addressed the donor-facing experience. The next phase, already in scope, would shift focus to the administrative side: a responsive dashboard for Extended Hands Pantry staff to manage donations, track volunteer activity, and plan events without a separate tool download.
Integrate PayPal and Apple Pay to reduce hesitation at checkout, the most commonly cited enhancement from usability testing.
Design a responsive internal dashboard for donation tracking, volunteer management, and event coordination, the logical next layer of this system.
Extend the design to support SMS notifications, Google listing updates, and printable materials, bridging digital and in-person pantry touchpoints.