Backstage Design System: A scalable multi-platform solution for Ticketmaster
Designed a scalable, responsive and modular design system for Ticketmaster, creating tokens and multiple variants of key components across multiple breakpoints, ensuring alignment with the brand’s identity and adaptability across platforms.
8 weeks
Academic
4 Product Designers
Figma, Accessibility plug-ins, Zeroheight for system documentation
My Role
Analyzed website for inconsistencies and accessibility issues till atomic level.
Created components with variant sets across multiple breakpoints.
Created guidelines and documentation for the Design System.
Impact created
Created 100+ component variants for scalability and responsiveness, that can streamline future Ticketmaster pages.
Integrated accessibility standards in system components according to WCAG guidelines, enhancing usability.
Established a foundation for future scalability, with components that adapt to new requirements, reducing the need for rework and allowing efficient updates.
100+
Component variants created specifically for the Ticketmaster website across breakpoints.
30%
Lesser individual components due to variants structure and design.
40%
Lesser time in creation of new pages as per usability tests.
Project Overview
The goal of this project was to develop a robust and scalable design system tailored to Ticketmaster's platform needs. We began by thoroughly analyzing Ticketmaster’s existing design framework to assess its strengths and gaps. Using these insights, we established a cohesive set of design principles and created custom components to ensure consistency and accessibility across the platform. Usability testing of the system's UI kit was conducted to validate its effectiveness, followed by the creation of comprehensive documentation to support seamless implementation.
THE PROBLEM BACKSTORY
The need for a design system for Ticketmaster was felt due inconsistencies, redundancies, accessibility issues and user confusions.
Ticketmaster UI Inventory
We began by creating a comprehensive UI inventory of the Ticketmaster website. Every unique design element was documented and organized on a Figma board. These elements were categorized into broad groups such as navigation, colors, typography, icons, buttons, forms, multimedia, interactive elements, and blocks. This approach allowed us to structure the design system from foundational elements to more complex patterns and components.
We then conducted a usability and accessibility audit wherein we realized some recurring issues. Here are some examples.
Redundancy
Ticketmaster has 22 different font styles just on its main concert pages.
Inconsistency
3 different input field styles, different hover states, and one random blue color coming in.
…and so many more across the website.
Accessibility
Some colors fail accessibility checks in certain states.
Inconsistency
Different card designs vary in presenting information leading to user confusion and mistakes.
User Confusions
On talking to users, we realized that the above problems affect user experience.
and many more issues found…
THE SOLUTION: A DESIGN SYSTEM
Presenting Backstage: a scalable Design System for Ticketmaster
The Backstage Design System documentation covers the compilation of Ticketmaster interface UI components, their states, variants, usage and accessibility guidelines for streamlined use by both designers and developers. We have also added overall Foundational token guidelines for Color, Spacing, Typography, and additional resource support for a user to access the system.
Backstage component variants use tokens to structure design primitives streamlining the process for both designers and developers.
Backstage achieves scalability through Design Tokens. Utilizing tokens ensures scalability and consistency in style values across designs and codes. This facilitates the process of building and maintaining products within the system. Backstage tokens can also give developers a single source of truth for design values, enabling consistent implementation and faster development.
BUILDING THE DESIGN SYSTEM
We built Backstage as a system grounded in design principles that inform the creation of components. We then began with the foundation of primitive and semantic tokens for color, typography, and other essential design elements, which are then used to build larger organism components.
We defined the system's principles by aligning brand values, user needs, and designer-developer collaboration.
A design Principles base aids in establishing connect between the brand, the system and the users. Our principles are:
Scalable and Adaptive
Designed for growth, the system incorporates flexible components that evolve with Ticketmaster, seamlessly adapting to new requirements, scaling with the brand.
Unified Brand Language
Ticketmaster’s consistent brand voice and design across all touchpoints create a cohesive fan journey, enhancing recognition and trust, adding to user confidence.
Inclusive by Design
We prioritize accessibility at every level, ensuring that Ticketmaster is welcoming and usable for everyone, regardless of abilities. Inclusivity is embedded in our component structures.
Modular Flexibility
The design system is built to grow and evolve alongside Ticketmaster, featuring flexible components that adapt to new features, user needs, and industry changes.
We named Ticketmaster’s design system Backstage to reflect its core purpose: supporting seamless behind-the-scenes operations, just like a backstage crew ensures a flawless performance. The name symbolizes how the design system serves as the unseen foundation that drives a cohesive, efficient, and user-friendly experience across Ticketmaster’s platform, enabling the "main stage" (the user-facing interface) to shine.
We established rules to streamline the UI by reducing color, space, and font styles, then defined raw values to create Primitive-level tokens.
We were able to reduce number of UI colors by almost 40%.
The primitive tokens provided set values for the semantic tokens, forming the foundation of a consistent system.
We built up components with different typologies and variants by setting strategic properties.
We streamlined 27 different card styles across breakpoints to 1 main component.
We built components with different properties such that components can easily adapt as per designer requirements. At the same time this also maintains consistency across component types across the website, saves time for replacing components as needed on pages, and saves time and effort for development. We could streamline different types of buttons, cards, accordions in a similar manner.
The same was followed for all components, hence streamlining the system for consistency and efficiency.
We made components responsive to ensure consistency across devices.
By strategizing design by ranges, we designed the components to be responsive throughout screen sizes.
We built components with different properties such that components can easily adapt as per designer requirements. At the same time this also maintains consistency across component types across the website, saves time for replacing components as needed on pages, and saves time and effort for development. We could streamline different types of buttons, cards, accordions in a similar manner.
USER TESTING
We tested with peer designers to understand usability, consistency, and how well the design system met the needs of the team in realistic applications.
Our user testing gave us insights to integrate additional guidance on grid and layouting.
Overall, we received positive feedback for the system usage in regards to responsiveness of components, and the building structure of variants. We intregrated additional layout guidelines for some Ticketmaster pages that have an additional layer of grids structure to them.
Guidelines were incorporated into the Figma kit and documentation to assist designers in creating pages and frameworks for adding key components, refined and validated through user testing.
BUILDING THE DESIGN SYSTEM DOCUMENTATION
We used Zeroheight to build a documentation site for our design system. Zeroheight, designed specifically for hosting design system documentation, offered valuable features. It allowed us to seamlessly import and annotate components directly from Figma and showcase usage guidelines with clear, illustrated examples.
Each component and pattern had a page outlining its appearance, usage, and accessibility guidelines for consistent implementation.
We added descriptions and usage guidelines for each component, including their variants, to ensure designers and developers could effectively apply the system, tailored specifically for Ticketmaster. We also added guidelines to abide by WCAG standards for accessibility, contribution policies, downloadable resources, etc.
Outcome of application
The project delivered a practical system with adaptable components that can enable designers to design pages across screen sizes saving time and effort, and also maintains consistency for users.
Achievements
Optimized Component Usage:
Streamlined the Figma component library by strategically designing variants, reducing the overall number of components while maintaining flexibility. This would enable consistent design implementation across projects.
Integrating Responsiveness:
I took the lead for implemented responsive design principles within the Figma components, ensuring that each component and variant adapts seamlessly across multiple breakpoints, reducing the need for separate components for different screen sizes.
Successful Implementation of Design System:
Collaborated and developed and launched a comprehensive design system documentation site using Zeroheight, streamlining the design process and ensuring consistency across all components.
My key take-aways
Developed a Passion for Design systems: Through hands-on experience in this project, I discovered my passion for design systems. I was fascinated by their ability to drive consistency, efficiency, and accessibility across teams. This journey has reinforced my commitment to advancing my skills in systematizing design for impactful, scalable solutions.
Collaboration and management skills matter: Effective collaboration and strong project management were crucial for aligning team efforts and ensuring smooth implementation of the design system.
Digging deep till atomic level is integral: Focusing on the smallest design details, down to the atomic level, was vital for creating a consistent and reusable component library that can scale across projects.
