Rebuilding ABandOfBrothers: from a charity website to a cinematic platform

When ABandOfBrothers came to us, their existing site did the job a lot of UK charity sites do: it explained the mission, listed the communities, asked for donations. But it didn't feel like the work. The brotherhood, the rites of passage, the men whose lives get rebuilt in those rooms, none of that came through the screen. The redesign was about closing that gap.

The look and feel

The old site leaned on the standard third-sector aesthetic: bright stock photography, soft palettes, a layout you've seen on a hundred other charity homepages. The new one is unapologetically editorial, closer to a long-form documentary microsite than a fundraising page.

• Dark cinematic theme with a warm amber accent (#E8922D) pulled from the brotherhood's fire-circle imagery.
• Space Grotesk for display, DM Sans for body. Confident, modern, never the default Inter/Poppins pairing.
• Scroll-driven storytelling powered by framer-motion. Sections reveal, parallax, and breathe instead of stacking flat.
• Photography first. Real men, real communities, given full-bleed space rather than cropped into card grids.
• A "river" narrative through the About and The Work pages: the journey a young man takes through the programme, rendered as a literal visual thread you scroll alongside.

The hierarchy is emotion first, clarity second, conversion third, and counter-intuitively, the conversion got better because the emotion finally had room to land.

What the site can actually do now

The bigger shift is functional. The old site was largely brochureware. The new one is a platform.

• A cloud backend running auth, a content CMS, donations, events, email, and storage, all on one stack, no external dashboards for the team to juggle.
• Full donations engine built on Stripe embedded checkout: one-off and monthly giving, Gift Aid declarations captured inline, donor portal for managing subscriptions, and an admin donations report.
• Pay It Forward flow, sponsor a place for a young man who can't afford one, with its own dedicated journey and packs.
• In-house CMS for news and articles, so the team publishes stories like Brotherhood & Belonging at Leathersellers' Hall without touching code. Articles support rich galleries, cover images, categories, and SEO metadata.
• Events system with calendar and list views, modal detail pages, and enquiry capture.
• Communities map, an interactive UK map of every active ABandOfBrothers community with contact routing.
• Podcast and media hub with featured episodes, archive, and an Instagram feed.
• Merch store integrated with Shopify, including a cart drawer and Pay It Forward bundles.
• Transactional email system, branded templates for donation thank-yous, Gift Aid confirmations, community enquiries, partnership enquiries, contact confirmations, donor portal links. Every touchpoint is on-brand.
• Safeguarding reporting modal and an urgent help button, surfaced site-wide.
• Brand partnerships, fundraising, referrals, and trustees pages, each with its own purpose-built layout rather than a recycled template.
• Admin area with role-based access (proper server-side role checks, no client-side shortcuts), article editor, and donations dashboard.
• SEO and performance baked in: per-page metadata, JSON-LD structured data, a generated sitemap, lazy-loaded imagery, and compressed assets across the board.

What we learned

The brief that kept paying off was "how do we make a charity website that tells compelling stories, drives people to get involved whilst building a credible and impactful experience." Every time a decision came down to convention vs. character, character won, and the platform underneath quietly got more capable so the team could keep telling stories without us in the room.

Live at abandofbrothers.org.uk.