Web Design & Technology

What Makes a Good Nonprofit Website? 10 Elements, Proven by Real Builds

The ten elements that decide whether a nonprofit website actually fundraises, drawn from 200+ builds. Plus the bonus element almost no agency delivers yet.

Table of Contents

Categories

Web Design & Technology

Publish Date

August 26, 2026

Have a Project or Idea?

We can’t wait to meet you.

Let's Tell Your Story

Download the Nonprofit Website Scorecard

This is the scorecard we use with our own clients — adapted for download so you can run it on your own site.

Download the Scorecard (PDF)

Key takeaways

  • A nonprofit website is part of a marketing system, not a standalone artifact. It only fundraises when the brand, messaging, technology stack, and monthly marketing rhythm are designed together.
  • The ten essential features: single primary CTA per page, one-sentence mission, donor-facing transparency, WCAG 2.1 AA accessibility, real-people storytelling, mobile-first information architecture, donation-as-product, named integration stack, AEO-aware content, and a documented maintenance plan with SEO-preserving migration.
  • Three angles most nonprofit web design content misses: treating donation as a product (not a form), building for the AI era (AEO-aware content + machine-readable structure), and weighting migration & SEO preservation as the highest-risk moment in a website's life.
  • Real-build proof points throughout: San Diego Foundation (41% conversion lift, 248% planned-giving growth), Curebound (75% net-new donor acquisition), Susan Wojcicki Foundation (Habitat build on a hard subject), UNEP World Environment Day (sustained reach across 150+ countries).
  • The bonus 11th element is the ongoing strategy process — quarterly reviews, AEO updates, and a migration playbook ready before the next platform shift. Almost no agency is doing this yet. The ones that do will be the difference between sites that get found in 2026 and sites that don't.

Download the 10-element scorecard to score your own site against these.

Most nonprofit websites don't fail because they're ugly. They fail because they're built as if they're going to do the work alone.

A website is one tool in a larger system. I've watched this play out across more than 200 nonprofit builds at Fifty and Fifty — the brand sets up the conversation. The messaging carries it. The technology stack determines what's possible. The monthly marketing work decides whether anyone ever shows up. Most "what makes a good nonprofit website" lists skip past all of this and jump straight to design checkboxes — mission above the fold, donate button in the nav, mobile-friendly, fast, accessible. All true. None of it explains why most nonprofit websites still don't fundraise.

These are the ten elements I've seen actually predict whether a website works — plus one bonus that's about to become the difference between sites that get found in 2026 and sites that don't. Each element is paired with a real build — San Diego Foundation, Curebound, Susan Wojcicki Foundation, UNEP World Environment Day — and the outcome that build actually produced.

A note on framing: this work sits inside Engagement OS, Fifty and Fifty's growth-systems methodology. Engagement OS is guided by three diagnostics — Strategic Altitude, Supporter Resonance, and Operational Readiness — and the elements below are what they tend to surface, build after build.

1. Audience research and strategy come before design

A nonprofit website that works almost always started with someone willing to do the unglamorous strategy work first. The audit. The donor profiles. The audience map. The content inventory. The parts no one wants to pay for.

Skip this and the rest of the work doesn't matter. When I start a new engagement, the first conversation isn't about design — it's about who actually gives, who the organization thinks gives, and the gap between those two pictures. Most organizations assume they already know who their audience is. Most are wrong, or at least more wrong than they realize. The donors who actually give don't match the donors leadership has in mind, and that gap is where most redesigns succeed or fail — long before the first wireframe.

This is the Engagement OS Diagnose phase. Strategic Altitude surfaces what leadership thinks the audience needs. Supporter Resonance surfaces what the audience actually responds to. Operational Readiness assesses whether the organization can pull off the strategy once it's defined. Good homework closes the gap between strategy and execution.

In practice: define audiences specifically. Map the donor journey from acquisition source through conversion. Note where the data shows people drop off today. The site you build for "people who care about our mission" will be worse than the site you build for "people who already gave once but didn't renew." The second has a real decision behind it.

2. Build the website inside a marketing system, not a silo

A website doesn't sit by itself. It sits inside a brand, a messaging system, a marketing stack, and the monthly rhythm of how an organization talks to its supporters. The most common reason nonprofit websites underperform is that they were built in a silo, then bolted onto everything else after launch.

