Punchdrunk

Re-invigorating the digital online presence to reflect their ambitious creative vision and output.

Overview

 

Punchdrunk is a theatre company that has developed a worldwide reputation for pioneering a groundbreaking form of theatre where audiences explore epic sensory worlds. They needed a complete re-fresh of their current websites to match their creative vision.

 

My Role.

I was part of the pitch team and responsible for the research, information architecture, wireframes, design and prototyping of the websites. I lead the design producing all major deliverables and presenting these to the client.

The Outcome.

A strong and unique digital presence that re-enforces the existing brand whilst simplifying users journeys to discover, learn, engage and support the celebrated, beautifully designed and richly detailed experiences that Punchdrunk produce.

 

The Challenge.

Formed in 2000, by Artistic Director Felix Barrett, Punchdrunk has pioneered a form of "immersive" theatre in which audiences are free to choose what to watch and where to go.

Punchdrunk’s existing digital presence had become outdated and bloated with content. The challenge was to streamline the huge amount of content whilst simplifying the online experience and create a new visual identity that clearly distinguished the charitable and commercial arms from each other whilst maintaining a strong consistent brand across both.

Key goals were to easily allow users to discover and learn about Punchdrunk in a visually and engaging way, whilst simplifying user pathways to make it easier for users to support and take part in workshops and events.

The Approach

 

1 — Research

Along with industry market research, competitive analysis was also undertaken to understand strengths, weakness, similarities and differences between competitors. Existing site data was analysed to determine where the current site succeeded or failed, before identifying key audiences, their motivations and goals.

2 — Information Architecture

With the data in hand the next step was to translate the findings into sitemaps and user flows that address user behaviours and motivations for a content strategy to define wireframes, then refining through prototyping and user testing.

wireframe_single1.png
 
 
wireframe_single2.png

3 — Brand Design

One of the core challenges of the design was to evolve the brand in a way that would allow a clear distinction between the charity site and the commercial site, whilst maintaining a common visual language between both. Whilst many approaches were explored, ultimately the solution was a subtle change in colour palette between both sites.

Whilst the existing site had relied on heavy copy, the new design style made more use of the companies large catalogue of photography to reflect a sense of atmosphere found in the productions.

 

4 — Modular Design

To maintain a visual consistency, a modular design system allows every page across the site to be created from an adjustable set of content modules.

 
navigation3.png
 

5 — Navigation

Along with a simplification of the site structure, a combination of content filters and category pages were implemented.

This made it easier to browse the large volume of projects, workshops and events the company produces

6 — Mobile Devices

The new design system extends across digital devices to work as well on mobile devices as on desktop.

mobile2.png

7 — Support Pages

Modular, sequenced modals were integrated into the design system. These allowed instant pathways to important user actions that could be introduced anywhere on the site. These were then implemented to provide more efficient ways to support projects through the key holder membership scheme and signup of the newsletter.

flow2.png
Next
Next

Top of the Shard