An image driven publishing website for a branding agency, engineered from wireframe to live product.

Problem

Studio Noel — a branding agency I’ve collaborated with for over 15 years — needed a completely original publishing website. The brief was clear: something clean, fast, flexible, and built for longevity — including their first experience with a headless CMS. I took full ownership of converting their visual designs and wireframes into a UI system, frontend engineering, and CMS architecture.

As a design agency specialising in accessibility I also built critical QA checks to ensure WCAG compliance from the beginning.

Visit Studio Noel Publishing.

Design System

I developed the accessible and responsive UI components from their designs, typography, spacing, colour, and component hierarchy, etc. Rather than inheriting the inconsistencies of what came before I built an original design system using Shadcn as the foundation, with a deliberate constraint: every design decision had to hold up at scale, across content types the team hadn’t defined yet.

The result is a smooth, well-aligned, and visually consistent website — something their clients have already been complimenting them about.

CMS architecture

This was the client’s first experience with a headless CMS, so the measure of success wasn’t just technical — it was whether a busy, details-focused team could feel confident using it day-to-day.

I designed a custom content hierarchy in Sanity tailored specifically to their publishing workflow. The studio gets in-built live visual preview while editing, image batch management to simplify media-heavy workflows, and a clear draft vs. published state throughout. Every editorial decision was made with the same question: does this feel effortless for someone who doesn’t think about CMS architecture?

The platform also integrates with their existing Mailchimp and Zapier workflows, preserving the operational processes already in place without requiring any changes to how the team works.

Engineering decisions

For key content pages — where the client frequently updates text and images — I chose ISR (Incremental Static Regeneration) combined with SWR for client-side revalidation. Pages are statically generated for better SEO and fast load times, but update automatically whenever new content is published in Sanity, with no full rebuild required.

Accessibility is enforced automatically on every pull request via a Playwright + Lighthouse CI/CD pipeline — not a manual checklist, but a continuous standard. The site is fully WCAG 2.2 AA compliant, including keyboard navigation, screen reader support, and focus management throughout.

• Next.js + TypeScript — frontend framework
• Shadcn + Tailwind — design system and styling
• Sanity — headless CMS with custom hierarchy and live visual editor
• Playwright + Lighthouse — automated accessibility testing in CI/CD
• Mailchimp + Zapier — third-party integrations and templates

Result

The site launched with a perfect 100/100 Lighthouse score across performance, accessibility, best practices, and SEO. The client has already received unsolicited praise from their own clients about the design and build quality — a signal that the visual investment landed where it needed to. The project has laid the groundwork for a broader relationship, with the main agency site to follow in the same stack. I continue to provide ongoing maintenance and support, keeping the platform stable as their publishing output grows.

“We’ve partnered with Luke on our publishing website and multiple client builds, and he’s been a consistently reliable and high-quality technical lead across all of them. He works quickly and efficiently, but never cuts corners. He approaches projects with a strong sense of ownership, from early scoping through to final delivery.

He brings a level of rigour that’s hard to find. Every project starts with clear thinking around architecture and structure, which means builds are stable, scalable, and don’t need reworking later. That thinking extends into how he approaches design systems and scalable UI, translating design into robust, reusable components that ensure consistency across the entire product, not just at launch but as it evolves.

What makes the biggest difference is how he integrates with the team. He doesn’t just execute a brief, he contributes, challenges, and helps shape better outcomes. That combination of speed, structure, and genuine care makes him a very safe pair of hands.”

— Michelle Noel, Founder & Strategy Director