Menu

Web Enterprise Application

Product Design, Ticketmaster

Web Enterprise Application

Co-Branding Application

Product Design: UX & UI

 

Ticketmasters main eCommerce platform allows brands and agencies to co-brand (or advertise) pages within its site. An important stream of auxiliary revenue for the International business.

Scenarios for co-branding the site include:

  • An event wanting to create a branded checkout experience that links from their own website.
  • Creating a custom ad campaign across the event discovery and checkout flow of Ticketmaster’s International sites.

Our team (of 3 designers) was challenged with reshaping the user experience of the application. The team consisted of UX Lead, UX Designer & UI Lead (myself) although roles (were and) are fluid as we collaborate as an end-to-end product design unit, offering areas of expertise as required. Our wider delivery team involved a Product Manager and 3 engineers.

 

Challenge

The current application was in excess of 10 years old and hugely relied upon users having strong HTML & CSS knowledge. The business objective came largely from a monetary fund to modernise old tooling platforms and a large call from users to improve this particular one.

Additionally, we knew very little about the users of the tool. We did know that often the implementation of a ‘branded experience’ (aka. co-brands) was visually poor, feeling broken, with unknowing administrators often contradicting best UX and conversion practices with lots of visual noise and incohesion.

Personas and Goals.

As advocates of Lean UX within the team we knew our first point of call was to understand who the users are, what they’re trying to achieve and what their current frustrations are.

We decided to interview an array of current users in different markets including Spain & Poland. Our UX Designer led this process and documented the findings, with an ultimate output of User Personas.

We learnt through this process that the current tool was simply too complex and totally reliant upon a skill level in CSS that our marketing and ad professionals were not trained in. We had to significantly simply the experience.

We also learnt that our users were familiar with tools such as squarespace, wordpress and various social media advertising platform tools. This helped guide our approach in terms of the level of simplicity we wanted to achieve, importantly, considering as an admin tool that whilst being intuitive users would be prepared to spend some time learning about the new tool and it’s interface.

Lastly, but importantly, we learnt our users always create cobrands during office working hours on their desktop devices. As a wider team this helped shape the decision to design & develop for desktop only for our MVP.

Key Design Decisions

We took many decisions (far too many to list here) in reshaping this product. Whilst all our design decisions were ultimately validated and/or tweaked through testing prototypes with our original user personas, we took some key decisions along the way based on our own ideas and inspiration from similar (other industry) applications.

Our most adventurous decision was the inclusion of a real-time preview pane. Users would be able to make style changes to their branded page and visualise the outcome. This offers a fundamental improvement on the current tools UX as users can see instant gratification of their actions as well as being able to immediately spot errors and inconsistencies.

The navigation of the applications options proved a brave yet successful decision. Having the conventional left hand menu on desktop is certainly a sound choice and users affinity with tools with wordpress meant they navigated the productivity app with ease.

Whilst the core function/ feature was the editing of ‘brands’ we knew we also needed: user login page (and account features), home screen to view and select brands and lastly, post-modification features such as Publish & Share (for others to review before publish.) These were defined in the initial sketching process.

Following our design team collaboration on sketches to create shared vision amongst ourself, my colleague developed wireframes and an invision prototype for the product so we could communicate that vision with our senior stakeholders in the project.

Interface Design

Following persona development, concepting and sketching; my primary area of expertise on the project was designing the final interface.

A business requirement of the UI Design was to develop a familiar (to other Ticketmaster applications) yet modern and accessible visual language for a new set of B2B/ B2C crossover applications. This product was the first we planned to redevelop in a wider portfolio.

As a huge fan of the great work names such as Brad Frost (Atomic Design) & Jina Bolton (Salesforce) have achieved in advocating Design Systems I knew this was the right approach for this product. The design had to be lightweight, highly modular and reusable. It would prove essential in future to allow the business to scale and modernise other legacy products with agility- by having a simple yet attractive and usable design component/ pattern library to work from.

We completed the UI stories in 2 weekly sprints starting with the home page and it’s micro-interactions followed by the (main) brand configuration tool.

I’ve included some of the key micro-interactions to create enhancements and interest through the application below:

Sample UI Patterns

This is a unique website which will require a more modern browser to work!

Please upgrade today!