When the system is connected, the gains compound. Susan Wojcicki Foundation launched as a full holistic build, not just a website project — refreshed brand, refreshed messaging, the website itself, a coordinated launch sequence, and PR partnership so the story could land across multiple channels simultaneously. A new foundation launching into a difficult subject doesn't get a second first impression. The system had to work end-to-end on day one — because every piece was designed to support every other piece, not bolted on after the fact.

The opposite is set-and-forget marketing — agencies that turn on SEO or email and walk away. That stops working within 12 months, every time.

In practice: before you scope a redesign, audit every channel that touches a supporter — email, paid, organic, events, donor stewardship, board outreach. Decide what changes the website needs to support so those channels stop competing with each other. A website built in alignment with the rest of the system produces compound results. A website built in a silo doesn't.

3. Lead the homepage with the problem, not the mission

Most nonprofit homepages talk about the organization. Great nonprofit homepages talk about the problem the organization exists to solve — and earn the right to talk about themselves afterward.

Foundations are especially prone to skipping this. Since they don't need to raise from individuals as urgently as a direct-service nonprofit might, they tend to talk about themselves — their grant cycles, their history, their portfolio. The impact story, and the larger problem that justifies the work, gets buried. International NGOs run into the same trap from a different direction — they have powerful field stories but struggle to translate them into a problem statement that lands with a donor scrolling on their phone.

Susan Wojcicki Foundation handles this well. Susan Wojcicki, a founder of YouTube, died of lung cancer at 56. Her family launched the foundation in her memory to fund research and prevention. The site distills its mission to a single line: building a future where lung cancer is detected earlier, prevented more often, and lives are saved. The homepage opens by selling the problem — lung cancer is the deadliest cancer in the United States, and a significant share of those diagnosed never smoked (American Cancer Society, American Lung Association). Note what they did: cited the actual sources by name, the same way a research article would. That's donor-facing transparency — credibility built through traceability, not marketing language.

In practice: open the homepage with a problem statement, not a mission statement. Keep the mission line to one sentence. Cite your data sources by name. Then introduce the work. Then ask.

4. Use one primary CTA per page

Be clear about what you want a visitor to do. If you want donations, ask for them. If you want volunteers, ask for them. If you want planned giving, build a pathway that surfaces it.

The cliché says "have a prominent donate button." The deeper rule is: have one primary action per page. Walk through ten nonprofit homepages and you'll typically count four to six calls to action competing above the fold — donate, volunteer, sign up, learn more, attend, follow. When everything is a priority, nothing is.

When we worked with San Diego Foundation, the regional community foundation, the redesign organized around exactly this principle. Foundations historically struggle with primary-CTA discipline because their work is largely B2B (advising fund holders, granting to local organizations). San Diego Foundation made the call: every page would drive visitors toward becoming a donor-advised fund holder or a grant partner. Every CTA reinforced one of those two pathways. The result was a 41% conversion lift across the site and 248% growth in planned giving — not because the new site looked better than the old one, but because every page knew its job. I've seen this same pattern repeat at smaller scales across the rest of our 200+ builds: CTA discipline is the cheapest, fastest conversion lever in nonprofit web design, and the one most consistently skipped.

Pro tip — audit your homepage's CTA discipline before scoping a redesign. Open your homepage and count every clickable element above the fold that asks for an action. If it's more than two, you're competing with yourself. The fix is upstream — figure out the primary action, demote everything else, and treat the homepage CTA hierarchy as a strategy decision, not a design decision. Want a structured way to score your site? Download the 10-element scorecard, or talk to us about Fifty and Fifty's Web and Digital Experience service.

5. Differentiate the brand with what only you can credibly say

Most nonprofit homepages sound the same. Same hero phrasing ("Together, we can…"), same mission statement structure, same stock photography, same About / Our Work / Donate navigation. A donor scrolling past three foundation websites that all sound interchangeable will not remember any of them.

Brand differentiation isn't a design layer. It's a strategy layer. The work is figuring out what only your organization can credibly say — about the problem, about the approach, about the outcomes — and then building the site around that.

Curebound built its identity around a single phrase: the city that cured cancer. The phrase tied together what would otherwise have been disconnected facts — that Curebound operates in San Diego, that the city is home to Salk Institute and La Jolla Institute for Immunology, that the foundation funds collaborative research across those institutions, that the work is unusually concentrated geographically. The phrase made the strategy memorable. The site, the email program, and the campaigns all carried it — and 75% of registrants and donors that year were net-new, because the differentiation gave them something to talk about that other foundations didn't. That's what brand differentiation does — not "be edgy," but "make the strategy memorable."

