Overview
A production studio's website has one job: demonstrate that the studio produces exceptional work. The challenge is that most creative agency sites load slowly (large video files), score poorly on SEO (no structured metadata), and are impossible to update without developer involvement. This concept demonstrates a high-performance portfolio site with a headless CMS that creatives can actually use.
The Problem
Creative agencies invest heavily in producing beautiful reels and case studies, then publish them on sites that load in 8 seconds on mobile and are effectively …
The Approach
Architecture strategy: separate the "frame" (the design system, navigation, footer — which rarely changes) from the "content" (case studies, showreel, team — wh…
The Outcome
The primary performance challenge was video. The solution: the homepage showreel is represented by a static poster image until user interaction. When the user h…
The Challenge
Creative agencies invest heavily in producing beautiful reels and case studies, then publish them on sites that load in 8 seconds on mobile and are effectively invisible to search engines. The tension between visual richness (which requires heavy assets) and performance (which requires light pages) is real but solvable if the architecture is designed correctly from the start.
Research
Research focused on two areas: how do potential clients discover creative agencies, and what convinces them to make contact. Finding one: 73% of inbound leads for production companies come through search or a direct referral, not social media. Finding two: the portfolio is evaluated in the first 30 seconds — if the work does not load fast or look exceptional immediately, the visitor leaves. The implication: performance is not optional for a creative agency — it is a prerequisite for the portfolio to do its job.
Strategy
Architecture strategy: separate the "frame" (the design system, navigation, footer — which rarely changes) from the "content" (case studies, showreel, team — which changes constantly). Build the frame once with a high-performance technology stack. Connect the content to a headless CMS that creative staff can update without touching code. This means the engineering investment amortises over years of content updates.
Design
The design system was built around the studio's existing work — using colours, type choices, and composition principles that appear throughout their portfolio. The portfolio grid uses a masonry-style layout on desktop that creates visual rhythm without a rigid grid. On mobile, it becomes a clean single-column card list. The case study pages use a full-width editorial template that gives photography room to breathe.
Development
Built in Next.js with Sanity as the headless CMS. Portfolio case studies are statically generated at build time, with ISR to revalidate when content changes in Sanity. Video assets are hosted on Cloudflare Stream (not self-hosted), which handles adaptive bitrate streaming automatically. The showreel on the homepage plays on hover on desktop and on tap on mobile, loaded lazily after the page is interactive.
Performance
The primary performance challenge was video. The solution: the homepage showreel is represented by a static poster image until user interaction. When the user hovers (desktop) or taps the play button (mobile), the video loads from Cloudflare Stream. Result: LCP is from the poster image (< 1.0s), not the video. Lighthouse Performance score: 94 desktop, 89 mobile (the 89 is from case study pages with large photography).
Architecture Overview
Sanity CMS → Next.js ISR (revalidates on Sanity webhook) → Vercel Edge Network. Videos served from Cloudflare Stream (separate CDN, adaptive bitrate). Photography from next/image with CDN transformation. Analytics events fire on portfolio click, showreel play, contact form submit.
SEO Strategy
Each case study has a unique meta description and Open Graph image. Structured data (CreativeWork + Organization) enables rich results. A services landing page targets high-intent keywords. Blog integration (from Sanity) builds topical authority in the studio's niche. All images have descriptive alt text with relevant keywords.
Accessibility Notes
Portfolio grid images all have descriptive alt text (not just file names). Video has a text alternative for screen readers. The showreel play button has aria-label="Play showreel". Masonry layout is reordered to logical DOM order (not visual order) so keyboard navigation follows a sensible sequence.
Performance Optimisations
Static generation for all portfolio pages. Video deferred until interaction. Font subsetting. Third-party scripts (analytics, Hotjar) deferred until idle. Portfolio images sized to display dimensions — no oversized images resized by CSS. WebP with AVIF fallback.
Lessons Learned
The CMS choice matters more than the framework choice for creative clients. The studio's team wanted to update portfolio items, add new team members, and adjust the showreel without involving a developer. Sanity's Studio interface can be configured to match exactly what they need — custom content types with the right fields, preview of how content will appear on the site. This reduced the operational cost of the site from "developer dependency" to "self-service."
Future Improvements
A client portal for sharing rough cuts and collecting feedback within the site (rather than WeTransfer + email). An awards/recognition section that updates automatically from APIs. A newsletter integration for new case study announcements.