Back to work
Case Study Web Design Development Film Production

MAD Production

A cinematic site for an independent film production house. Dark, deliberately slow, structured around the reality that commissioners watch reels first and read second.

madproduction.com
MAD Production website, desktop view

Role

Web Designer

UI Design · Development

Timeline

4 Weeks

Concept through delivery

Scope

Film studio website

Design · Build · Launch

Tools

Figma

HTML · CSS · JavaScript

The Challenge

MAD Production had 15+ years of award winning work across feature films, commercials, and documentaries, but their website wasn't telling that story. A generic template was underselling years of award winning work and failing to attract the decision-makers who commission major projects.

The Gap

Film production websites typically lean on reels and PDF portfolios. They show the work without building the institutional weight behind it. For a studio with that depth of work, a generic template was turning a world class body of work into just another services listing.

The Brief

Build a cinematic digital presence that leads with credentials, surfaces proof of scale immediately, and converts visitors into project inquiries through bold, high-contrast visual language that matches the productions themselves.

MAD Production website full view

Research & Discovery

Competitive Analysis

I reviewed four production house archetypes to map how film studios communicate credibility online and where most fail to convert the commissioning decision-makers who matter most.

Weta Workshop

World-class visual effects studio with strong IP and cultural cachet. But Weta's site functions more as a fan destination than a B2B pitch: it celebrates the work rather than converting the commissioning decision-maker.

The Mill

Premium VFX and production company with strong visual identity. The reel-forward site works for creatives but assumes the prospect already knows the brand. Cold traffic from brand marketers needs more context to convert.

Local Production Houses

Typical regional studios: a Vimeo embed, a services list, and contact details. Scale and credibility signals are absent. When price is the only stated variable, commoditization is inevitable.

Freelance Directors

Individual reel sites that showcase craft but can't communicate the institutional backing of a full house: production management, crew depth, equipment, delivery. For large commercial briefs, a single portfolio isn't enough.

Criteria Weta Workshop The Mill Local Houses MAD Production
Credentials above fold No No No Yes
B2B pitch clarity Weak Medium None Strong
Scale signaling Implied Implied None Explicit

Design

Cinematic in every frame

madproduction.com
MAD Production desktop
MAD Production mobile

Cinematic Dark Aesthetic

Near-black base with high-contrast red accents and film-grain textures, a visual language borrowed from the productions themselves. The site feels like an opening sequence, not a corporate page.

Four Service Pillars

Feature Films, Commercials, Documentaries, and Director Services, each with its own visual identity within the page. A clear taxonomy that helps commissioners instantly identify where they belong in the offer.

Featured Works Grid

A curated three-production showcase positioned immediately after the services, named projects with still frames that transform the credibility claim into visible proof before the visitor reaches the contact form.

Process

How it came together

01

Creative Direction

Defining a visual language rooted in cinema: dark, dramatic, and authoritative. The brief: the website must feel like the work, not describe it.

02

Visual Design

Jet black base, cinematic red accents, bold display typography. Hero with "CRAFTING VISUAL STORIES" headline, a declaration, not a tagline. Stats placed to land before doubt can form.

03

Content Structure

Hero → Credentials → Services → Featured Works → CTA. A sequence designed to establish authority first, then demonstrate range, then invite the project conversation.

04

Build & Launch

Full front end development, responsive across all devices, fast loading even with cinematic imagery, and built to scale as the productions portfolio grows.

Results

Impact

100+

Award-winning productions, now surfaced as the centrepiece credibility signal

4

Service verticals clearly defined: Feature Films, Commercials, Documentaries, Director Services

Delivered

Completed and delivered, mobile-first, built to convert visitors into project inquiries

MAD Production now has a website that communicates the scale of their work before a single project is clicked. The cinematic aesthetic positions them above generic production houses, and the structured service layout makes it easy for commissioners to see exactly where their project fits.

Next Project

Botanikos →

Web Design · UI/UX · E-Commerce