Urban Futures Collective
We used a completely open-source tech stack to build a website for the Urban Futures Collective.
Introduction
Urban Futures Collective is an interdisciplinary research and action group working toward resilient, just, and sustainable cities. Their commitment to open-source practice isn't a preference — it's part of their identity. So when they came to us for a new website, the brief was clear: no proprietary tools, no lock-in, nothing they couldn't own outright when we were done.
The challenge
The collective wanted a site they could take full ownership of after the engagement. That shaped everything. The CMS had to be open-source. The content had to be rearrangeable by non-developers. And the design had to hold together no matter how the team chose to build pages — now, or two years from now without us in the room.
There was also a scrollytelling feature in the brief. But the bigger challenge was building a system flexible enough to be handed over.
Our Approach
- 01
Choosing the CMS
The obvious choice was Strapi — mature, well-documented, with a large community behind it. We looked at it seriously. But we made the case for Payload CMS instead. It's TypeScript-native, self-hosted, more performant, and built for the way modern teams work. Less legacy weight. The collective trusted us on it, and it proved to be the right call.
- 02
Designing for handover
Because the site needed to outlive our involvement, we designed with that endpoint in mind from the start. Every decision had to be legible to someone who wasn't there when we made it. The block library, the naming conventions, the editorial structure — all of it was built to be navigated by the team independently.
- 03
Building the block system
We worked through every type of content the team might ever want to publish — projects, publications, case studies, images, callouts, embeds. Every piece of content on the site is a block. The team can add, remove, and rearrange them freely, in any order, on any page. The design constraint was that no combination could break — every block had to hold together next to anything else.
- 04
Flexibility within the blocks
Each block was designed with built-in options — colour switching, toggling elements on or off — so the same block could serve different purposes across the site without introducing inconsistency. Fewer block types, more range within each one. A cleaner backend for a team managing their own site.
- 05
Scrollytelling
We built scroll-driven playback: frame-precise, tied to scroll position rather than a timer. New territory for us, worked through carefully. It landed exactly as they'd imagined it.
The block in action
earthwhile brought our values to life. As an agency rooted in shared values of creativity, pluralism, and open-source practice, they were the right fit for our collective. I would recommend them for anyone in public sector, civil society, or academia.