PayPal Donation Pages
From a single donate button to a full fundraising suite for nonprofits.
Use your strongest final-state screenshot — ideally the redesigned donation page with charity branding + form, or the Campaign fundraiser page. Or a split mockup showing all three products side by side.
One product. Four years. A full platform rebuild.
PayPal Donation Pages — originally called the Donate Button — was PayPal's turnkey fundraising product for smaller nonprofits: organizations that wanted to raise money online but didn't have the technical resources for a full API integration. The concept was right. The execution had fallen significantly behind.
I took on the redesign in late 2020. What started as a refresh of a single product became a four-year effort producing three distinct fundraising tools, a rebuilt donor experience, a rebuilt charity creation experience, and two design system contributions to PayPalUI. I led the design throughout, managing a junior designer and working closely with content design, product, and engineering.
Two broken experiences — one on each side of the product
From the donor's side
The donation experience had no charity branding, no storytelling, no sense of mission. Donors clicked through a charity's button and landed on a generic PayPal-branded page. The page didn't do any of the work that donation pages are supposed to do: inspire confidence, reinforce the emotional decision to give, create a sense of connection. It just processed a payment.
From the charity's side
The creation wizard was unclear and prone to failure — especially for charities not already logged into their PayPal Business account. The final confirmation screen was a block of raw HTML code. For non-technical users, this was the finish line. Here's your embed code, good luck.
The deeper problem was in how the product was named. Calling it the "Donate Button" locked everyone into thinking about it as a single embeddable widget. What charities actually needed was a fundraising platform. Reframing the product — both internally and in how we presented it to charities — was the first and maybe most important design decision we made.
Screenshots of the old donation page — generic PayPal branding, no charity identity, bare-bones form. Use 2–3 screens showing the full before state.
The raw HTML code wall that was the old "confirmation page." Show it large enough to be legible — readers will immediately understand the problem. This is the most compelling before image in the case study.
Three fundraising tools, one platform
The redesign introduced three products, each designed for a different fundraising context.
The original product, rebuilt from the ground up. A charity embeds a button on their site; donors click through and give. Same concept, completely rebuilt on both sides.
A shareable link — no embed required. Built for charities without websites, or those fundraising through social media, email, or text. Direct path to the donation page.
A time-bound fundraiser with a specific goal, end date, and full storytelling capability. Built for events and moments — disaster relief, end-of-year pushes, specific projects.
The management dashboard showing Button, Link, and Campaign options side by side. Or the v1 two-product version alongside the updated three-product version to show evolution.
The redesigned landing/marketing page charities see when first discovering the product — explains the platform before asking them to log in and build.
Rebuilding the donation page from the donor's perspective
The donor-facing donation page was redesigned from the ground up. We added charity branding: a full header image (the charity's own photography) and a logo. We gave charities an editable description field to share their mission. The goal was to let the charity do the emotional work of fundraising — their imagery, their words, their story.
We also significantly reduced PayPal branding on the page itself. PayPal's brand equity serves a purpose (trust in the payment transaction), but it shouldn't overwhelm the charity. We found the right balance by keeping PayPal visible in the payment flow but stepping back in the storytelling sections.
Other key additions: suggested donation amounts (preset tiers I helped standardize as a PayPalUI pattern), Cover the Fees (one of the most-requested features from charity customers), improved recurring donations, and the choice between a popup overlay or full-page redirect.
Bare-bones page, no charity branding. Use alongside the After to make the contrast clear.
New page with charity header image, logo, mission description, suggested amounts, Cover the Fees, and recurring donation option. Annotate what's new and why each element is there.
2–3 rounds of the donation page redesign showing the evolution — reduced PayPal branding, better charity prominence, form improvements. Shows your process, not just the final result. You shared several rounds of iterations; use them here.
Rebuilding the creation flow for non-technical users
Fixing the guest flow
One of the most persistent failure points was charities hitting errors when creating a button without logging in first. The system would try to match their email to an existing PayPal Business account, fail, and return a cryptic error message. This happened constantly.
Rather than fix the error message, we fixed the problem. We required login at the beginning of the flow, before any setup steps, and reframed it as a benefit: "Log in to save your donation page and access editing and management features." Account creation was streamlined for charities without a PayPal account.
A wizard with live preview
The old creation flow was sequential and opaque — fill in fields, click Next, hope for the best. The new version included a live preview of the donation page updating in real time. Every customization was immediately visible. Charities knew exactly what their donors would see at every step.
For the Campaign product, we built a full rich text editor (headers, body copy, lists, images, and embedded video) so charities could build a proper story alongside their fundraising goal. Another pattern I standardized with PayPalUI and contributed to the broader design library.
Replacing the code wall
The new confirmation experience was the management dashboard: charities could see all three distribution options side by side — a shareable link, an embeddable card, and a QR code for print and in-person use. From the same page, they could edit, duplicate, or delete their donation page. Everything in one place; no code required.
The login prompt redesign — showing the reframe from "you must log in" to "log in to save your page and access more features." A small copy change with a large impact on completion rates.
The creation wizard showing form fields on the left and the live preview updating on the right. One of the most compelling screens in the case study — shows the problem (opacity) and solution (real-time feedback) at a glance.
The old confirmation screen showing raw HTML embed code. Show it large enough for the code to be legible. A caption is all you need: "The old confirmation screen. Non-technical users had to copy and implement this themselves."
The new management page showing all three distribution methods side by side, plus the edit/duplicate/delete menu. Annotate the three options so readers understand the range of use cases.
The Campaign creation wizard showing the rich text editor panel with story section visible and live preview alongside.
The donor-facing campaign page: header image, goal progress bar, rich-text story, comments, and donation history for social proof.
Building for the platform, not just the product
Two patterns I contributed from this project made it into PayPalUI for use across the platform. Building product-specific solutions that only lived inside Donation Pages would have been the path of least resistance; standardizing them took more coordination but created value for other teams.
Suggested donation amounts — the tiered giving preset pattern, defining behavior, visual hierarchy, and interaction model for any giving context on PayPal's platform. Rich text editor — a standardized component supporting headers, body copy, lists, images, and embedded video, now available across PayPal's storytelling surfaces.
The suggested amounts component in PayPalUI / Figma, or a side-by-side showing the pattern in two different giving contexts. Demonstrates the cross-platform contribution.
The rich text editor in the Campaign wizard, or as a component in PayPalUI. Shows the editing toolbar, formatting options, and how it integrates into the creation flow.
A foundation, not a finish line
The initial redesign launched about six months after I started. From there we continued iterating — adding features, responding to feedback, and expanding the product's capabilities over four years.
Late 2020 — Project start
Product audit, charity customer research, and the strategic reframe from "Donate Button" to Donation Pages platform.
Mid-2021 — Initial launch
Donate Button + Donate Link with redesigned donor page, creation wizard with live preview, login reframe, and management dashboard.
2021–2022 — Iteration & additions
Cover the Fees, recurring donations improvements, onboarding refinements, and ongoing charity feedback cycles.
2022–2024 — Campaign product
New Campaign fundraiser with goal tracking, rich text editor, social proof features (comments + donation history), and campaign management.
The metric I find most meaningful is the support ticket reduction.
Our charity customers were struggling. They needed a product that worked the way they thought it would, and treated them as the non-technical users they were. When the ticket volume dropped, that meant people were actually getting through the experience on their own.
What I'd take forward
What I'm most proud of with Donation Pages is the product evolution, not just the individual features. We started with a single widget that was barely holding together. We ended with a platform: three distinct products, a rebuilt charity experience, a rebuilt donor experience, and two design system contributions built and iterated over four years.
Questioning whether you're solving the right problem before diving into solutions is something I try to bring to every project. The reframe from "Donate Button" to "Donation Pages" is the clearest example of that in my career. Once we changed how we were thinking about the product, the path forward became much clearer.
Throughout this project I led a junior designer, collaborated closely with content designers, product managers, and engineering, and worked cross-functionally with the PayPalUI team. I was responsible for the design vision, the day-to-day craft decisions, and the strategy for how we evolved the product over time.