Tessitura Frontend Integration with TNEW

Exhibitions and events are an integral part of the life of any cultural institution, as evidenced by how prominently they tend to be displayed on their websites. And of course, with any event or exhibition you tend to need a ticket, and so giving users a seamless process for obtaining one is of paramount importance.

And when it comes to ticketing there are many other aspects to consider as well, such as Performance Schedules, Seating, Memberships, Add-ons, Customer Relationships, Donations, the list goes on!

The systems required for managing all these are fairly complex, and building them from scratch and then maintaining them represents a significant overhead for even the largest museums and galleries. It is little wonder then that most organisations choose a third-party platform to handle this aspect of their business.

Over the past decade, Tessitura has emerged as one of the most popular choices used by performing arts and cultural organisations within the English speaking world, both for ticketing and as a CRM. And so it was the case for two of our clients: The Australian Museum and the National Gallery of Australia.

At the IC we specialise in crafting hairy integrations, and connecting up such a system to a client’s website is one of those challenges that we love. A big part of this work involves synching all relevant data from Tessitura into the website CMS for reuse, maintaining a single source of truth. But in this article we will be looking at another aspect of the work: how we approached integrating the frontend interactions of Tessitura and make the purchase flow as seamless as possible for the end user, particularly when it comes to buying a ticket.

The Situation

When it comes to implementing a purchase path using Tessitura there are two options available:

• Build a customised platform via the API
• Use Tessitura’s pre-built eCommerce platform TNEW

Creating something via the API provides complete control over the look, feel and functionality of the purchase flow. This allows for a frontend experience that aligns exactly with the organisation’s website and brand aesthetic. However, this means building from the ground up, which can be quite complex and time consuming.

Using TNEW on the other hand is much simpler and faster to implement since all of the grunt work is already done and the system is ready to go. The trade off is being limited in what can be customised and having an off-the-shelf design and user experience.

In our case, both the Australian Museum and the National Gallery of Australia chose to use TNEW. Both organisations had just started using Tessitura and wanted to see whether it delivered before investing more time and money into the system.

The Task

Our job was to unify the two separate systems: the main website and the TNEW eCommerce platform. The goal was to make the user experience as unified and seamless as possible while spending the least amount of time in terms of frontend development.

The initial temptation is to try and make TNEW look exactly like the design of the website. Since TNEW is based on the Bootstrap framework it has certain design opinions baked-in and trying to change them would mean constantly fighting against the foundations of the platform. The result would be something that might be 90% the same but then falls into a sort of “uncanny valley” where the imperfect resemblance becomes glaring and disrupts the user experience.

There is always the option of disabling the default TNEW stylesheet and starting from scratch. But we have no control over the markup which would still contain Bootstrap-specific classes. Trying to apply a visual design using classes that were intended for another design is messy at best.

We would also have to consider that if we completely strip out the existing styles and then fail to revisit a certain screen, view, or component, we run the risk of having a broken user interface. Going through the whole platform and making sure everything has been redesigned properly would be quite time-consuming.

In both cases we fail to satisfy the client brief, and so a different approach was needed.

The Approach

First off, we start with the premise that a website and its associated purchase flow don’t need to be exactly the same visually. In fact, making a clear distinction can even be beneficial.

When initiating a purchase, such as buying a ticket, the user embarks on an action-oriented experience, which by its very nature is different from browsing for content. We also want to keep the user focused on the task at hand without any distractions. Navigating away from a form mid-purchase could cause them to lose any data they have entered.

These days, many popular platforms and eCommerce sites have purchase flows that differ from their main websites, and so this is not unexpected behaviour. Making these two different contexts somewhat visually distinct makes sense.

With this in mind, we can start embracing TNEW’s framework and work within its constraints rather than fighting against it, and thus avoid the “uncanny valley”.

Instead, we want to focus on brand ownership as opposed to a pure interpretation of brand integrity. Our aim is to make TNEW look like it belongs to our clients’ websites and create a connection between the two.

Steps Taken

First off, we start with the TNEW platform as-is and leave the default stylesheet in place. This maintains the foundational underpinnings throughout the platform and avoids causing unintentional changes that break the design.

We then create our own custom stylesheet and link to it after the default TNEW stylesheet. We serve this at the bottom of the base template to ensure all our styles are applied on top of any styles that TNEW may inject inside the markup.

In our custom stylesheet we start by declaring the same variables (colour, spacing scale, fonts, type sizes, form element styles, etc) as in the main site. We then use these variables and apply the same CSS reset as in the main website, applying rudimentary styles to native HTML elements. The aim here is to give TNEW a light “undercoat” of the client’s brand.

Using the same colour, typeface and scale does make a difference, but things still have a bit of a “Bootstrappy” feel to it. In order to create a stronger connection, we need to use some of the key visual styles that help distinguish the client’s brand. Depending on the brand this can take many different forms.

In the case of the Australian Museum, a key distinguishing feature of its visual identity is the use of a weave pattern. By simply using this element inside TNEW in a similar way to the main website we are able to create a strong sense of brand ownership with minimal intervention.

In the case of NGA their brand was focused on a “Brutalist” aesthetic, with a monochrome colour palette, minimal decoration, thin keylines, as well as a custom designed icon suite. As a consequence, we focused on individual key components and sought to match the same minimal aesthetic, taking care to swap out all instances of TNEW’s icons with NGA specific ones.

We now want to create a bridge between the main website and TNEW, and our approach was to create a bespoke header and footer. Because these sit outside of the content generated by TNEW, we have complete control over the markup and styling. However, we definitely do not want to copy the exact same header and footer from the main website, lest we fall into the “uncanny valley”.

Rather, we want our custom header and footer to make a nod to the main website while at the same time blend in seamlessly with the contents of TNEW. We also want to avoid replicating the main website navigation inside the header in order to keep the user focused on the task at hand.

At this point, most of the work is done. All that is left is to go through the various login, registration and purchase screens and tweak the edge cases, whether they be certain components, layouts or screen views. You’d be surprised at how little there is to do!

The Results

As illustrated in the above image, using the same font, type scale and primary brand colour firmly align the two platforms. Use of the AM pattern creates a simple but effective connection with the organisational brand, establishing a strong level of ownership of the main website over the TNEW platform.

View Australian Museum TNEW Portal

As with AM, the same distinctive font, type scale and colour palette align with the main website. The custom header and footer make a clear nod to their equivalents on the main website, but are distinct enough to stand on their own and signal to the user that they have initiated a new course of action. And while Bootstrap may still be Bootstrap, it now has a “Brutalist” feel, just like the NGA brand aesthetic.

View National Gallery of Australia TNEW Portal

Conclusion

And there you have it! How to make TNEW look like it belongs to a distinctive brand without trying to reinvent the wheel. Just to recap:

• We didn’t touch any of Bootstrap’s settings or defaults
• We didn’t need to change any of TNEW’s markup (not that you can anyway!)
• The only HTML we added was for the custom header and footer inside the base template
• All styling changes done via CSS, mainly via a default reset and in other cases hooking into existing TNEW/Bootstrap classes for specific changes
• We can sleep easy that with a light but judicious touch we aren’t going to unexpectedly break things deep inside the labyrinth of TNEW and Bootstrap

Is your organisation looking to integrate Tessitura or TNEW into your website? Contact us and let's see what is possible.