How View From Seat makes our curved TNEW seating plans even better

Last year we helped Bournemouth Pavilion improve their Tessitura TNEW seating plans by adding realistic curves – giving people a clearer idea of where they’ll be sitting. 

Even that relatively simple change had a remarkable effect. Previously, the Pavilion had seen big gaps left in certain areas of the auditorium. But now, because customers have a much clearer idea of the true location – and value! – of the seats they’re considering, sales are spread more evenly across the entire auditorium. 

(The Pavilion team were so happy with these results, they rolled out the same curved seating plan improvements to their sister venue, Fairfield Halls. Hooray!) 

But we knew there was room to make the experience even better. We wanted to help customers understand even more clearly what those little dots on a seating plan would actually mean for them, when they were in that room, in person. 

So, when the Pavilion team found a photographer to take a photo from every single seat, we leapt into action – bringing those photos into TNEW with a custom View From Seat feature. 

But before we began writing any code, we needed to give the new feature proper thought and consideration, and create a plan to ensure the end result was as robust, maintainable, efficient, and straightforward as possible.

View From Seat: key considerations

Keeping code to a minimum

Wherever we could, we wanted to use existing TNEW functionality. Not only to minimise the chance of any unexpected bugs or code conflicts, but also to keep our own code as lean as possible. (Because lean code is easier to maintain over time, and it helps keep the website running quickly day to day.) 

First, we spent a lot of time researching and digging into what TNEW already has in place. And we realised that much of the key scaffolding needed for our planned View From Seat feature was already there. Win! 

TNEW already shows you an overlay with extra information when you click on a seat. Better yet, that overlay includes unique identifiers about the specific seat you selected, which we knew our code could hook into. Win, win!

Keeping the process simple

Getting someone to go around every seat in the auditorium and take a decent photograph is a really time-consuming task! So we wanted to ensure the rest of the process was as speedy and efficient as humanly possible.

So we wrote a clear brief before any photos were taken. We also briefed the Pavilion team carefully on what we needed, specifically pointing them to the unique seat IDs in TNEW, and asking that each photo be saved with the corresponding ID in the filename. 

Sharing those very clear requirements ahead of time meant that, when the folder of photos arrived with us, every image was labelled correctly – first time. No confusion. No fuss. Perfect.

Keeping the photos safe

An important question to ask when you receive 1,200 photographs of the same stage: where the heck do you store them all?!

The Pavilion already have a highly flexible content management system but, for several reasons, this wouldn't be the optimum place to house hundreds of View From Seat photos. 

Reasons such as: 

1. Even with their nifty 'bulk upload' tool, adding that many photos would be time-consuming.
2. Someone could inadvertently delete or rename a file. (Even though CMS content is regularly backed up, it could take time to notice the error. Not worth the risk!)
3. From a technical perspective, hitting the CMS with every single View From Seat request is not what you'd want on a busy sales day!

Our neat solution was to run the photos through a bespoke automated script – then sidestep their CMS altogether.

The script stripped the files of their metadata, then optimised and resized them appropriately since the CMS would no longer be doing this.

We then uploaded the files directly to a dedicated storage service, so the photos will always be delivered efficiently, without bothering the rest of the website. (Plus, they're stored safely away from the CMS, where someone well-meaning might accidentally delete them while doing a spring-clean!)

Keeping the website snappy

No pun intended! But once we had all those snaps uploaded, we needed to make sure we weren't delivering any of them unnecessarily, as this could risk slowing it down.

So, keeping it lean, we used an out-of-the-box piece of code, available in any browser, to 'watch' the page and let us know when a seat information overlay loaded. No need for any bolt-on frameworks or libraries of code, which would weigh the page down.

We're also careful to only watch for overlays summoned by a click – not the ones that appear when you hover the cursor over a seat. That way we don’t load seat photos where someone simply hesitated over a specific seat on their way somewhere else.

Once an overlay starts loading, our lean code takes note of the unique seat ID, and almost instantly fetches the corresponding photograph, on demand. There’s no pre-loading of any images the user might never look at. And, because that photo is optimised ahead of time, on decent internet connections it finishes loading before the overlay does — making it look like it's always there. Smooth.

The result

So, the Pavilion now has another way to help customers easily and confidently select their perfect seats. Great!

All in all, the code we shipped is barely 100 lines – including all functionality and styling. Which is why the Pavilion’s TNEW still runs just as smoothly and efficiently as it always has.

How were we able to keep that final code so lean? Through careful initial planning, considered implementation and, by ensuring that throughout the project we kept a keen focus on crafting something that works beautifully for our client – and also for their customers.

For more information about Bournemouth Pavilion and to try the new feature, visit bournemouthpavilion.co.uk