Backstage: A Ticketmaster Story
A design system built from the ground up to help the Ticketmaster team create efficient, consistent and seamless ticket booking journeys for all its users.
The Team:
Charlotte Hsu
Shikha Mehta
Kacey Xu
Jiten Thakkar
Timeline:
8 weeks
Client:
Ticketmaster Entertainment LLC
The Team behind the Backstage Design System:
Our team for this project consisted of a skilled mix of experience designers, each with a valuable set of skills and experiences that allowed us to develop a robust design system for Ticketmaster.
My Role:
Throughout the project, I took on key responsibilities that spanned both design execution and system documentation:
•
Laying the Groundwork: I played a key role in auditing key pages of the website. I also played a significant role in creating and naming tokens.
•
Component Design: In addition to being involved in the groundwork, I was responsible for creating key components such as navigation tabs, recently viewed tags, a calendar component, review cards, and navigation links.
•
Design System Documentation: Built and documented key sections on Zeroheight, including the accessibility page, typography, the cover page, and component documentation & usage guidelines for a few of the components.
And finally, other than creating a fair share of the slides, I added a bit of flair by running a quick live demo to show the Ticketmaster internal team just how easy and seamless this design system is to use.
About Ticketmaster:
Ticketmaster is a leading ticket sales and distribution company based in the United States, and with operations throughout the world. Millions of users access the website and app daily to discover and book tickets for a broad range of event categories.
Why does Ticketmaster need a Design System?
We can all recall a frustrating experience when booking tickets through Ticketmaster, especially for events that sell out quickly. A slow and confusing interface with a frustrating seat selection flow
often leads to users missing out on tickets in their cart.
Here are some notable quotes from some frustrated users:
“I keep having to check if I’m still on a
Ticketmaster page, as some newer
pages look so different.”
“There are 3 different button styles on
the ticketing page. I don’t know if one is
more important than the other”
Despite it being a leader in the space, the ticket booking experience through Ticketmaster has room for improvement. The platform would greatly benefit from a streamlined design system.
Here’s why:
Inconsistent user experience
Since Ticketmaster operates across multiple platforms, it has a wide range of assets, and streamlining these components and their usage should result in a consistent and enjoyable experience for all users.
Missing Accessibility considerations
Keeping accessibility in mind is critical for a platform like Ticketmaster, where users with diverse needs rely on fair and quick access to purchase tickets. And without a design system, ensuring WCAG standards compliance can be frustrating for all the internal stakeholders.
Enhance Scalability
The platform attracts millions of users across regions, and regularly handles huge traffic spikes for major events. Having a streamlined design system should help the internal team scale components and patterns quickly.
Our Approach
Audit the different sections of the website
Framing core Design Principles for the system
Building reusable UI components
Accounting for accessibility from the get go
Documenting the System
Audit the different sections of the website
We first started with conducting a comprehensive audit of Ticketmaster’s existing website to identify
inconsistencies in design, branding and user experience. This process provided a clear
understanding of the problem areas.
Here are some key issues we found:
1.
Ticketmaster has 22
different font styles
with varying weights and
this we found was a
major issue impacting
the consistency of the
platform.
2.
Some colors on the
Ticketmaster website
did not satisfy web
accessibility
guidelines. This is not
great as it alienates a
whole set of users.
The absence of a design system means designers often have to create the same components from scratch, with each new component requiring new documentation for developers.
This leads to inconsistencies over time and directly translates to a sever waste of precious design time and effort that could’ve been used elsewhere to improve product.
This also leads to smaller visual inconsistencies that accumulate over time and result in issues such as poor spacing between components in certain places, and multiple variants of the same icon being used on different pages.
Framing core Design Principles for the system
Any design system needs to have a set of guiding principles that form the organisation’s brand positioning, it’s core values and it’s outlook for the future.
These principles aim to guide the internal team as they go about exploring and implementing the system.
Through analysing Ticketmaster’s mission and it’s values, we came up with 4 key design principles to guide the design system and the behaviour of the stakeholders using this system.
Building reusable UI components
To start with, we created an inventory of all the various colors, fonts, icons and UI components used through the Ticketmaster website. This exhaustive process helped us visualise and cluster components by their functions.
An inventory of the UI elements used to build the Ticketmaster website.
Here, we took some key decisions to reduce the total number of colors and fonts used:
We made a reduction in the total number of font faces used across the website.
We skipped similar hues of colour to reduce confusion and create greater contrast between visual elements.
These changes were made to increase visual consistency and also to make the design system easy to follow and implement.
Next, using the principles of Atomic Design, the team came together to build components from the ground up.
Starting with our building blocks, the design tokens.
Design tokens are the foundation of all design systems, and doing a good job of naming these tokens was of utmost importance as we move forward.
We started with naming the primitive tokens for colors, typography, and spacing before evolving them into semantic tokens that aligned with specific use cases to ensure clarity, consistency, and scalability throughout system.
Th final list of Semantic Tokens used throughout Backstage
Next, we created responsive grids for three break points
We created responsive grids tailored to various screen
sizes, to ensure that our layouts work seamlessly across devices, from mobile to desktop.
We then created these complex UI Components from scratch
The team then split duties to design components from scratch, with a key focus on usability and
flexibility while also added variants for different component states.
I was responsible for designing components such as page level navigation tabs, recently viewed tags, the calendar component, review cards, navigation links, among others.
A bank of components for the Backstage design system
That’s not all! We also created size variants for each of the components
This resulted in a fully responsive design system that can be use to create screens for three most used screen sizes.
Some examples of responsive UI components. Content cards, Gallery and Buttons in 3 different sizes
Accessibility is at the heart of Backstage.
Each component has been designed keeping all user needs in mind, ensuring no one is left out of the Ticketmaster web experience.
Built for Everyone, from high contrast colours to screen reader-friendly design.
This system accommodates for a diverse range of abilities and preferences, resulting in and enjoyable experience for all.
Backstage is all for assistive technologies.
This design system prioritises clear and intuitive navigation, whether it is through a mouse, a keyboard, or other assistive technologies.
It satisfies the latest Web Accessibility guidelines.
The Backstage design system adheres to WCAG 2.1 AA standards, making the Ticketmaster website extremely accessible to a broad range of abilities and contexts.
A key step here was to test the system to assess if designers are able to easily understand token nomenclature use and implement the grids, components and variants with relative ease.
We were thrilled with the speed and relative ease with which these participants were able to get acclimated with the components to create a new Ticketmaster screen from scratch.
The results from this activity gave us the confidence to move forward with documenting the system online.
Documenting the System
Having created and tested our design system with fellow designers, we then published the design
system onto Zeroheight, a popular design system management platform.
You can scroll through the latest release of the Backstage Design System using the link below:
Backstage Design System v1.0
The Result:
Ticketmaster Backstage, a living breathing design system that grows with the needs of
the platform.
This online system covers all the key pieces of information such as:
•
a getting started section (which is a great for onboarding new employees)
•
the design principles
•
accessibility guidelines
•
release notes
•
a feedback section
•
and most importantly, a contributions section to ensure Backstage System continues to
grow into a robust system with time.
Next Steps:
Continuous Improvement
Building Backstage is just the start. I would like to see the system actively being used by internal
stakeholders. Their feedback and suggested improvements should result in a robust design system
that accommodates for all kinds of user needs and inculcates the latest accessibility guidelines
while also staying up-to-date with the latest trends in design.
Reflections:
Building this system helped me look at Design Systems in a different way.
Now when I look at an organisation’s design system, I see more than just components and
guidelines. I now see a holistic picture of:
•
their priorities as an organisation
•
their focus on addressing user needs
•
their commitment to empowering employees and teams
•
their thought process and approach to problem solving
•
their approach to evolving and staying relevant in their field
This class has deepened my appreciation for how design systems serve as a window into a
company’s values, vision and it’s ability to adapt to change.