Enhancing TNEW for Crystal Bridges Museum of American Art

Author: James Braithwaite

Background

TNEW is the third-party purchase path offered by Tessitura – a ticketing & CRM system used by many of our clients – including Crystal Bridges Museum of American Art.

Out of the box, the front-end of TNEW has basic, functional styling and layout applied (based on the Bootstrap framework). On top of this, we typically apply a HTML template with a header and footer, alongside CSS (styling) and javascript resources loaded into the template.

As we were designing and building Crystal Bridge’s new website – which involved applying their recently refreshed brand identity to the new website – we identified an obvious disconnect in the look and feel between the main website and their purchase path.

We discussed this with the team at Crystal Bridges, who agreed that there was an opportunity to bring much greater consistentcy and uniformity to the styling and to enhance the overall purchase path experience, and so they set aside a dedicated project budget for us to do just that.

Planning

We started by thinking  about how we could take the styling, the modification of layout, and the functionality of TNEW further than we ever had before.

Joel, our Technical Analyst, carefully went through the experience with a fine-toothed comb and created annotated wireframes of the current user journeys, alongside an idealised set of improvements, all annotated in Whimsical (the tool we use to sketch out wireframes and ideas).

1-masterplan

Joel’s masterplan

We identified four key areas for improvement:

  1. Enhanced Styling & Layout modifications
  2. Log in / Forgot password user experience
  3. Custom formatted messaging
  4. Custom cross-sell components

 

1. Enhanced Styling & Layout Modifications

2-og

The standard ‘out of the box’ TNEW styling

As the TNEW application itself dictates the HTML markup, we are somewhat limited with what CSS styling we are able to apply (relying on classes that already exist and a DOM that cannot be re-ordered). And although we can get ‘creative’ with flexbox ordering, or absolute positioning, these are not without their unwanted side effects.

So whilst we cannot radically alter the layout and order of elements on the page with CSS alone, we are still able to apply enhanced styling to certain elements – areas such as the login screens, the timed entry selection and the basket screens – by way of introducing common typography applications, shared colours, and use of graphic elements such as subtle-shadowed boxouts in order to separate concerns – all making the TNEW pathway feel like a polished extension of the main website. 

The styling work we applied had to work harder than usual, as their TNEW site is shared between both the main Crystal Bridges website, and their sister venue, The Momentary. We took influence from both colour schemes, included both venue logos and primary colours within the header, and adjusted any ‘continue shopping’ buttons to offer a link back to both sites.

3-login

The enhanced, restyled login screen

4-timed-entry2

The restyled timed-entry ticket selection screen

5-cart

The restyled cart screen

We also moved certain elements via javascript to neaten up some of the application-wide elements.

For example, we moved the basket countdown timer to within the header area, and the promo code form UI to the basket page, below the basket contents. The intent here was to streamline and simplify the interface, showing these elements only when necessary, and to locations users would more commonly expect.

2. Login / Forgot Password User Experience

3-login

We know that the logging-in experience can be a common source of frustration for users – whether that’s by mistyping their credentials or forgetting their login details.

As well as improving the styling of the login/register screen, the password reset messaging was adjusted to more user-friendly language – using the language of a ‘magic link’ that logs the user in automatically then allows them to reset their password. This messaging was editable in the backend TNEW application.

6-magic-link-1

The forgotten password interface with amended language

7-magic-link-2

We built a password show/hide toggle – something that is increasingly becoming a common interface pattern to help reassure users that the password they’ve inputted reflects what they believe they have typed.

9-passowrd-show

We injected a conditional call to action and messaging, prompting the user to continue to checkout if they had items in their cart before resetting their password – we recognised that if a user is resetting their password, then they are most likely in the process of purchasing something.

10-cart-msg

3. Custom formatted messaging

TNEW allows administrators to add messaging in various places along the user journey. We always advise that any messaging added to our sites is as succinct as possible – particularly so in transactional areas like purchase screens – so you don’t end up distracting the user from what they’re doing (i.e. checking out). 

