Design challenge: improving theatre seat booking
Each month .net magazine ask three designers to create a website based on a fictional brief for their Design Challenge feature. cxpartners were invited to take part in May 2016 issue, and I volunteered. Here's the brief.
This month we’d like you to design a website for a theatre. This can be a huge theatre that showcases West End shows or a smaller, more independent venue that puts on local talent and grassroots acts (beginning, starting out, amateur). Users need to be able to see what's on quickly as well as book tickets easily.
“Houston, we have a problem...”
My journey on this design challenge started off with some comparative research. I played around with various theatre sites and tried to book tickets with them. I’ll share a couple of interesting observations.
The mystery of choosing seats
Let’s imagine you just purchased a ticket for a show you’ve been planning to see for a long time on a theatre’s website. Now, try to describe the seat you just paid for. What is the view like from the seat? How much room do you have around your legs? How convenient is it to use toilets from your seat? In fact, what do you know about the seat you just paid for?
This is what theatre websites usually provide — a seat reference on a seat plan which doesn’t answer any of the questions above. The references are abstract words and characters and the seat plan is filled with lines and shapes. There’s no sense of the real experience.
What is restricting the view and how bad is it? Can I still watch the show or will the restriction be literally in my face? If the restriction of my view was mild, I’d be happy to get a cheaper seat, but it’s unclear if it’s worth making this trade-off. The theatre tickets aren’t cheap so I’m reluctant to take the risk. By the way, what is Side Loggia? Does anyone know?
The price of a ticket is not just about the amount of space you borrow in the theatre. What you’re paying for, essentially, is the experience. That is why tickets come at different prices for the same show. But then there should be enough information available to help make that choice – any mystery about the chosen seat should be eliminated by the booking experience.
The laborious task
On some sites, I was asked to select my seats from a long list of seat numbers with an option to view the seat plan provided separately.
In the worst cases, the available tickets were listed in a dropdown. I had to play a guessing game. Firstly, I guessed some spots which might have a reasonable view at a reasonable price from the seat plan. Then I looked through the list of available seats to see if they were available. If not, I had to go back to the seat plan and repeat the process.
Some other sites used an interactive seat plan. Rather than showing the seat plan and available seats separately, they were merged into one. This was much better overall, but there was still room for improvement. Firstly, we’re confronted with too many options. The endless dots or blocks overwhelm our brains. The more carefully we look into the grid, the more indecisive we become. Secondly, choosing a seat on a seat plan is quite a fiddly job as the clickable area for each seat is small. On some cases, I couldn’t see whether the seat had been selected or not. The seat plans often came with a zoom feature which helped to complete the task, but zooming in and out itself required a lot of effort.
In a few cases, I didn’t have the option to choose a seat. All I could choose was the seat zone and the rest was done automatically.
Discovery and mini task model
After having decided to tackle seat selection, I started talking to people about their theatre experiences. Below is a mini task model I created. It summarises people’s ticket booking process in two different steps.
The first step is where people initiate high-level planning and research. Individuals have a different set of needs, and the priority of these needs decides the path of individual planning.
A more important need will affect the others during this process. I’ll explain with some examples. If you’re looking for tickets to a show you love, the venue options narrow down dramatically. All you need to decide is the date and time of the showing, and whether you’re taking friends.
If you’re planning a romantic evening with your ‘significant other’, you’ll consider the other person’s taste, availability and location to decide the show, date and venue. If it’s for your wedding anniversary, the specific date would be the must-have, so you’ll have to choose from what’s available. Meanwhile, other types of people will be checking out what’s on their local theatre, or others might be interested in open air theatre mostly for the experience.
This was a useful finding. I decided to design the site to be approachable for different audience groups who come to the website with different needs.
The second step is booking tickets. Once a user has a plan and rough definition in their preference, they’re ready to get on with this next step. The price of the ticket is an important attribute in many users’ decision processes, and people trade-off price against the other attributes. The interface needs to make changing these options simple, instead of having to start the process all over again.
Sketching & prototyping
I used paper prototypes and digital sketches to test out some hypotheses. One of the biggest challenges was the fact that people already had an established behavioural pattern of booking seats using a seat plan. When people were presented with a new way of booking seats instead of what they are used to, they showed discomfort and lack of trust. So I went back to drawing board and sketched out new ideas that optimised more familiar approaches. Then I repeated the design / testing process a few times until I found a solution that gave people peace of mind.
Concept
The Glass Theatre is a fictional theatre I created for this challenge. During the discovery, I found that the theatre as a venue plays a significant role as part of the experience. Theatre visits aren’t cheap, and people want to make the most out of their investment. So my client turned into a modern and trendy theatre, that was thoughtful about every step of their customers’ journey.
Homepage
The homepage serves the primary user needs which were identified from the discovery. It features the theatre itself as a venue, communicating its unique personality. This should appeal to users who have placed the venue high on their priority. Users can see current and upcoming shows immediately, and get straight into the booking journey on the homepage. The current show or featured show provides enough details for users to go straight to booking, especially if they knew about the show already. The calendar function serves users who are less flexible with dates (e.g. birthday or anniversary). When a user selects a single or multiple dates in the calendar, the relevant shows will display.
Booking page
The general issue with the current theatre websites is that they are not designed to allow people to refine their search. If I were to change the date to see if I can find the cheaper option, I’d have to go all the way back to the beginning and start over. Plus, they don’t help a user to feel confident about their decision. A user might want to try a different seat zone to see if that is better value for money. But it becomes hard work because the website doesn’t provide enough information for them to compare options.
Saving time and money
The booking page for The Glass Theatre is designed as a single page transaction. A user can try different times, dates, seats or seating zones to compare ticket options without wasting their time on page loading. This saves users' time and also helps them save money.
Smart booking: Proactive, personalised and contextual
As soon as a user selects a seating zone, the best available seats are suggested with an option to change them on the seat plan. And suggestions are optimised to the individual. A user with long legs might prefer seats next to the corridor. A user with young kids might prefer seats near the toilets. The personalisation will be based on the context of current booking, previous behavioral patterns, and preference setting. Once users have built some trust, the whole booking process will be completed in just a few clicks.
Added capability: remove seat selection mystery
The view from the seat is the most significant factor for most people to decide the value of a ticket. Therefore, when a seat is selected, it should be shown as the first thing. Getting this information upfront makes the ticket comparison faster. Any information that makes the experience more explicit should also be presented at this stage. Users can have a better understanding of what it might be like to see the show from there.
Simplicity
Most theatre sites confuse their users by displaying too many numbers on a screen. One of my goals was to declutter. Asking the number of people and the type (e.g. adult or student) in earlier stage grants simple price figure. People usually know who they’re going with, and it usually doesn't change.
While my design would still need more user testing and further iterations to get right, what’s clear to me is that existing theatre websites don’t anticipate how people make decisions. And while theatres may well be dependant on third party companies to provide their booking systems, they’re letting down customers.
By integrating these needs into their booking systems, theatres could dramatically improve engagement and fill more seats. Better performance would provide a solid platform to invest in improving the theatre visit experience.