Product Design Manager, Lead Product Designer
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 Surrey Cricket Club.
There was no design consistency within the Pro ecommerce product. There was no centralised place where a designer or engineer could go to view all the components on the live site. Alarmingly, there were also differences between what the design team had in their design files to what was built live by the engineers. There was no source of truth between design and engineering.
With the move to a responsive platform underway, we had an opportunity to audit and align our components into a pattern library and build out the first version of the design system for Pro
Due to budget and resource we did not have a dedicated team to work on the design system. While we (design and front end engineering) was working on the responsive framework project, we would also have to squeeze in building out the design system.
I would act as both product manager and designer on this project making sure we were on schedule on both projects. We also could not build a live public site for the design system and so the engineering team would instead create an internal site.
To Build a V1 of the design system for Pro. This would not be final product but rather a foundation that we would continue to work on. A key requirement would also be a sketch library of all the UI components.
Because of the time constraints, we were able to move quickly with decisions. We audited all the components we had on our sketch files against the live site and discussed with engineering what we had to keep/remove/change.
We originally started off using the popular Atomic Design methodology but we pretty soon encountered problems. Due to the large amounts of components, we would sometimes wrongly classify elements as atoms, molecules and organisms. And we also spent too much time debating about it :) Another issue we ran into was to adjust an element to fit into a category. We would sometime find a lot of elements would fit into one category.
We abandoned the Atomic Design approach and developed our own structure and taxonomy taking the lead from established designs systems like Atlassian, IBM and Google.
We agreed on the following 5 sections for our first version of the design system documentation:
Introduction that includes our design principles, workflow practise and design assets
Brand guidelines and tone of voice
The basic principles that form the foundation for the product's UI
The building blocks of the design system. Each component is a distinct UI element that is reusable throughout a product
Recurring or ever-present elements and UX principles throughout the product
Team review & sign off
A team trello board was set up to track the creation of each component. We had weekly, sometime daily, reviews to discuss each component. This was important because as we worked through updating the site, new patterns appeared which we had to discuss. This sometimes led us to create new components or variations based on existing components.
Selection from Sketch Library
Example component variations for Mobile, Tablet & Desktop
Selection of pages from Design System
Example Component description
We released the first version of the Pro Design System together with the responsive framework project. We completed our initial goal, but we now had to continue to document further the components in more detail along with a live site with code snippets.
A design system is an evolving product and as such the Pro Design System would continually grow with iteration and improvement.