For its 20th anniversary, Shanghai Grand Theatre decided to revamp its website to revitalize its digital assets and once more position itself as a landmark of arts in the years to come. The website’s ultimate goal was to boost ticket sales and ROI ratio for the institution. The pursuit of such objectives would necessarily imply crafting an enhanced user experience which would ease the ticket purchase and membership registration. Within such an agile framework, the theatre should be able to set up membership programs and fidelity rewards. The paths leading to the success of the projects entailed three objectives:
- Redefinition of the UX through a design both artsy and ROI-oriented
- Creation of an agile process for ticket purchase
- Roll out of a conversion-oriented membership enrollment
- Integration of Damai Ticketing back end platform through headless integration
1. ROI-driven UX
The first step to a successful website is a clear, goal-driven UX. Users must be able to find what they are looking for with a quick glance. For this reason, the project consisted of the restructuring the content of Shanghai Grand Theatre website in three main tabs:
- Events: list of all the events, it allows users to filter shows by different categories and dates, as well as to see the details, and book tickets
- News: the media news of the brand
- Enter the Grand Theatre: introduce Shanghai Grand Theatre with 4 sub-tabs, including About Us, Sponsorship Cooperation, Facilities, and Art Education
Shanghai Grand Theatre is a place of art, and when visiting its website, users should immediately grasp the feeling of richness in emotions and culture. The design is timeless and elegant, with red as the primary color, consistently with their visual identity, creating a professional artistic look. Every show stands out through high eye-catching pictures and a description. A slider on the homepage features outstanding events, serving as a recommendation source for users looking for an event to attend. In order to ease the purchasing process and improve the conversion rate of the website, each event also features a CTA leading to the ticket-sale section. Finally, the registration button is positioned in the top right spot to grant higher visibility. After signing up, members can benefit from exclusive offers and members-only discounts.
Shanghai Grand Theatre - Homepage
In addition, the whole website was also conceived with a strong focus on mobile to adapt to the Chinese mobile-first society.
Shanghai Grand Theatre - Mobile Version
2. Creation of an agile process for ticket purchase
The second objective was to facilitate the ticket purchase process to save users’ time and effort, which are two of the most sensitive factors affecting the user experience, in turn bringing a better ROI to Shanghai Grand Theatre.
The strategy consisted of creating a filter tool within the “Performance events” menu tab so that users can easily find the perfect show by setting some criteria and dates they are interested in.
Turning to the menu tab “Performance events”, users can easily filter for events based on different categories and date of performance.
Shanghai Grand Theatre - Event List
Once users have selected an event, an info box appears with the CTA “Purchase the ticket”. By clicking on it, users arrive at a new page to select available seats in a map, with different prices for each seat type. After each selection, a checkout box pops up and is updated accordingly with the details of the chosen seats and the total cost. Once users have confirmed the cost, the tickets are automatically added into their cart.
In addition, users can switch among different events via the drop-down menu while they are choosing seats, instead of jumping back to the event list page. This is a convenient experience for users to quickly find the show with available seats while staying on one page only.
Shanghai Grand Theatre - Event details
Shanghai Grand Theatre - Add to cart
Shanghai Grand Theatre - Final Checkout
3. Conversion-oriented membership enrollment
The final objective of the Shanghai Grand Theatre was to create a smooth experience that attracts users to register for membership. In order to do that, all content and CTAs are optimized, leading users to see the benefits of signing up, and become members eventually.
The CTA “Login / Register” stays at the top right of the navigation bar, to easily catch users’ attention. Clicking on the CTA will lead users to a separate page for membership registration, with detailed information of exclusive offers. The membership rules are set up in the back office to be highly scalable for future evolution and maintenance.
Shanghai Grand Theatre - Membership registration
After users have created an account, they can access their personal page of membership with all information of their benefits and current membership status, including:
- Their accumulated value, which encourages users to make more purchase or participate in more activities in order to upgrade to the next level and receive more benefits
- Information on their points that can be redeemed for cash
- All details on the membership’s benefits
Shanghai Grand Theatre - Personal Membership page
In addition, the website shows many branding contents and education events as add-on value for users, such as the map of the Theatre, the description of different rooms, and their art class information.
Shanghai Grand Theatre - Branding pages
As a content-oriented website, Shanghai Grand Theatre has all its information displayed seamlessly thanks to the powerful CMS which manages all the content upload and modification. The backend is powered by Drupal 8, one of the best content management system that can efficiently support websites with a large amount of content, while can be optimized for loading speed.
In terms of front-end development, ReactJS was chosen for all UX features implementation, and thanks to its high reusability, many components were scaled up for maximum reusability, instead of building features from scratch.
To enable the agile ticket purchasing process on Shanghai Grand Theatre website, we integrated the logic and data using the API provided by Damai ticketing system, including user authentication and all user data, event details and order flow. Damai is one of the most popular online ticketing platforms for concerts, theatre, sports events in China, owned by the tech giant Alibaba.
Nelson, the front-end lead of this project, shared his thoughts:
ReactJS is a great technology to boost productivity and facilitates further maintenance in the future. It ensures faster rendering, therefore efficiently displays all features and content pushed from the backend. Compared to the previous version, this new website is straightforward, providing users with a simple and easy way to browse information, with a much more functional search filter.
After the revamp, Shanghai Grand Theatre now has a new look, which is more appealing and suitable for a top-class venue for art and performance. Users coming to the site can easily find events and seats, with one-step checkout that saves them time and smoothens the experience. All the content about the events, the venue, and memberships are managed by a powerful backend, with easy modifications and display.
With its high competency and flexibility, the website is a great digital asset for Shanghai Grand Theatre to promote their membership and advertise their performance events, staying on the right track to keep up to their reputation of first-class art experience and art education.