We Are One Foundation operates out of Papua New Guinea, doing work that most of the world never sees — community programs, resource access initiatives, and social support systems built for people in underserved areas. Their mission is genuine and the impact is real. When they came to us, their website was an obstacle to both.
The site had been built years earlier on an aging CMS and hosted on shared infrastructure that buckled any time a social post went viral — which, for a nonprofit with a compelling story, happens more than you’d expect. The design was text-heavy, emotionally flat, and built for no particular audience. It tried to serve everyone and ended up serving no one well.
More practically: it wasn’t raising money. It wasn’t converting volunteers. And it wasn’t communicating what the Foundation actually did in any way that moved people.
Understanding the Audience Problem
Nonprofit web design is harder than it looks, because a nonprofit website has to do three very different jobs simultaneously.
Job 1: Convert donors. Donors need two things — emotional resonance (“this work matters”) and institutional credibility (“my money will be used well”). Get either one wrong and the give-now button stays unclicked.
Job 2: Onboard volunteers. Volunteers are self-selecting; they arrive with intent. The job is not to convince them, it’s to not lose them to friction. A form that doesn’t work on mobile, a process that’s unclear, a page that doesn’t load — all of these turn a willing person away.
Job 3: Serve beneficiaries and community. The people whose lives the Foundation touches need to find information quickly, in plain language, in a form that works on low-end Android devices on a 3G connection.
The old site served none of these jobs well. Every audience hit the same wall of dense text and unclear navigation.
What Wasn’t Working (in Detail)
Traffic spike vulnerability. When a volunteer shared an impact story on social media, the Foundation would see spikes of 300–500 concurrent visitors. The shared hosting plan couldn’t handle it. Pages would time out. Donors would hit error screens. The Foundation was essentially losing real-time momentum generated by organic advocacy.
Donation friction: 4 clicks. We mapped the path from homepage to completed donation. It was four clicks — homepage, “Donate” nav link, a redirect to a third-party page, a form. At each step, a meaningful percentage of donors dropped off. The third-party redirect, in particular, broke the trust signal that the homepage had been building.
No volunteer intake pipeline. The “Get Involved” page had a heading, a paragraph, and an email address. Someone who wanted to volunteer had to compose an email from scratch, wait days for a response, and then navigate an onboarding process that started over from zero every time. There was no form, no automatic acknowledgement, no indication of what kinds of help were needed or what to expect.
Mobile performance score: 38. PNG’s mobile infrastructure means visitors are frequently on older devices and slower connections. A PageSpeed score of 38 meant the site was borderline unusable for a significant portion of the Foundation’s target audience.
Language. The copy described the Foundation’s work in organizational language — mission statements, program names, structural descriptions. It did not tell stories. It did not show faces. It did not make the reader feel anything.
The Design Philosophy
We made a decision at the start of the engagement that shaped everything: this site would be anchored in specific, human stories rather than organizational language.
Generic nonprofit copy often sounds like this: “We are committed to empowering communities through sustainable, human-centered development initiatives.” It says nothing. It could be any organization. It gives the reader no reason to feel anything.
We worked with the Foundation team over two sessions to identify three specific stories — real people, real situations, real outcomes — that captured what the work meant in practice. These became the emotional through-line of the site. Donors and volunteers don’t give to missions. They give to people.
Visually, we developed a design language built on warmth and proximity. Candid photography rather than staged imagery. Real faces in real contexts rather than generic stock. Color palette drawn from earth and warmth — not the cold blues that dominate so much institutional design.
Structurally, the site is built around clear lanes. You arrive and within seconds you know where to go: Donate, Volunteer, or Learn More. The navigation never lets you forget those three options exist.
What We Built
Stack: Astro (statically generated) deployed to Cloudflare CDN with global edge distribution. No server to fail, no database to overwhelm. Traffic spikes of any size are handled without degradation.
Integrated donation flow: We connected the Foundation’s existing payment processor directly, eliminating the third-party redirect. The path from homepage to completed donation went from 4 clicks to 1 click and a form on the same domain. The trust signal is never broken.
Volunteer intake system: We built a structured intake form that collects the information the Foundation actually needs upfront — availability, skills, location, areas of interest — and sends an automatic acknowledgement with a clear timeline (“we’ll be in touch within 3 business days”). Volunteers no longer wonder if their message was received. The Foundation no longer starts onboarding conversations from scratch.
Impact section: Abstract claims don’t move people. We built a dedicated impact section with specific, translatable numbers: meals provided, families supported, school supplies distributed. Each metric links to a brief story. Donations translated into concrete outcomes.
Email capture and newsletter integration: We connected a simple email signup to the Foundation’s newsletter platform, building a sustainable way to stay in contact with supporters between campaigns. People who aren’t ready to donate now might be ready in three months.
Mobile-first, performance-obsessed build: Every component was tested on low-end Android devices at simulated 3G speeds. We targeted 90+ on PageSpeed for mobile — we shipped at 94.
A Decision That Mattered
Midway through the project, we faced a choice about the donate button’s placement.
The standard approach is a single “Donate” call to action in the navigation. The Foundation’s board initially wanted it there only — they were concerned that making it too prominent would feel pushy or commercialize the site.
We made the case for a persistent donate button in a floating bar that appears after the user scrolls past the hero. Here’s the argument we used: someone who scrolls is engaged. An engaged person who wants to give should never have to scroll back up. The floating bar is respectful — it doesn’t interrupt, it follows. It only appears for people who’ve already chosen to keep reading.
The board agreed to test it. The bar stayed.
The Results
| Metric | Before | After |
|---|---|---|
| PageSpeed (mobile) | 38 | 94 |
| PageSpeed (desktop) | 55 | 98 |
| Time to Interactive | 8.1s | 1.1s |
| Traffic spike handling | Timeouts at 300+ concurrent | No degradation at any load |
| Donation path length | 4 clicks + redirect | 1 click + same-domain form |
| Volunteer pipeline | Email address only | Full intake form + auto-acknowledgement |
“Our donors keep telling us the new site finally communicates what we actually do. We’ve heard ‘I finally understand what you’re all about’ more times in the last month than in the past year.”
— We Are One Foundation board
The Foundation now has infrastructure that can grow with them. When a campaign takes off on social media, the site doesn’t break. When someone arrives from a donor referral, they find a site that earns trust. When a potential volunteer decides to get involved, there’s a clear and welcoming path to take.
What This Took
- Discovery: 2 working sessions with the Foundation team; audience mapping; donor/volunteer journey analysis
- Design: Custom design system built from scratch; photography direction and curation; 3 feedback rounds
- Development: Astro + Cloudflare CDN; payment processor integration; intake form; newsletter signup; 6-week build
- Performance: 94 mobile, 98 desktop PageSpeed on launch day
- Post-launch: Staff training on content updates; Google Analytics setup; Search Console connected
Running a nonprofit or mission-driven organization? Your website is your strongest fundraising tool — or your weakest link. Let’s talk about making it work.
