Most nonprofit websites are not losing donations because they look outdated. They are losing donations because the path from “I care about this” to “my gift is confirmed” is longer, colder and more confusing than it needs to be.
This guide is a practical walkthrough of nonprofit website design from a conversion point of view. We will cover the pages every organization needs, how to lay out a donation form, how to present recurring gift options, and which trust signals (financial transparency, beneficiary photos, third-party ratings) measurably influence whether someone finishes the checkout or abandons it.
Start With the Real Goal: Completed Gifts, Not Pretty Pages
A nonprofit website has to serve several audiences at once: donors, volunteers, grant officers, beneficiaries, board members, journalists and job seekers. When you try to serve them all equally on every page, you serve none of them well.
The practical fix is to assign one dominant job to each page and design backwards from it:
- Homepage: communicate the mission in under 5 seconds and route visitors to the right next step.
- Donation page: remove friction and finish the transaction.
- Program pages: prove the work is real, specific and effective.
- About and financials: answer “can I trust you with my money?”
Everything below flows from that principle.
The Core Pages Every Nonprofit Website Needs
You do not need forty pages. You need roughly a dozen that are genuinely good. Here is the minimum viable architecture we recommend to nonprofit clients.
| Page | Primary job | Must contain |
|---|---|---|
| Homepage | Orient and route | One-sentence mission, hero image of real people, primary Donate button, three routing paths (Give, Get Help, Get Involved) |
| Donation page | Convert | Single-column form, suggested amounts with impact labels, recurring toggle, security and transparency badges |
| Program / What We Do | Prove the work | Specific activities, service area, numbers served, photos, one beneficiary story per program |
| Impact / Results | Justify the gift | Outcome metrics, before-and-after data, annual report download |
| About / Team | Humanize | Founding story, staff photos and names, board list, physical address |
| Financials / Transparency | Remove doubt | Form 990s, audited statements, expense breakdown chart, EIN, charity rating links |
| Ways to Give | Capture larger gifts | Monthly giving, DAF, stock, employer matching, planned giving, mail-in option |
| Volunteer / Get Involved | Convert time, not money | Open roles, time commitment, short application form |
| Events | Fill seats | Date, location, registration, sponsorship tiers |
| News / Blog | Earn search traffic and show momentum | Updates, stories, grant announcements, post dates that are recent |
| Contact | Be reachable | Phone, email, address, map, response time expectation |
| Thank You / Confirmation | Start retention | Receipt info, what happens next, share buttons, optional monthly upgrade ask |
A note on the “Get Help” path. Many nonprofits build entirely for donors and forget the people they serve. If your organization provides direct services, a beneficiary needs to find eligibility and intake information within one click, in plain language, on a phone, often on a slow connection.
Above the Fold: Impact Storytelling in Five Seconds
The top of your homepage is the highest-value real estate you own. It should not be a rotating carousel of gala photos.
The four elements that belong above the fold
- A specific, human headline. Not “Empowering communities since 1998.” Instead: “We keep 2,400 families in Portland housed every year.” Specificity is the cheapest credibility you can buy.
- One photograph of a real beneficiary. A single face looking toward your headline or CTA outperforms group shots, logos and abstract stock imagery. Eye-tracking research consistently shows that visitors follow a subject’s gaze, so orient the photo toward your donate button.
- A primary CTA in a contrasting color. One button, one verb, always visible in the header on scroll. “Donate” is fine. “Give monthly” is often better if monthly giving is your priority.
- A secondary path for non-donors. Volunteer, get help, or subscribe. This prevents the 90 percent of visitors who will not donate today from bouncing.
Carousels: still a bad idea
Sliders dilute your message, hurt Core Web Vitals, and interact badly with screen readers. Pick the single strongest story and commit to it. If your board insists on featuring five programs, use a static three-column grid below the hero instead.
Story structure that works
The most effective nonprofit storytelling follows a simple shape: one person, one obstacle, one intervention, one outcome, one ask. Aggregate statistics belong on the impact page. On the homepage, the identifiable victim effect is real: donors give more to one named person than to a statistic representing thousands.
Donation Page Anatomy: Where Gifts Are Won or Lost
Donation form abandonment is the single largest leak in most nonprofit websites. Visitors click Donate, see a cluttered multi-step form on a third-party domain with a different logo, and leave. Here is how to build the page instead.
1. Keep it on your own domain and brand
If your processor forces a redirect to a generic checkout page, at minimum use an embedded form or a white-labeled subdomain with your logo, colors and typography. A visual break in branding at the moment of payment is one of the most damaging trust failures in nonprofit web design.
2. Use a single column and a visible progress cue
Single-column forms complete faster than multi-column ones because the eye does not have to hunt. If you use multiple steps, show a step indicator (Amount, Details, Payment) so donors know the end is near. Three short steps generally outperform one long scroll on mobile, and one page outperforms three on desktop for small gifts.
3. Lead with amounts, not with personal data
Ask for the gift amount first. Requesting name, address and phone before the donor has committed to a number increases abandonment. Payment details go last.
4. Design your suggested amount array deliberately
Suggested amounts anchor giving behavior. Use four to five options plus an “Other” field, and pre-select the second option rather than the lowest. The topic gets a thorough treatment elsewhere.
| Amount | Impact label (one-time) | Impact label (monthly) |
|---|---|---|
| $25 | One week of school meals for a child | Meals every school day, all year |
| $50 (pre-selected) | A month of tutoring for one student | A tutor for a student every month |
| $100 | Books and supplies for a classroom | A fully stocked classroom each term |
| $250 | A semester of after-school care | Year-round care for one family |
| Other | Open field, numeric keypad on mobile | Open field, numeric keypad on mobile |
Rule of thumb: every suggested amount should carry a concrete impact label. “$50” is a price. “$50 buys a month of tutoring” is a purchase. Donors respond to the second.
5. Cut every non-essential field
Each additional field costs you completions. Audit your form and ask what you genuinely need for the receipt and for stewardship.
- Keep: amount, first name, last name, email, card details, billing postal code.
- Make optional or drop: phone number, full mailing address (for online-only donors), title, how did you hear about us, comments.
- Never require: account creation before giving. Guest checkout is non-negotiable.
6. Offer the payment methods donors already use
Digital wallets remove the friction of typing card numbers on a phone. At a minimum support:
- Credit and debit cards
- Apple Pay and Google Pay
- PayPal or Venmo
- ACH or bank transfer for larger gifts
- Donor-advised fund (DAF) widget for major donors
7. Handle the processing fee question with care
An opt-in checkbox that reads “I’d like to cover the transaction fee so 100% of my gift goes to the mission” is standard practice and often accepted by a majority of donors. Pre-checking it is legal in most cases but creates refund requests and complaints. Leave it unchecked and let the donor choose.
8. Make errors forgiving
Validate inline, keep entered data if a card is declined, and write error messages in plain English. A donor who has to re-enter everything after one typo frequently gives up. Background reading: https://highmountaincreative.com.
Recurring Gift Options: The Highest-Leverage Design Decision
Monthly donors are worth several times a one-time donor over their lifetime, and recurring revenue is what lets a nonprofit plan. Yet most donation forms treat the recurring option as an afterthought checkbox.
Design patterns that lift monthly giving
- Use a two-tab toggle at the top of the form: “Give Monthly” and “Give Once”, with Monthly selected by default and clearly labeled. Do not hide the one-time option; hiding it damages trust and increases chargebacks.
- Show the monthly equivalent, not the annual total. “$15 per month” feels smaller than “$180 per year” even though it is more revenue.
- Add a soft upgrade nudge. When a donor selects a one-time gift, display a small line beneath the amount: “Make this $12 monthly instead and provide meals all year.” Keep it to one sentence and never as a modal that blocks the form.
- Name the program. “Join the Monthly Circle” or “Become a Sustainer” converts better than “recurring donation” because it offers membership, not a subscription.
- Show what happens next. State the charge date, how to update a card, and how to cancel in one click. Transparency about cancellation increases sign-ups, it does not decrease them.
- Ask again on the thank-you page. A one-time donor who just gave is the warmest possible audience for a monthly upgrade ask.
Do not forget the donor portal
Monthly donors churn primarily because of expired cards and because they cannot find a way to change their gift. A self-service portal where a donor can update payment details, change the amount, pause, or download tax receipts protects revenue you already earned. Pair it with automated card-updater services from your processor.
Trust Signals: What Actually Reduces Donor Hesitation
Right before submitting a gift, a first-time donor asks three silent questions: Is this organization real? Is my card safe? Will the money reach the mission? Your design should answer all three without the donor having to leave the page.
Financial transparency signals
- Charity rating badges: Candid/GuideStar Seal of Transparency, Charity Navigator score, BBB Wise Giving Alliance accreditation. Place them in the footer sitewide and directly beneath the donate button.
- Expense allocation graphic: a simple chart showing program, administrative and fundraising percentages. Even an honest 78/14/8 split beats saying nothing.
- Downloadable Form 990 and audited financials for the last three fiscal years, clearly dated.
- EIN and 501(c)(3) status stated plainly, with a note about tax deductibility.
- Named leadership and board with photos. Anonymous organizations do not get gifts.
Security signals
- HTTPS across the entire site, not just the checkout page
- A short line near the payment fields: “Your donation is processed securely. We never store card details.”
- Payment processor logos (Stripe, PayPal) which carry borrowed trust
- A visible link to your privacy policy and a statement that you do not sell or trade donor data
Social proof and beneficiary evidence
- Real beneficiary photos with consent, captioned with a first name and a specific detail. Stock photography is detectable and it flattens trust.
- Donor testimonials that explain why they give, placed in the donation page sidebar.
- Live activity indicators such as “38 donors have given this month” if your numbers are healthy enough to be encouraging.
- Partner and funder logos, press mentions, and grant awards.
- Contact details and a physical address in the footer. A P.O. box alone raises questions.
Ethical storytelling matters
Dignity-first imagery is now the expectation, not a nice-to-have. Show people as agents in their own story rather than as passive recipients, obtain and document photo consent, and avoid images that reduce a person to their hardest moment. Beyond ethics, donors increasingly recognize exploitative imagery and it damages your brand.
Layout Fundamentals That Support Every Page
Navigation
Limit the main menu to five to seven items with a visually distinct Donate button at the far right. Use plain labels. “Our Work” beats “Initiatives.” “Get Help” beats “Client Services Portal.” Keep a sticky header on scroll so the donate button is never more than one tap away.
Mobile first, genuinely
The majority of nonprofit website traffic and a large and growing share of online gifts arrive on phones, often from a social post or a QR code at an event. That means:
- Tap targets of at least 44 by 44 pixels
- Numeric keypad triggered for amount and card fields
- Digital wallet buttons shown first on mobile
- No horizontal scrolling, no pinch-to-zoom on forms
- Sticky donate bar on program and story pages
Accessibility is not optional
Nonprofits serve the public, and inaccessible sites exclude donors and beneficiaries alike. Build to WCAG 2.2 AA: color contrast of 4.5:1 for body text, full keyboard navigation, visible focus states, descriptive alt text, captions on video, form labels that are actually labels rather than placeholder text, and no reliance on color alone to convey meaning. Accessibility improvements typically raise conversion rates for everyone, not just assistive technology users.
Speed and hosting
Every additional second of load time costs conversions, and donation traffic tends to arrive in spikes: year-end giving, Giving Tuesday, a viral post, an emergency appeal. Compress and lazy-load images, serve modern formats such as WebP or AVIF, limit third-party scripts (each tracking pixel has a cost), use a CDN, and make sure your hosting can survive a traffic surge without the donation form timing out.
Local SEO and findability
If you serve a defined geography, claim your Google Business Profile, add Organization and NGO schema markup with your EIN and logo, keep name/address/phone consistent everywhere, and build service-area pages. Also apply for the Google Ad Grant, which provides eligible nonprofits with in-kind search advertising, and point those ads at well-designed landing pages rather than the homepage.
Measure the Right Numbers
You cannot improve what you do not track. Set up conversion tracking on your donation flow before you redesign anything, so you have a baseline.
| Metric | What it tells you | Where to look first if it is low |
|---|---|---|
| Donate button click rate | Whether the site motivates | Hero message, CTA contrast, placement |
| Donation form completion rate | Whether the form works | Field count, mobile layout, branding break, error handling |
| Average gift size | Whether your anchors work | Suggested amount array, impact labels |
| Recurring share of gifts | Revenue predictability | Toggle prominence, default state, monthly framing |
| Mobile vs desktop conversion gap | Mobile UX quality | Wallet payments, keypad types, tap targets |
| Monthly donor churn | Retention health | Donor portal, card updater, stewardship emails |
| Largest Contentful Paint | Speed and SEO | Hero image weight, scripts, hosting |
Test one variable at a time. The highest-yield experiments for most nonprofits are the recurring toggle default, the suggested amount array, the hero headline, and the number of form fields.
Nine Mistakes We See on Nonprofit Sites Every Week
- A Donate button that is the same color as everything else in the header.
- A donation form that redirects to an unbranded third-party page.
- Requiring account creation before giving.
- Suggested amounts with no impact labels.
- Recurring giving buried in a checkbox below the payment fields.
- Stock photos of generic smiling people instead of the actual community served.
- A blog whose most recent post is two years old, signaling an inactive organization.
- No financials, no 990, no board list, no physical address.
- PDFs used in place of web pages for annual reports and program information, which are unreadable on phones and invisible to search.
A Practical Build Sequence
- Audit and baseline. Record current traffic, donation completion rate, average gift, recurring share and page speed.
- Define one primary conversion. Usually monthly gifts. Everything gets designed around it.
- Gather assets. Photography with consent, three beneficiary stories, current financials, outcome data, staff and board bios.
- Write before you design. Headlines, impact labels and CTA copy first; layout follows the message.
- Wireframe the donation flow first, not the homepage. It is the page that pays for the site.
- Choose the stack. A CMS your staff can update without a developer, a processor with good recurring tools and a donor portal, and a CRM that syncs cleanly.
- Build accessible and fast. Test with a keyboard and a screen reader before launch, not after.
- Set up tracking and receipts. Conversion events, automated tax receipts, and a welcome email series for new monthly donors.
- Launch, then iterate quarterly. A nonprofit website is a fundraising instrument, not a monument. Plan for continuous small improvements.
Frequently Asked Questions
How much does a nonprofit website cost?
It depends on scope. A template-based site built in-house can cost a few hundred dollars per year in hosting and platform fees. A professionally designed custom site with donation integration, CRM connection and accessibility compliance typically runs from a few thousand to the low tens of thousands of dollars, plus ongoing hosting, maintenance and payment processing fees. Budget separately for photography, which is often the highest-return line item on the whole project.
How do I create a website for my nonprofit?
Register a domain (a .org signals nonprofit status), choose a CMS such as WordPress or a nonprofit-specific platform, map the core pages listed above, connect a donation processor that supports recurring gifts and guest checkout, gather real photos and stories, build to WCAG 2.2 AA, then set up analytics and automated receipts before you announce the launch. If you have staff time but no design expertise, start with a template and invest your effort in the donation page and photography.
What is the 33% rule for nonprofits?
It refers to the public support test used by the IRS for 501(c)(3) public charities. In broad terms, an organization generally needs to receive at least one third of its support from the general public or government sources to keep public charity status rather than being classified as a private foundation. Practically, that is another argument for a website that makes small-dollar and monthly giving easy: broad public support protects your status. Always confirm details with your accountant or counsel.
What is the 80/20 rule for nonprofits?
It is the observation that roughly 80 percent of revenue tends to come from about 20 percent of donors. For website design this means two things: make the fast, low-friction path work for everyone, and give your major donors dedicated paths such as donor-advised fund giving, stock transfer, planned giving and a direct line to your development team.
Should the donation page have navigation on it?
Reducing navigation on the donation page usually lifts completion because it removes exits. Keep the logo (linked to the homepage), the essentials of the footer such as privacy and contact, and remove the rest of the menu. Always test on your own traffic before making it permanent. elevationweb.org walks through the specifics.
Is WordPress a good choice for nonprofit website design?
Yes for most organizations. It is flexible, has strong accessibility and SEO capabilities, integrates with nearly every donation platform and CRM, and staff can learn to update it. It does require maintenance: keep core, themes and plugins updated, use quality hosting, and limit plugin sprawl to protect speed and security.
How often should a nonprofit redesign its website?
Full redesigns every four to five years are typical, but continuous improvement matters more. Review your donation flow quarterly, refresh photography and impact numbers annually, and rebuild fully when the platform blocks you technically, the site fails accessibility standards, or mobile conversion is clearly broken.
Do trust badges really increase donations?
They help most with first-time donors who have no prior relationship with your organization, which is exactly the group that abandons most often. Badges alone will not fix a bad form, but combined with a branded checkout, named leadership, published financials and real beneficiary photos, they meaningfully reduce hesitation at the moment of payment.
Bringing It Together
Good nonprofit website design is not decoration. It is the removal of every reason a supporter might hesitate. Lead with one real story above the fold, build the donation page before anything else, default to monthly giving with honest choices, cut every field you do not need, and prove with financials and faces that the money will do what you say it will.
If you would like a second opinion on your donation flow, the team at FatCow Web Design works with mission-driven organizations on conversion-focused website design, accessibility and donation page optimization. Get in touch and we will walk your current site with you.
