At a glance

• Client: Every Shelter, a humanitarian nonprofit helping refugees build durable homes in East Africa

• Via: AlwaysCreative (design agency), with Levi Huddleston leading the account and Roby Fitzhenry on founder/CCO duties

• Design: Desktop direction by AlwaysCreative; everything else (responsive, motion, CMS, integrations) by me

• Stack: Figma, Framer, with Claude for a couple of the trickier scripts

• Live: everyshelter.org

The challenge

AlwaysCreative handed me a finished desktop design and a nonprofit that needed more than a brochure site. Every Shelter raises money and tells field stories, so the site had to do three jobs at once: move people toward donating, keep a steady stream of stories and project updates flowing, and stay light enough that the Every Shelter team could run it themselves after launch. The agency owns the client relationship, so whatever I built had to be handed back clean enough that a non-developer could keep it alive.

That last constraint shaped everything. It's not as simple as building a good-looking site and walking away. A nonprofit's content doesn't stop when the build does. New stories, new projects, new team members. If updating any of that meant emailing the agency or opening Framer's canvas, the site would go stale inside a month. So the real brief was a site that looked agency-grade on launch day and still looked maintained a year later, run entirely by people who don't write code.

The build

The scope I owned, end to end:

• 8+ pages in Framer, fully responsive across desktop, tablet, and mobile

• Two CMS collections, News & Stories and Our Work, each with an index page, a detail template, and tag-based filtering (CMS being Framer's content system, the part the client edits without me)

• Two categorical CMS collections for filtering

• Two other CMS collections (Team members, Docuseries) for easy client-side updates

• 45 legacy blog posts migrated from WordPress via a single CSV import, so nothing from the old site was lost

• FundraiseUp donation embeds wired in sitewide (FundraiseUp is the third-party tool that runs the actual donation flow), with an improved trigger script I vibe coded through Claude so the donate prompt fires the way Every Shelter wanted

• A custom code component to fix a third-party newsletter form that Framer's stock Embed component kept breaking

The newsletter fix is the kind of thing that doesn't show up in a screenshot but eats a day if you let it. Framer's Embed component mangled the form's markup, so signups silently failed. Rather than swap the provider, I wrote a small code component to drop the form in untouched. Signups worked, and the client never had to change tools.

The motion decision: choreographed on desktop, stripped back on mobile

The desktop design leaned on scroll-tied animation. A sticky section near the top holds in place while the content animates as you scroll through it, so the page reveals itself at the pace of the scroll instead of all at once. On a large screen it gives the story room to land.

On mobile it dragged. Tying animation to scroll on a phone fights the way people actually move through a page with a thumb, and the sticky section made the whole thing feel heavy. Initially I tried to carry the desktop choreography straight down to mobile. It didn't hold up. So I stopped forcing it and proposed a simpler mobile flow: no sticky elements, a normal image-text-image-text scroll, and each image animating once as it enters the viewport. The motion stays, the friction goes.

Levi greenlit the simplified version for launch, and we logged scroll-tied mobile animation as a future improvement rather than a launch blocker. That call is what kept the timeline. The analytics back the split too: over the first 90 days, roughly 72% of visitors came in on desktop (1.8K against 705 on mobile), so the choreographed desktop experience serves the majority while the simplified flow still gives the mobile quarter a clean read.

Launch and handover

Prototype delivered nine days after kickoff. The site launched on schedule six weeks in. The part I'm most pleased with isn't the launch, it's what happened after: the Every Shelter team took full ownership of their CMS on day one, with no handholding. Adding a story or a project is the same motion as filling out a form. No canvas, no code, no agency ticket.

Results

First 90 days after launch (Mar 11 – Jun 9):

• 2.5K unique visitors and 5.8K pageviews, on a 3m36s average session (long for a nonprofit site, people are reading the stories, not bouncing)

• Search did the heavy lifting on discovery: 540 referrals from Google, the largest single source, so the site is getting found on its own

• /get-involved was the second-most-visited page (370 views), behind only the homepage, which is exactly the page you want pulling traffic on a fundraising site

• Audience reached the field it serves: after the US (1.6K), Uganda drew 106 visitors, alongside China, Russia, and the UK

What changed

This was the project that made "build it so they can run it" my default for any content-heavy site, nonprofit or not. The CMS architecture and the clean handover matter more to a client's long-term experience than any single animation does. The motion is what gets the nod in the room. The handover is what they thank you for six months later. I now scope both from the first call.

"It has been a real joy working with you Hannes. Great work."

— Levi Huddleston, Partner, AlwaysCreative