Project Description


TM Pro is an established Ticketmaster white label product used for online ticket sales and management for a wide variety of sports and theatre clients. Some major clients include Manchester United, Arsenal, Tottenham, Aston Villa, West Ham United and Fulham FC.

Ticketmaster had identified the need to for a large update of TM Pro to accommodate the ever increasing amounts of mobile traffic to the product. I joined the Ticketmaster team on a 9 month project, with the specific aim of producing a responsive, mobile first design for the platform. 

The brief was to refactor the design with some limited scope for general UX and technical architecture improvements where necessary.

Building a responsive pattern library

Along side building the new responsive site itself, a big part of this project was to create a style guide and component pattern library for the product that would form the foundations and the basic building blocks of the new responsive design for TM Pro. I have created an alternative case study talking in more detail about the process of building a product pattern library.

Read more here

Objectives for the redesign:

  • Simplifying the visual language to be cleaner and uncluttered to enable users to digest information with minimum distractions.
  • Defining a responsive grid that is fluid and flexible to provide a consistent and accessible experience across many screens variations.
  • Defining typographic rules to create hierarchy, clarity and scan-ability of information.
  • Designing a consistent iconography style to help give more context to content.
  • Finding a tone of voice for labels and messages to be friendly and human while being clear and informative.
  • Establishing better defaults for components to help to reduce the amount of user inputs.
  • Using familiar UI elements to help with efficiency and familiarity with existing users.

Mapping User Journeys, Rapid Prototyping & User Testing 

Once the initial TM Pro Pattern Library was emerging we could move forward and start looking at mapping user journeys within the application and create simple page structures and templates.

Using modular components at this point allowed us to form basic page structures and wireframes quickly as well as aiding us to build rapid prototypes for user testing. We used a combination of quick guerrilla testing, and more formal usability testing, to gauge how new designs and user flows performed and to highlight areas requiring further optimisation as we tackled different sections of the site. 

Integration of a new Independent Seating Map

The Independent Seating Map (ISM) was a major feature of the legacy TM Pro platform, allowing users to select custom seating for an event via a venue map. In the legacy site this feature was powered by Flash and Actionscript and a major objective of this project was to integrate a newly engineered seating map developed in HTML and Javascript which allowed this functionality to the introduced on to mobile platforms.

Re-skinning for individual clients

Although the process of re-skinning was one of the final parts of the project, considering how the white label design would react when skinned for different client was always something we had to keep one eye on during the redesign process. The TM Pro platform is highly configurable which meant components and pages could react quite differently depending on how they are potentially set up and what custom content is be being used.

Below are some skinned examples of  TMPro.