In practice: write down what only your organization can say. Test it against what every other nonprofit in your category says. If it could appear on any of their sites, it's not differentiation. Rewrite until it can't.

6. Focus content, build mobile-first, bury the rest

The two failure modes of nonprofit websites are mirror images. Some try to do everything (the "everything is a priority" site). Some dump everything onto the site (the "we have a page for each program and a sub-page for each sub-program" site). Both produce the same user experience: overwhelmed and unable to act.

The discipline is restraint. Decide what the visitor needs to see, where, and when — and bury everything else two clicks deep. A site visitor has very little time, and on mobile, even less. Mobile traffic is now the majority of nonprofit website visits (roughly 53%, per NPTechforGood), which means information architecture has to work on a 5-inch screen first. If a section doesn't earn its space on mobile, it doesn't earn its space at all. Mobile-first design isn't a tactic; it's what restraint looks like when it's been forced on you by physics.

UNEP World Environment Day, the United Nations Environment Programme's annual global campaign, demonstrates this at scale. The campaign runs across 150+ countries, with national-level events, sector partners, and content in multiple languages. The site can't show every event on the homepage. It has to surface the year's theme, the participation pathway, and the global view — and let everything else live a layer deeper for visitors arriving in search of a specific country, partner, or event. Done badly, this is a dumping ground. Done well, it scales.

In practice: rank-order every section of every page. Build mobile-first. Be willing to cut. The page that does three things well will outperform the page that does seven things poorly.

7. Use real-people storytelling — no stock photos

Stock photos of multi-ethnic teams pointing at laptops are the visual equivalent of "leveraging synergies." Everyone in the sector uses them. Nobody trusts them. The donor who lands on a stock-photo nonprofit site has just been told, on some level, that the organization didn't bother to show its actual work.

Real-people storytelling means named subjects, real photography, named partners, named outcomes. It also means letting the people doing the work tell the story — the researchers, the program staff, the beneficiaries (with full consent and editorial control), the volunteers, the donors who keep coming back. The principle is older than the internet: people give to people, and the strongest signal that an organization exists in the real world is to show the real world.

Curebound builds this in by naming the institutions and the science. Salk Institute. La Jolla Institute for Immunology. Specific research collaborations. Specific scientific outcomes. Susan Wojcicki Foundation does it differently — a letter from Susan's family, Susan's own story told plainly, editorial discipline that resists turning a public health crisis into stock-photo decoration. Two different approaches that share a refusal to be generic.

In practice: replace every stock photo with a real one. If you don't have real photos, plan a photo shoot before launch — it's one of the highest-ROI design investments most nonprofit budgets underfund. Name your partner institutions. Quote the people doing the work. Let the website show what the organization actually is.

8. Treat donation as a product, not a form

Most nonprofit websites treat the donation moment as a form to fill out. Great nonprofit websites treat the donation experience as a product to design, measure, and improve.

The difference matters because a form is a transaction; a product is an experience that connects acquisition source, donor journey, and post-gift relationship. Once you treat donation as a product, you start optimizing for things you can't see from inside the form itself — which acquisition channels bring donors who actually convert, where donors drop off in the flow, whether the recurring-giving prompt is doing more harm than good, how a one-time donor becomes a sustaining one.

This is the framing behind Habitat, a CMS built around fundraising rather than around content. Habitat is a Donately product — and disclosure: Fifty and Fifty and Donately share a founder, so I'm not pretending to be impartial about it. Habitat exists because nonprofit teams kept needing a CMS that treated campaigns, events, and donation flows as first-class objects, not retrofits onto a generic content platform. Susan Wojcicki Foundation runs on Habitat. San Diego Foundation's 248% growth in planned giving was a downstream effect of treating the donor pathway as a product — every page advancing the journey instead of decorating it.

In practice: stop thinking of the donation page as a form. Start measuring it like a product. Track conversion rate, average gift, recurring uptake, and donor lifetime value as the metrics that matter — and design the site backward from there.

9. Name your integration stack — CRM, donation, email, forms, automation

Buyers ask agencies about "CRM integration" generically. That's already a sign the wrong question is being asked. The actual integration decision involves named platforms — and the platform names matter, because each one shapes what the website can and can't do once it ships.

The platforms nonprofits actually use, by category:

