Archive homepage hero: a performer holding a red parasol, tinted purple, under the words Welcome to the Pan-Asian Theatre Archives

Case study

Media Website for a Theatre Archive

An interdisciplinary theatre company with two decades of plays, films, education programs, and events, and an archive stuck on an incomplete Squarespace site.

I built them a new site from the ground up: planning where everything would live, sketching and wireframing each page type, then designing and coding it.

The company’s name, logo, and photos have been changed for this case study.

Client
Theatre company (name changed)
Deliverable
Archive website
Role
Strategy, wireframes, design & development

01 — Challenge

Two decades of work with nowhere to live

Stage productions, video plays, animated shorts, documentaries, awards, events and press had piled up over twenty years, on a site that was never finished. Visitors needed to find work by the kind of work it was, and the company needed a site it could keep adding to.

02 — Strategy

Seven collections, two templates

I mapped every collection before drawing a page. Productions, video plays, shorts and documentaries all carry the same information (who made it, who was in it, what it looked like), so they share one production template. Awards, events and press are stories, so they share an article template.

Then I sketched each page type on paper and wireframed the templates.

Homepage → 9 category tiles → 7 collections, sharing two templates:

Production page template

Mainstage Productions · Video Plays · Animated Shorts · Documentaries

Article page template

Awards · Special Events · News & Press

Site structure
Hand-drawn wireframe sketches of five page layouts
Paper sketches
Grayscale wireframe of a production page with about, cast, production team and related media sections
Production page wireframe
Grayscale wireframe of a video play page with the video above the credits
Video play wireframe

03 — Design & build

A dark stage for the work

The site is dark like a theatre, so the photos carry the colour. Each archive category gets its own tint, which turns the homepage grid into a map of the collection.

Archive category grid and Mainstage Productions page laid out on a purple background next to a pen
Full-length homepage: welcome hero, mission statement, a grid of tinted archive categories, and the footer
Homepage
Archives grid of tinted category tiles
Archive categories
Mainstage Productions listing page with three production cards
Mainstage productions
News & Press listing page with dated article cards
News & press

04 — Outcome

One template, every kind of production

A new production only needs its credits and photos; the template does the rest. The same structure carries a full stage production and a two-line animated short.

The Salt Merchant’s Daughters production page: hero, about, cast, production team and press
Stage production: The Salt Merchant’s Daughters
Paper Boats animated short page: hero, about and production team
Animated short: Paper Boats

Have a project like this?

Let's talk about who you're trying to reach and what you need them to understand. Send me an email at hello@piyawillwerth.com.