Introducing the new Ticketmaster Design System
BACKSTAGE
Designing seamless experiences for every stage
Type
Academic
Role
Research, Branding, Design, Documentation
Time
8 weeks
Team
4 UI/UX Designers
Process
Over View
The goal of this project was to create a usable and inclusive design system that has collections of components, guidelines, and design standards for a popular American ticket sales and distribution company called
Analyze
We created a UI inventory of the existing Ticketmaster website. The broad categories included navigation, colors, typography, icons, buttons, form fields, navigation, interactive elements, pop-ups, and blocks.
Issue 1
Ticketmaster has 22 different font styles with varying weights which hinders consistency
The Problem
Why does Ticketmaster need a Design System?
Issue 2
Inconsistent styling of input fields and buttons resulted in noticeable visual discrepancies.
Issue 3
Some colors used did not pass accessibility tests, resulting in readability challenges.
USER OPINIONS
We have asked 3 participants to use the current website of Ticketmaster; they give us their feedback on their user experience.
BACKSTAGE
The reason for naming the Backstage of the design system of the Ticketmaster is that a ticket-selling platform is related to concerts. The concerts showing perfectly on the front stage also take credit for the people behind the backstage. The Ticketmaster is also well known and usable; it should be credited to the designers and developers who used the design systems.
We designed the Backstage Design System to:
1. Mitigate such usability issues
2. Establish clear branding for users
3. More efficiency for Ticketmaster designers
and developers.
Design Principle
Token
With design principles in place, we started to reduce some colors, fonts, and space and summarize them in details into our new design tokens, which included color tokens, spacing tokens, font tokens, and text component variants + tokens.
The tokens help us to verify the principles and keep the consistency for our future design of the element for the Tickemaster.
After naming and defining each element for these design tokens, we edit into the Figma local variables library for Primary Tokens and Semantic Tokens.
Test with UI KIT
After we completed the first version of our UI kit and elements, we have tested it with our classmates. We asked them to redesign the homepage of Ticketmaster using our design system. The participant gives some feedback.
We collected the suggestions from the participants, and we made an iteration of naming for each of the types of cards; we made a page guidance for each of the pages in Ticketmaster with grids.
Colors
Redefined color usage and range, reducing visual clutter and enhancing consistency
OUR DESIGN SYSTEM
How Backstage improves usability and efficiency for Ticketmaster?
Typography
Streamlined font’s size & weight to improve consistency
Grids & Layouts
Established standard grids and specified layout usage, ensuring efficient design system usage
Responsive component
Integrating responsive components, ensuring usability across devices
Accessiblity
Making changes to components and setting rules for better accessibility, ensuring inclusive design.
Documentation
The Zeroheight is an efficient tool; it is an end-to-end design system management platform.
We used Zeroheight to manage documentation for the Backstage design system.
Documentation site home page
The introduction of our design system.
Design Principle Page
For users to understand more about using our system, we introduce our design principles.
Foundation & Component Agenda
For users to easily find the design elements or components, we give them a agenda for each section.
Detail Pages
We provided details of the size, state, and type of our cards used for the users to let them understand better the usage of the card.
We also provided each usage example or text explanation for each design element.
Conclution
We get great feedback for our final presentation about how we build our design system.
The Future
Ticketmaster is a well-known ticket-selling platform. Since we published our design system in Figma, there have been 42 people who have used our design system. We allowed users to give comments on the experience of using our design system under the Figma Community of our design system file.
We also created a Google form for the people who used our design systems to provide us with reports on some problems or improvement suggestions.
Future Changes:
1. Make other detailed design elements for Ticketmaster,
like the mapping page for selecting the seats.
2. Make iterations based on other users' opinions.
