Tessitura for developers — part 3, designing the select seats page
How to better develop arts & culture business by becoming friends with Tessitura — the key software used in the industry
The goal of this article
The goal of this article is to describe a way of designing the select seats page that provides a good user experience during the checkout process. The integration with the Tessitura API is not covered here — instead it will be discussed in the next article.
The select seats page
The user flow in the checkout process begins with a click on a particular performance on the calendar page. For more details on the calendar page please refer to the previous article: https://medium.com/@jkubisiowski/tessitura-for-developers-part-2-building-the-calendar-page-c6851d574833
Once the desired performance is chosen it’s time for seats selection. Here the select seats page comes into play. The select seats page is the part of the checkout process where the user can:
- define how many tickets are needed
- select the seats on the seat map
- choose the price types for every ticket
After all the listed actions are completed the user adds the selected items (tickets) to the shopping cart.
The seat map
The main element of the select seats page is the seat map. The data presented on the seat map can be divided into three categories: performance details, price zones and price types.
Performance details
In order to provide a friction free customer experience it is relevant that the user is clearly informed about all the useful performance details. They should unambiguously describe what, when and where is taking place. Make sure that this information is clearly visible on the select seats page:
- the performance title
- date and time of the chosen performance
- the venue where the performance is taking place
You can also consider providing additional information such as:
- how long the performance is
- is there a break in the middle of the show
- does the venue offer any facilities for the disabled
- explicit content warning
- epilepsy warning if the show contains any strong flashing lights
Price zones
Usually it is desired to categorize the seats in the given venue in terms of viewing experience they provide — the seats close to the stage should have a higher price than the ones located in the back. The price zones may come in handy here. The Tessitura administrator can configure the seat map so that every seat is assigned to a certain price zone. Every price zone has different set of prices available.
The information about the seats along with the price zones can be easily retrieved from the Tessitura API (more on this topic in the following article). Once we have the data we can present it as a seat map. Using this spacial representation is not only very intuitive (the user sees how far the seat is from the stage) but also gives a possibility to use colors and a legend to present the price zones. Please take a look at the graphic below to see how the venue is divided into five different price zones. The user can without difficulty compare the prices in different price zones and choose the correct trade-off between the seat rank and the money.
Price types
In most cultural organisations different groups of customers are eligible for buying tickets at different prices. Most common example would be children, students or elderly people using tickets different than normal price tickets. Let’s use Tessitura price types to let the users choose the correct version of the ticket.
Similar to the price zones, we retrieve the price types from the Tessitura API. The approach is very simple — once the desired seat is selected the user can choose the appropriate price types. Let’s look at the example below to see how the price types can be presented.
When all the price types are chosen the last step on the select seats page is to click the Add to cart button. This action creates a new cart associated with the current user session and redirects to the cart page.
Price zones & price types — the trick for proper presentation
You have probably noticed the price zones and the price types create something that we will call a price matrix — a two dimensional data structure where every combination of a price type and a price zone has a value (the price) assigned. Here comes a little issue — presenting a matrix in a usual form (let it be a table or a discrete 3D graph) wouldn’t really work on a e-commerce website.
Instead let’s present the two dimensions but not at the same time. Take a look at the seat map once again. It basically freezes the price type dimension at one value (in the example it is the normal price type) and presents all possibilities from the price zones dimension (price values are visible in the legend for all available price zones).
It was easy. Now the real trick is to invert the dimensions so the user can compare price values regards to both the price zones and the price types. One solution would be to present a little popup that appears when the seat is hovered. Here is the example
By introducing the seat popup we just froze the price zones dimension (the hovered seat belongs to exactly one price zone) but still present all possible values from the price types dimension. Having both dimensions presented in a proper way the user is now able to purposefully select the desired ticket for the performance.
By the way the seat popup is a nice place to present the stage photo from different perspectives. The user can see now literally see the difference between the seats among the price zones.
Summary
This article aimed to show how the select seats page can be designed in order to provide an easy and intuitive way of choosing the proper ticket for the performance. Especially the price zones and price types were described together with a presentation form that helps the user understand the underlying data model. The Tessitura API integration will be covered in the next article.
Thank your for reading Tessitura for developers — part 3. Please let me know in the comments which topic should I cover next. Also — don’t hesitate to write me an email, I promise I’ll answer all of them!(jakub.kubisiowski@gmail.com)
