Teardown · A £40k charity site that broke on mobile

A public nonprofit site with the owner’s permission. What’s broken, why, and the £4,200 fix.

The brief

A UK charity ($2.4m annual budget, three programmes, ~1,200 monthly donors) commissioned a site rebuild in 2023 for £40,000. The deliverable was a fully custom design, Stripe + GoCardless donation flow, volunteer portal, content management for three staff editors. The site shipped in May 2024.

By Q4 2025 they had a problem: mobile donations were down 38% year-over-year while desktop was flat. The board was asking why. The board was looking at the wrong site.

The first scan

Lighthouse on mobile, fresh staging snapshot, no cache cleared: LCP 4.8s, INP 412ms, CLS 0.31, Performance 31. axe-core: 23 violations on the donation page alone. NVDA: the donation amount selector is wholly unusable.

This is, to be clear, a £40,000 rebuild. The vendor was a respected agency. The site looks great on a 27-inch monitor. None of the user research had been done on a phone.

Where the £40,000 went

The breakdown the buyer shared (with permission):

• £14,000 — Design: Figma files, design system, brand refresh.
• £12,000 — Site build: Custom theme, page builder, plugin integration.
• £8,000 — Donation flow: Stripe + GoCardless + Gift Aid declaration capture.
• £4,000 — Volunteer portal: Login-gated content, role-based access.
• £2,000 — Content migration: Moving copy from the old WordPress install.

No line item for performance budget. No line item for accessibility audit. No line item for mobile-specific QA. These were assumed; they were not delivered.

What actually broke the mobile flow

The donation amount selector

Six pre-set amounts as round buttons, 96×96px each, in a 3-column grid. On mobile, the buttons rendered at 48×48px (below WCAG 2.5.5 minimum) with 4px gaps. Three of them were below the fold on iPhone SE. Two of them required scrolling sideways. The “donate” button itself was 8px below the fold — invisible until scroll.

The render-blocking script tax

Eight render-blocking scripts in the head, including a 240KB analytics SDK, a 180KB chat widget, and a 90KB cookie banner library. LCP couldn’t render until they all parsed. On a mid-range Android phone, that’s 1.8 seconds of wait before the donation page paints.

The Gift Aid declaration friction

The Gift Aid form was a 14-field component on the same page as the donation amount. On mobile, completing it required scrolling through three full screen heights. 31% of mobile donors abandoned at that step (the previous site lost 12% at the equivalent step).

The £4,200 fix

Two-week sprint, fixed price, written deliverables.

Week one

• Replaced the page builder’s donation block with a hand-built component. Donation amount selector now uses 64×64px buttons in a 2-column grid above the fold. LCP impact: 0.6s improvement just from removing the page builder’s render-blocking CSS for that section.
• Moved render-blocking scripts to defer or removed entirely. Analytics moved to a self-hosted endpoint (60KB). Chat widget removed (the charity had never replied to a chat message). LCP impact: 1.4s improvement.
• Image pipeline: WebP/AVIF responsive srcset, eager-load only the hero, lazy-load the rest. LCP impact: 0.3s.

Week two

• Two-step donation flow: amount + Gift Aid as separate screens with a progress indicator. Mobile-specific layout. Conversion impact: 22% improvement in the first two weeks post-launch.
• Accessibility remediation: axe-core down to 0 violations on the donation page, manual NVDA pass on the full flow.
• Lighthouse CI workflow installed on the team’s GitHub so regressions get caught before they ship.

The post-launch numbers

One month after the sprint:

• Mobile LCP: 4.8s → 0.9s
• Mobile INP: 412ms → 94ms
• Mobile CLS: 0.31 → 0.02
• Mobile donation conversion: +44% vs the previous month
• Average donation amount: unchanged (the fix didn’t move the amount, it moved the completion rate)

The charity’s projected donation lift for 2026, extrapolating from one month: £18,000 — £24,000 in additional gift income. £4,200 sprint cost. The £40,000 rebuild’s mobile failure had been costing the charity £20,000 a year in lost donations. Nobody had measured it because the desktop site looked fine.

The general lesson

A £40,000 site that doesn’t have explicit line items for performance budget and accessibility evidence is a £40,000 site that gambled on those dimensions. Most agencies will not deliver them by default in 2024 — 2026 unless they’re in the SOW. Make sure they’re in the SOW.

The agency that built this site is competent at what they were asked to do. They weren’t asked to ship mobile-first. They didn’t. Don’t be surprised when you get what you bought.