CASE STUDY

London Theatre Direct

Tickets without a drama

Role: Product UI/UX Designer
Timeline: February 2016 - Ongoing
Scope: E-commerce website, iOS Mobile app, Microsites, Email design, Presentations design
Client: London Theatre Direct ltd.

Single designer in a diverse team. Responsible for complete redesign of the e-commerce platform and its ongoing refactoring. Also launching new features, microsites and iOS app to support different lead generation channels.

I was present throughout the whole cycle of the product development starting from the concept generation, moving to UX exploration, creating final UI design and delivery to development team.

Responsive E-commerce Website

After 18 years LTD managed to create sustainable traffic of 0.7M users monthly (2018). However the original website lacked the adoption of new behavioral patterns for consuming information that changed over last decade, therefore complete redesign was needed.

Areas of improvement:

Designing new features and refactoring existing solutions
Defragmentation of information hierarchy and simplifying layout
UI optimizations focused on booking flow (perception of safety and reducing interactions within forms)
Collaboration with frontend developer to improve and maintain the speed of the development (changing with complexity of the project)

CONCEPT: SEATING PLAN - MOBILE

Providing solid booking experience on a mobile is becoming a standard. In 2016, the UK was the third-largest m-commerce market in the world. Selection of the seat to complete purchase on mobile can be frustrating if not done properly.

Imagine choosing seats for a couple from 2000+ seats considering price, view conditions, seating area and small viewport of your smartphone. Plus it has to conform with your preferred date options.

Price for the seat is always scaled based on the proximity towards the stage. Based on that fact I’ve build prototype presenting automatic movement of the price filter (and legend) based on the part of the seating plan viewed by user. Prototype was built in Framer with a bit of CoffeeScript hacking.
More Framer prototypes

Understanding users and customers

Feedback for the released products came mainly from the analysis of the purchase behaviour and querilla user testing
- paid agency to do market/customer research brought insides from the theatre industry in the UK
- theatre goers are rarely spontaneous
- tickets to top 20 musicals are still not affordable for general public and students (truth is that there are low price tickets available, however they are hidden as - opportunity for a new feature)

Areas of improvement:

Designing new features and refactoring existing solutions
Defragmentation of information hierarchy and simplifying layout
UI optimizations focused on booking flow (perception of safety and reducing interactions within forms)
Collaboration with frontend developer to improve and maintain the speed of the development (changing with complexity of the project)

CONCEPT: SEATING PLAN - MOBILE

Providing solid booking experience on a mobile is becoming a standard. In 2016, the UK was the third-largest m-commerce market in the world. Selection of the seat to complete purchase on mobile can be frustrating if not done properly.

Imagine choosing seats for a couple from 2000+ seats considering price, view conditions, seating area and small viewport of your smartphone. Plus it has to conform with your preferred date options.

Price for the seat is always scaled based on the proximity towards the stage. Based on that fact I’ve build prototype presenting automatic movement of the price filter (and legend) based on the part of the seating plan viewed by user. Prototype was built in Framer with a bit of CoffeeScript hacking.
More Framer prototypes

Understanding Product and Industry

Application of multiple perspectives on the problem is essential to avoid overthinking. Therefore I chose working together with the data analyst and find out the volume and distribution of product-variants sales.

Analysis of the Top selling shows

Finding the right event to please your partner or picky friend might be frustrating for a newbie. Those who bring clarity to the table win.

I've interviewed the inhouse theatre expert and enthusiast to understand various factors that play role in decision making.

Main idea was to understand production, the message/point that any show carries, impact on the visitor and source of recognition & popularity.

Together with the analysis of the remaining 20+ other events (from the all 50+ available) we created a buckets(perspectives) into which every theatre event can be put and mainly found.

MICROSITES

PROJECT: AMAZON PRIME DAY WITH LTD

PrimeDay is one of the most anticipated event in the UK e-commerce. Amazon chose LTD as a tickets booking provider. In order to underline the importance of this special occasion I’ve designed and created microsite that presents 12 Exclusive discounts for the top West End Musicals and Plays.

In order to speed up the frontend development I used Webflow app and created this microsite without the help of other developers.

iOS Mobile app

I was responsible to design native app experience with focus on convenient searching for the available show performances based on the preferred date.

We've invested significant amount of time to produce quick journey to find available tickets for particular within single screen.

Developer used technology third party technology React Native that utilize principles from desktop frontend programming and enables developers to release native apps.


Main benefit was speed of development & prototyping, but on the other side more restrictions for UI design as the library of supported components was limited.

Design System

Common problem that comes with growth of the digital platform is entropy - things start falling apart over time. Maintenance costs increase with higher complexity, and speed of production and prototyping decrease.

Therefore design system comprised of unified UI patterns in a form of pixels and code was essential to continue with product development in a healthy way.

This is kind of documentation helped us to establish common language for frontend and build a library of reusable components, which significantly reduced amount of code increased speed of page loading.

Curious how it looks live?

londontheatredirect.com

CONCEPT: SEATING PLAN - MOBILE

Providing solid booking experience on a mobile is becoming a standard. In 2016, the UK was the third-largest m-commerce market in the world. Selection of the seat to complete purchase on mobile can be frustrating if not done properly.

Imagine choosing seats for a couple from 2000+ seats considering price, view conditions, seating area and small viewport of your smartphone. Plus it has to conform with your preferred date options.

Price for the seat is always scaled based on the proximity towards the stage. Based on that fact I’ve build prototype presenting automatic movement of the price filter (and legend) based on the part of the seating plan viewed by user. Prototype was built in Framer with a bit of CoffeeScript hacking.
More Framer prototypes

LAST MINUTE TICKETS

Project was focused on creating the interaction concept for the page dedicated to present last minute tickets.

Status quo says that tickets for top selling musicals in West End are expensive. Truth is that they exist, but they are hard to find. Mainly because filtering algorithms are not that advanced to surface these options.

At any time there are 100+ shows available with performances 8 times a week that offer 200 - 2000 seats to choose from. This solution gives user realtime data about seat availability, which suppose to give user incentive to purchase in a short time.