Building a Responsive framework


Product design strategy, UX/UI design & interaction direction

Ticketmaster Pro is a branded e-commerce platform for sport clients across Europe. It provides an online season, ticketing and membership management platform for client’s fans. The flexibility of the platform means it can be used to support the ticketing needs of multiple sport clients sports such as Football, Cricket, Rugby, and Ice hockey. High profile sport clients include Manchester United, Arsenal, Rugby Football Union and IFK Goteburg.

The current platform is not responsive to mobile and tablet devices. With sport fans increasingly using mobile as their means to buy and manage their tickets, it has left them frustrated with a poor experience on their devices. As such, clients have requested this issue be resolved as soon as possible. To meet the expectations of the clients, the product team had a strict deadline to complete and deliver a new responsive framework to Ticketmaster Pro within 9 months.

Working in 2 week design sprints, we focussed on a particular section of the site to deliver to engineers for build, before moving onto the next section. The sprints were mapped out to fit our road map of 9 months. At the start of each sprint we reviewed the pages of a section to be responsive as a product team, highlighting any areas of concern or technical constraints that could come about. During the project, we would constantly give progress update to our key clients.

We used existing fan persona's and user journey maps to review and highlight key areas that we needed to improve on for the mobile experience. We whiteboard new flows, journeys and designs before diving into any wireframe and prototyping. Due to the time constraints, we could not test with fans for each section we designed. We utilised a mixture of guerrilla testing and usability testing for important pages to validated user interaction for mobile and tablet devices.

With a team of 4 product designers plus myself, we were paired in 2 with me as a sole designer working alongside the team. Each pair would take a section of the website to wireframe, prototype and finalise the visual designs.

On this project we had the opportunity to refresh the visual look and feel of the site. To do this we designed Pro with a consistent design language for our User interface and User Experience patterns. From the Typography to the Stepper UI, we have seamless integrated a visual pattern for each component on the site that works responsively across Mobile, Tablet and Desktop. This led to the evolution of the Ticketmaster Pro pattern library.

We used Sketch to design, Principle or Invision for prototyping and Zeplin to deliver designs to Engineering.

An important section of the site to make responsive was the Interactive Seat Map(ISM). This was a Flash animation of a stadium map that users could zoom in to select available seats for purchase. Since Flash technology cannot be used on mobile and tablet devices, a non-flash ISM had to be designed and built.

As a team we spent a lot of time prototyping and testing with users to make sure we get the interaction correct and purchasing the tickets as clear and seamless as possible. The final map was built in JavaScript framework.

We successfully completed the project within the 9 months. The responsive ecommerce platform was rolled out during a 1 month period. Clients were impressed, with the new ISM being the highlight and game changer for sport fans on the go.









Getting the e-commerce platform into a responsive framework was just the first step. As a product team we will continue to iterate and improve the experience for sport fans. After the launch, we contacted a selection of different sporting clubs to gather feedback and conduct usability testing to identify areas for improvement.