A headless website for a creative agency that helps organisations communicate complexity clearly.
Overview
NOSY works with organisations tackling some of the world's most technical, systemic and vital challenges, and the site needed to do that work justice. It showcases case studies, services, insights and the team behind it all, with plenty of video to bring projects to life.
This is version three. The old Gatsby site served us well for the best part of four years, before I rebuilt it from the ground up on Next.js and Sanity.
My role
I'm the site's sole developer, from the architecture and content model through to the build, deployment and keeping it running. The design comes from the NOSY design team, and I work with them to turn it into components that hold up whatever editors put in them.
Key decision: blocks, not page templates
Rather than a fixed template for each type of page, editors build pages from a library of 30-odd content blocks in Sanity Studio: heroes, showcases, timelines, stats, quotes, video and more. Each block is built to look right with whatever content it's given, so the team can put together a new case study or landing page themselves and it stays on-brand.
Editors also get Visual Editing with live previews, so they can click any text on the page to edit it and see their changes as they type.
Outcome
- The team builds and publishes new pages and case studies themselves, without waiting on a developer.
- Editors see their changes on the real page as they type, so there are fewer publish, check and fix rounds.
- It's noticeably faster than the Gatsby site it replaced.
- Video goes through Mux, so editors upload once and it streams well on any device.
Build
Next.js (App Router), Sanity, Tailwind CSS and shadcn/ui, with Mux for video, Motion for animation, Resend for the contact form and c15t for cookie consent.
As you'd expect from a planet-conscious agency, every page also estimates its own carbon footprint (check the footer) using the Green Web Foundation's CO2.js. Every byte counts 🌱