The principle behind naming all of these: stack decisions drive the CMS decision, not the other way around. I've watched dozens of redesigns get derailed because the CMS was chosen before the integration stack was mapped — and the org spent the next three years writing custom integrations and losing data in the seams. Outcomes like San Diego Foundation's 41% conversion lift and 248% planned-giving growth don't happen with a misaligned stack — landing pages, donor-advised fund tools, CRM, and planned-giving tracking all have to move data in concert.

Pro tip — make the integration audit before scoping the redesign. List every platform you currently use, mark which ones you're committed to keeping, which are under review, and where today's integration pain points are. Bring that list to your agency on day one. A CMS choice made without that input is guesswork — and you'll find out the hard way three months in. For the full audit walkthrough we use with new clients, talk to us about Fifty and Fifty's Web and Digital Experience service.

10. Build accessibility in from day one — WCAG 2.1 AA is the floor

Most agencies treat WCAG 2.1 AA and ADA compliance as a checkbox. That framing is wrong, and it's costing nonprofits real money.

Accessibility isn't a checkbox. It's a reach decision. The more people who can navigate your site, the more screens it can render on, the more assistive technologies can parse it, the more search engines and AI tools can read it — the more fundraising you can do. That's a math argument, on top of the moral one. Excluding people from your site excludes their donations.

Accessibility has also expanded beyond screen readers, colorblindness, and learning disabilities — though all of those still matter, and WCAG 2.1 AA is the floor, not the ceiling. The newer audience is machines. AI tools and agents are now crawling your site and rebuilding its content for users who may never visit directly. A site that's not accessible to those tools is invisible to a growing share of the people who would otherwise have found you.

Susan Wojcicki Foundation was built with WCAG and ADA compliance from day one. The content was written to be both accessible and understandable for a challenging subject matter — lung cancer affects an enormous population, including many people who never smoked, and the site had to communicate that without overwhelming visitors. The technical layer includes schema markup, structured data, and clean SEO foundations. The result: a site that works regardless of device, network speed, or assistive technology — and that machines can read as well as humans can.

In practice: WCAG 2.1 AA is the floor. Build for screen sizes from TVs down to wearables. Write at the reading level your audience actually reads at. Use semantic HTML and schema markup. Run accessibility audits before launch and on every quarterly review. Build it in from day one, not as a launch-week compliance pass.

Bonus: Build AEO-aware content and an ongoing maintenance plan

This is the element almost no agency is delivering yet — and the one that's about to separate nonprofit websites that get found in 2026 from those that don't. I'm convinced this is the biggest shift in nonprofit web design over the next 24 months, and most organizations don't realize it's happening yet.

AEO-aware content

Agents and AI tools — ChatGPT, Claude, Gemini, Perplexity, and others — are already crawling nonprofit sites, parsing the content, and presenting answers to users who never click through to the source. A user asks ChatGPT about lung cancer foundations to support, and the answer is built from content harvested across multiple nonprofit sites. The user may never see Susan Wojcicki Foundation's homepage directly. What they see is whatever ChatGPT chose to surface — if it could parse the site at all.

Building an AEO-aware site (Answer Engine Optimization — the AI counterpart to SEO) means structuring content so machines can read it as cleanly as a screen reader can. That includes schema markup, semantic HTML, structured data, llms.txt files, explicit FAQ blocks, and content written in patterns retrieval systems can lift cleanly. Fifty and Fifty publishes a /llm-info page — a canonical machine-readable description of the agency — as one example of what this looks like in practice. Most nonprofit sites don't have anything like it yet. The ones that adopt it first will get cited; the ones that wait will be invisible.

The ongoing strategy process

The single worst thing you can do with a new nonprofit website is launch it and stop. The platforms crawling your site are updating constantly. The tools your stack integrates with are updating constantly. The expectations of your donors are updating constantly. A site that performed in 2024 already needs work for 2026, and the rate of change is accelerating.

