Making TNEW more configurable for the Science Museum Group
We were commissioned by the Science Museum Group to support their recent upgrade to TNEW v7.
The Science Museum Group (SMG) is the world’s leading group of science museums, comprising five museums; the Science Museum in London, the National Science and Media Museum in Bradford, the Science and Industry Museum in Manchester, the National Railway Museum in York, and Locomotion in Shildon.
As you can probably imagine, across a group of five big, popular museums (the Group receives over 5.5 million visitors every year), there is a huge diversity in the types of events and with this a variety of pricing options including whether or not customers wish to donate, purchase day tickets, annual passes, with or without an art pass.
With such a comprehensive offering, there was a need to provide an easy way to manage and interact with this, both for customers and staff members at SMG. The complexity of the product offering requires a level of configurability that does not exist natively in TNEW. It requires the ability to manage ticketing ratios, maximum ticket quantities, dynamic discounting and on-page messaging.
Our focus on this project was on extending TNEW’s native functionality so that the SMG team could manage these different eventualities appropriately, and communicate the offer clearly, without having to bang square pegs into round holes.
So the main aims of the project were clear; improve the general user experience, and deliver much more flexibility for the SMG TNEW administrators.
“We are delighted with our upgraded TNEW purchase pathways and the brilliant work that Substrakt have done to really streamline the user journey for our visitors. It’s fantastic that Substrakt share our approach of creatively leveraging technology to make booking tickets, making donations and building a relationship with us as clear and intuitive as it can be.”
CRM Manager, Science Museum Group
We needed a way for the TNEW administrators to be able to specify configuration options through the content management interface in TNEW.
We used JSON objects to configure the layout and pricing rules within the tables. Not only is this an intuitive and lightweight way to communicate data, but it also possesses specific rules around its structure and syntax. This meant we were able to pass these JSON objects through a validator, which prevents the likelihood of introducing errors into the pricing rules and leading to a more robust system with both safeguards and fallback options.
Setting ticketing ratios
As some events are more suitable for adults, and some events were more suitable for families, we collected a number of use cases to guide the development of this functionality.
- Some events required a minimum of one adult and one child ticket to be purchased.
- Some events required a minimum group booking of 10 people, with a ratio of one adult for every 8 children.
- Some events required a maximum number of child tickets that could be purchased with each adult ticket.
The options that we enabled allows SMG administrators to set the ratio restrictions, and minimums and maximums for each price type.
Additionally there is also the functionality to apply a maximum or minimum number of tickets that have to be purchased in relation to another ticket type.
These rules around ratios can be applied both positively and negatively. For example, in some events a customer must have at least X amount of tickets for each Y ticket in a single booking. Alternatively, for other events, customers cannot have more than Y amount of tickets for each Z amount of tickets.
If the ratio isn’t met then a helpful message appears letting the user know why the conditions haven’t been met, and prompts them to add/remove the required tickets before being able to proceed with the transaction.
The Art Pass entitles customers to a discount, we enabled functionality that allowed the user to specify if they had an Art Pass. Once this was triggered it automatically updated all of the pricing to take account of the Art Pass discount.
Due the the different pricing offers available, additional, and conditional content is sometimes required to communicate these to customers. For example there is a family discount available on Wonderlab tickets if certain combinations of tickets are chosen.
The functionality we have implemented provides SMG administrators the ability to specify where this content appeared, and what it said.
We’ve written before about utilising TNEW templates to make significant changes to how information is presented to the user (our work on the Globe seating map is an example of this).
Across the Science Museum Group there are a large number of exhibitions with timed entry. Without any styling this is quite an overwhelming amount of information being presented to the user. This is also true of the number of different price types. We tidied this quite significantly, taming the list of entry time options and reformatting the price types so that they were easier to scan and understand.
TNEW in its ‘white-label’ state showing a timed entry view for Wonderlab
TNEW in its ‘white-label’ state displaying the list of available price types
TNEW’s timed entry view styled via the template we created
Our template reorganises the available price types into a much more legible and scannable matrix layout
We carried out similar work on the account registration page, rearranging the page so that it made sense and renaming many of the communication preference options so that they were ‘human readable’ and made sense to the user (rather than automatically outputting the database-level content).
TNEW’s unstyled account page
TNEW’s unstyled account page displaying the available communication preference options
TNEW’s account page styled
TNEW’s communication preferences styled
TNEW already comes with robust accessibility support. Therefore there was a risk that manipulating too much of the on-page data could have negative accessibility implications. To mitigate this, we utilised the native TNEW markup as much as possible which allowed the native functionality of the fields, inputs, dropdowns, and checkboxes to be carried over and used within different layouts.
This means that markup is consistent throughout the purchase pathway, and keyboard users or those using screen readers would be able to navigate with more ease.
As the Science Museum Group operates across several venues, there was a requirement to attain a visual and UX consistency across the group, while also being mindful of the individual requirements of the event offerings of each of the venues.
To achieve this, we developed a build system that utilised nunjucks as a templating engine. This allowed us to create multiple templates for each of the venues simultaneously from a single codebase. We also used nunjucks variables to pass in venue-specific branding, page titles, favicons, and classes. This enabled us to customise the purchase pathway for each of the venues, while also retaining the uniformity of the Science Museum Group visual design system.
If you have read this far, you will see that this project was multi-faceted. With a wealth of ticket, pricing information and business rules to cater for, we have worked to accommodate numerous logistical and design considerations. In order to provide a clear, flexible and intuitive experience both for customers of the Science Museum Group we have focussed on configuration, accessibility and enabling user-feedback and messaging through injecting content. We feel this project showcases the level of flexibility that can be achieved working with TNEW via the hosted template.
We love creating beautiful and usable experiences, that can be easily managed. If you would like to talk about your website needs get in touch: firstname.lastname@example.org