Distrakt
+44 (0) 121 212 9737 / team@substrakt.com
© 2018 Substrakt Registered in England. Company no. 5916054

Curved seatmaps with TNEW & Shakespeare’s Globe

July 15, 2018

On April 24th 2018 (the day after Shakespeare’s birthday), The Globe went live with Tessitura and TNEW. The Globe is (famously) a very curved venue, we delivered a significant customisation to TNEW’s native seatmap to accurately represent the layout of this historic venue.

Most of the Tessitura projects we work on involve some use of TNEW and we are one of four agencies who were asked by Tessitura to create white label templates for TNEW v7.

The seatmap is one of the ‘heaviest lifts’, technically, in the purchase pathway. It has to make lots of real time data available in a fairly complex interface.

Plus, for many customers, it will be first time they get any sense of the physical space in which they’re going to experience whatever event they’re booking a ticket for. So the seatmap is important on a purely commercial basis but also on a less tangible but no less important customer experience front.

This is even more the case if you have an especially iconic and unusual auditorium, as the Globe do. The seatmap needs to do the job of communicating things like restricted view, which seats do/don’t have backs, where the aisles are, etc.

Creative constraints

One of the fixed elements in TNEW is the seatmap, because of the complexity of this part of the customer journey this is something that Tessitura have to create on a case-by-case basis. As a result the seatmap needs to be fairly standardised, or the process of producing them would quickly become prohibitively complex, and this means that all seat maps in TNEW are produced to conform to a grid, which means straight rows are the way things are done.

When we started work with Shakespeare’s Globe one of their priorities was to see how much we could manipulate the seatmap in TNEW. The Globe’s main auditorium is, as their name indicates, iconic, beautiful, and very very curved.

So we needed to work out 3 things:

  1. can we move each seat individually
  2. can we map each seat to its true position in the auditorium
  3. can we do this in a quick, repeatable way

Every seat on a TNEW seating plan has an individual data attribute. This means we can individually ‘address’ each seat with a CSS selector, that selector would then be responsible for moving that seat.

We successfully tested this by writing some CSS for a handful of seats (one row) and applying CSS transform translations in the X and Y axis to move the seat by as many pixels as required.

Zooming

As we know the seating plan can be zoomed in and out, we wanted to check that moving seats did not impact the zoom function.

Luckily, as the seat map zoom scales the entire container, all of our movements were also scaled linearly and the new positions didn’t cause the entire plan to disintegrate into nonsense.

Applet to help with the grunt work

Writing a CSS selector for every single seat in the auditorium would take…a long time (there are 100s of seats), so we needed to devise a way of determining the ultimate positions of every individual seat (and output the resultant code needed) in a much quicker way.

So we built a small javascript app which allowed us to select a seat and then use the mouse and keyboard keys to move the seat into position and write that position’s coordinates along with the accompanying CSS selector to a text file – we could then output all of that CSS and include it with our other TNEW template styling.

As well as significantly speeding up this process, this also meant that creating the ‘transformation’ CSS was a task that could now be completed by anyone in the team, without the need for them to know how to write a line of code.

Ahead of implementing TNEW V7 we knew we wanted the most accurate depiction of our unique spaces, to help users fully understand what and where they were booking. Curved seat maps were an essential requirement to deliver this, and we’re delighted with the results of Substrakt‘s pioneering work in making this possible in V7.

Jordan Ahmadzedah
Head of Digital – Shakespeare’s Globe

Dealing with Microsoft

Of course this worked beautifully for everything, apart from Internet Explorer and Edge (because, life), where the seatmap snapped back to its pre-curved, linear-ness.

To make Microsoft browsers honour the new seat positions we had to apply a ‘blank’ CSS transform to each seat in JavaScript before the seat marker SVG paths would ‘listen’ to the CSS transforms we’d written.

Mapping the Globe

To map each seat to its ‘true’ location within the auditorium we needed to have an accurate plan of the auditorium, fortunately the Globe could provide structural CAD plans of the main Globe space and we applied an image of the CAD drawing of each area of the house as a background image to the seat map container. This allowed us to see a map of where we wanted the seats be be, effectively ‘onion skinning‘ the real-life seating positions behind the TNEW seat rows.

The finished result

Substrakt have created a seating plan that mirrors our venue exactly. The results are extraordinary, giving a true reflection of our venue. Our patrons now have an exact image of the Globe and can make an informed decision when picking their seats. I’m thrilled with the end result as are our customers.

Justin Giles
Box Office Manager – Shakespeare’s Globe

If you want to talk to us about your Tessitura/TNEW web project then come and see us in the Sponsor Zone at TLCC or get in touch via team@substrakt.com

Ash Mann