Migration is the highest-risk moment in a website's life. A redesign can wipe out years of accumulated SEO and AEO authority overnight if it isn't handled carefully. A defensible migration methodology includes one-to-one URL mapping with 301 redirects for every legacy URL that ranks or has backlinks, schema markup preservation, sitemap resubmission to Google Search Console, internal-link auditing, content-parity checks (don't accidentally drop high-traffic pages because they look outdated), Core Web Vitals monitoring for 90 days post-launch, and llms.txt continuity for AI retrieval. Most nonprofit redesigns skip half of this and pay for it in lost organic traffic the following year.

The fix is a strategy process, not a feature. A quarterly review cadence covering content updates, security patches, performance monitoring, AEO-readiness checks, and integration health. An owner — internal or agency — responsible for keeping the site current. A migration playbook ready before the next platform shift, not improvised during it.

Stop doing random acts of marketing. Build the system that makes the website your hardest working employee, then maintain it like one.

Frequently asked questions

What are the essential features of a successful nonprofit website?

The ten elements above are the long answer. The short version: a single primary CTA per page, a one-sentence mission, donor-facing transparency (cite your sources), WCAG 2.1 AA accessibility built in from day one, real-people storytelling, mobile-first information architecture, donation treated as a product, a named integration stack, AEO-aware content for AI retrieval, and a documented maintenance plan with SEO-preserving migration methodology. Miss any of these and the site underperforms. Get all ten right and the website becomes your hardest working employee.

What accessibility compliance standards should a nonprofit website meet?

WCAG 2.1 AA is the floor for nonprofit websites. ADA Title III applies to most US-based nonprofits and effectively requires WCAG 2.1 AA as the practical standard. Some sectors layer additional standards on top — Section 508 if you receive federal funding, GDPR-aligned accessibility if you serve EU audiences, AODA if you operate in Ontario. But the universal answer is WCAG 2.1 AA. Build it in from day one rather than auditing for it at launch — retrofit accessibility typically costs three to five times what built-in accessibility costs. Run accessibility audits quarterly post-launch, because content drift breaks compliance faster than most organizations realize.

What's the most important page on a nonprofit website?

It depends on what the website is for. For most nonprofits, the homepage is the conversion hub — it's the single most-viewed page on the site, accounting for over 20% of all pageviews across organizations. For organizations running specific campaigns, the campaign landing page outperforms the homepage in any given quarter. For foundations doing donor-advised fund acquisition, the "become a fund holder" pathway page matters more than the homepage. The question to ask: what's the one action you want a first-time visitor to take? Then build the most important page to surface that action most directly.

Why isn't my nonprofit website converting donors?

The most common reasons, in order: (1) Too many CTAs above the fold competing for attention. (2) The mission is buried under organizational language; the visitor doesn't understand the problem the org solves within 5 seconds. (3) The donation page is a form, not a product — high abandon rates because the design wasn't built backward from conversion metrics. (4) Trust signals are missing — no named sources, no real people, no specific outcomes. (5) The site isn't accessible on mobile, where over half of nonprofit traffic now lives. Run through each in order; fixing the highest-leverage issue first usually unlocks single-digit to double-digit lifts within a month.

How do I make my nonprofit website discoverable by ChatGPT, Claude, and Perplexity?

Start with the structural basics: schema markup, semantic HTML, clear FAQ sections, descriptive page titles, and headings. Add a canonical /llm-info or /llms.txt file describing your organization in machine-readable form. Make sure the content is actually parseable — long opaque hero videos and image-based text don't get retrieved. Write content in question-and-answer patterns where it makes sense. Source any factual claim with a working link, because retrieval systems weigh content that cites primary sources more heavily.

What happens to my SEO during a redesign?

Migration is the highest-risk moment for a nonprofit's organic traffic. A redesign done without a documented SEO methodology can wipe out years of accumulated authority — sometimes 30% or more of organic traffic, sometimes permanently. The methodology that protects you: one-to-one URL mapping with 301 redirects for every legacy URL that ranks or has backlinks, schema markup preservation, sitemap resubmission to Google Search Console, internal-link auditing, content-parity checks, and Core Web Vitals monitoring for 90 days post-launch. Ask any agency before signing: what's your migration methodology? If they can't answer in concrete terms, walk away.

How much should a nonprofit invest in a website?

A productized small-org build (think Habitat) starts around $5,000. A custom build for a mid-sized nonprofit typically runs $25,000–$80,000+. Enterprise builds with complex integrations and procurement requirements run higher. The more useful question is the system budget — strategy + brand + build + integrations + content + accessibility + ongoing maintenance — not the build line item alone. A $10,000 build paired with $50,000 of supporting investment will outperform a $50,000 build paired with nothing.

Where to go from here

If you're scoping a redesign and want a structured way to score where you are against these ten elements, download the 10-element scorecard and walk through it with your team.

If you want to talk about what a holistic engagement could look like for your organization, Fifty and Fifty's Engagement OS service is the starting point.

The website is the most important tool in your fundraising stack. Treat it like one.

Have a project or idea?

We believe in the hard work people are doing to address the world's most pressing problems. Every day, our agency fights to turn visions of social change into concrete realities.

Let's Tell Your Story