Skip to main content

Responsive Theatre Booking Website

Founded in 1971, the Orange Tree Theatre is a 172 seat theatre in the heart of Richmond. They already had a website with ticket booking functionality, but felt it was time for an update that would attract a younger audience as well as chart over 40 years of theatre archives. They researched various open-source content management systems and decided that Drupal was most appropriate for their requirements.

Project Highlights

  • Mobile design and usability testing
    Responsive website improves the customer experience for booking theatre tickets on mobiles.
  • Drupal Commerce
    Integrated a secure e-ticketing booking system with Drupal.
  • User Centred Design
    Restructured the website information architecture and content strategy based on user research.

The Brief

Drupal was an ideal open-source content management system for the new site. This gave them full ownership of the site, and means that they are not locked into using one provider who typically owns the source code with many bespoke, closed CMS platforms.

As well as a destination for theatre-goers to book their tickets at Orange Tree Theatre, they wanted the new website to enable visitors to view upcoming shows and events and search through over 40 years of production archives. With a full programme of shows, the user interface needed to be simple for admin users as well as website visitors.

The main objectives of the project were:

  • Move from their bespoke system to the open-source Drupal CMS
  • Design a mobile-friendly online booking facility that fully integrated with their existing system
  • Create a more visually-compelling and accessibility-compliant website
  • Provide a better experience for all users, across all devices
  • Import data from over 40 years of production archives that users could browse easily.

We started by working with the staff team at Orange Tree Theatre to create admin personas as well as website visitor personas. With this toolkit of personas we were able to write user stories and find out the main aims of both admin and normal website users to ensure that all of the right functionality was included.

Looking at the analytics data is became clear that a large (and growing) number of people were using mobile devices to view the existing site and due to the load time, and the way in which the site was built, these users were having a less than ideal time when navigating the site.

Design

The content of the site was prioritised and reorganised so that the information that users wanted most was easily accessible in one click. With this streamlined content we were able to create a comprehensive sitemap and prototype wireframes so that the project team could see how the website would be designed and would work.

We created a fresh new theme using the theatre’s existing brand visuals and colour palette so that the new website was instantly recognisable but much more modern looking. Imagery forms a massive part of the theatre experience, so plenty of room was given to high quality photos of Orange Tree Theatre productions to showcase the diversity and quality of their theatre. Calls to action were made more prominent as well as social media links so that younger audiences could spread the word online.

Build

With our admin user stories firmly in place, we were able to design and build a custom dashboard that would make it simple for theatre staff to upload new shows and performances as well as news items and updates.

The theatre wanted to sell merchandise and memberships data from Spektrix but they’d been unable to do this on the existing site because of its limitations and outdated design. Our developers worked with the Spektrix API to create a more seamless integration and provide a better customer experience across all devices.Orange Tree Theatre used Spektrix as their ticketing service of choice on this site and relied solely on using iFrames to interact with the service. This severely limited how much control they had over the look and feel of the ticket booking system and the result was over-simplified ticket booking that did not deliver all of the functionality the theatre needed. We built a custom module to dynamically integrate and display performance and events instances into the site from their in-house booking system, allowing the website to check ticket stock levels in real-time and avoid over-booking.

Our last mission was to include archive data collected over approximately 40 years that The Orange Tree Theatre had saved in various spreadsheets. We imported data from the theatre production archives, re-formatted and dynamically tagged the different content types in order to link it all together to facilitate related searches (director, cast, writer, musician). There's now an extensive archive of past productions on the site, which includes all writer, director and cast information and can be easily and accurately searched using free text.

Optimise

The site was developed to be responsive so that in line with the size of the browser that was being used, it would automatically scale down and show content in a suitable and usable way. A big plus point for Orange Tree Theatre was that they were first company to successfully have a responsive website that was compatible with their booking software - which is used by many theatres - meaning they were ahead of the pack when it comes to digital!

The new What’s On calendar allows users to search for performances on a date of their choice as well as seeing the complete list in date order. Making search more user-friendly and quicker - they can see what’s happening in just one click - has resulted to more online bookings on desktop and mobile devices, cutting down on admin costs for the theatre.

Evolve

Curve continue to refine and add to the Orange Tree website with post-launch support. Detailed analytics tracking and custom reporting helps us identify weaknesses in the user journeys and improve these areas using an iterative, evidence-based approach.

The News section has proved invaluable for the theatre, not only in keeping visitors up to date but in consistently helping their SEO so that they rank more highly on search engines in what is a very crowded entertainment market.

Integrated newsletter sign-up on the website also allows the theatre to capture user data, adding details to their growing database and targeting users with information about performances they might be interested in. This functionality has seen an increase in return visits and more engagement with online users.