Unfortunately, when this messaging is mandatory and verbose (such as legal requirements around COVID rules) the interface can quickly become sprawling, busy, and difficult to comprehend. 

While some basic styling can be applied within the TNEW editors (such as headings and text weights), there’s nothing that can segment this messaging and take the user through multiple, distinct pieces of messaging step-by-step, whilst also navigating the various pieces of user interface they need to make their selections.

11-before

One of the original ticket selection screens

We needed to find a way to improve the styling of the messaging, by adding thumbnail images or icons, and boxing out information to distinguish it from other elements.

We knew that we’d have to use some markup to achieve this, but wanted to make sure that whatever we built would be as simple and as user-friendly as possible for content editors to create and administrate within the TNEW screens.

To achieve this we came up with the idea of using a shortcode, modified with a handful of attributes, to allow for a flexible component that would serve multiple types of content-need. 

The shortcode format looked as follows:

12-shortcode

Our shortcode syntax

We documented this for the content editors at Crystal Bridges to refer to, and provided examples of how it could be used in different ways. Icon references can be taken from the Fontawesome icon library, allowing easy application of iconography alongside the messaging.

13-message

An example of an icon added alongside custom messaging

Alternatively, an image path could be used (taken from the main site’s media library). Our code then generated a small, cached thumbnail from the image path, keeping the page as performant as possible.

To turn the shortcode into actual markup within the pages, we built a javascript library that found the shortcodes within the content, wrapped them in the appropriate HTML, and swapped out the shortcode for the code that resembled the designed component.

As a result, content editors were able to apply smart, stylised content components without the need to understand and write complex markup.

4. Custom Cross-sell Components

Lastly, we built two bespoke interface components that were to be used as conditional cross-sells within the cart.

Whilst these were custom built and tailored to Crystal Bridges’ requirements and offering, the content displayed within the messaging of the cross-sell, and the choice of when and where to display these (using TNEW’s built-in pricing rules) gave Crystal Bridges a good level of control over the components.

The first was a membership cross-sell component, that gave users the  option to immediately add a membership to their cart, alongside their ticket, in one simple click.

Previously, this would only have been possible by adding a standard link within the content of the page, which would then have taken  the user back to a marketing-site page containing the membership purchase offer, before sending them back through the purchase journey again.

14-membership

The membership upsell component

The second component was a supplementary dining offer that allowed users to add-on picnic basket lunches and snacks to accompany their visit – something that was very welcome for patrons who wanted to be outside and remain socially distanced rather than visiting indoor restaurants and cafes. 

15-upsell

The dining offer component

Again, this was offered to the user within  the cart itself, rather than an interstitial step (as is often the case with up-sells and cross-sells), that can be frustrating for users who want to  quickly add things to their basket without needing to jump through an increased number of hoops. Specific food and drink options were then offered for selection in a modal window overlay, keeping the default messaging as streamlined as possible.

To make it a quick, simple ‘one-click’ process to add the membership and/or the supplementary food and beverage products to the basket automatically, we leveraged our TNEW SmartLinks product.

SmartLinks allow us to add additional items straight to the customer’s cart, without having to be redirected elsewhere – something TNEW doesn’t offer natively.

We pass the IDs of these cross-sells, along with any additional attributes to our SmartLink service, which makes use of the TNEW Shared Session API to programmatically add the items to the customer’s basket, before returning to a refreshed cart with the items in place.

Summary

Hopefully this has helped demonstrate some of the ways that we can work with your TNEW site to enhance the user experience throughout their ticket buying journey.

By making some of these small but effective customisations, you can maximise your ticket revenue and increase your upselling opportunities while delivering a seamless, and improved, user experience.

So if you’d like to hear more, have any questions or would like to see a demo, just get in touch! We’d love to have a chat about how we can help: team@substrakt.com