Leading design for the Roundhouse’s new website

Challenges

Complex booking journeys

The Roundhouse has a large offering, from gigs and events to workshops and room bookings, all of which is facilitated via their ticketing CRM Tessitura. The customer-facing side of this is managed by our product Skyway, which we customised extensively to ensure a frictionless and accessible user experience.

Solution

We found that previously, users were often unsure whether they had selected the correct tickets with many events having a mix of standing (i.e. unreserved) and seated tickets available.

We tweaked Skyway’s booking pathway to make it easier to select the intended ticket type by creating a step in the journey which explicitly asked users if they were looking for standing or seated tickets. This would reduce user error and shorten standing journeys in particular, as those users would be able to avoid the seat map entirely.

A fresh brand for the site & purchase path

Post-discovery, the Roundhouse decided to go ahead with a rebrand, which put the web project on hold for several months. Once the new brand had been developed, it was my task to apply and translate this to the designs, a major first application of the new brand and therefore an important milestone for the Roundhouse’s brand story as a whole.

Solution

Roundhouse’s new brand concept Ignite (developed by Studio Moross) is centred around energy and passion, and being a creative trailblazer. I translated this to the web by creating a dark site, allowing copy and imagery to illuminate the site and bring it to life. In line with the new brand’s bold aesthetic, page layouts are centred, with hero imagery blending into the background for an immersive and dynamic feel.

Writing a spec for efficient hand off

Within the company, previous projects had adopted a range of approaches to creating a functional spec, though none had stood the test of time.

For this project, I set myself the challenge of creating a spec which would be used across both design and development teams, acting as the source of truth for each component’s design, functionality, interaction and CMS-editability. After surveying developers to identify what information they would find useful in a spec, I rethought and refined our existing approach, ultimately taking the spec from an unstructured Google Doc to a highly organised and cross-linked Notion database.

Solution

I modelled the Notion database against the new site’s fundamental architecture, creating a separate view for components which would be editable via the CMS. This allowed our back end developers to have an easy reference not just to what the designs looked like, but also how various components and templates should be set up. I took the opportunity to determine new field descriptions for the CMS while also adding a rough character count guidance, which would make the CMS more user friendly and require less training for the client’s staff.

The population and maintenance of the Notion spec was a cross-team effort, and I worked very closely with our back end and front end team to ensure everyone would be comfortable to take ownership and ensure everything stayed up to date throughout the project. The approach was well received and is now a firm part of our internal working.