Charlotte*(hsu) 🐇
/Resume    

TITLETYPECLIENT
OKIE  0-1 Product design
Web app
Career tech 
Hi-fi prototype
Self-directed
Backstage
Design system
Figma UI Kit
System thinking
AccessibilitySelf-directed for Ticketmaster
Knowunity
EdTech Mobile
User research
Usability testing
Product strategy
Knowunity
Toko
AI driven language app
Product design
Product strategy Design challenge for Toko
Alcov
AI driven mobile app
UIUX design
Foundational design
Alcov
Visual design works I did with fun and joy... :)

+ Infographic: What’s in my December
+ Album cover redesign: TAKE_v1 
+ Album cover redesign: TAKE_v2

©CharlotteHsuBrooklyn, New York

Backstage

Building a design system to enhance design consistency and work efficiency for Ticketmaster.





Responsibility
Create UI inventory
Build component library
Document design systemSkills
System thinking
Atomic design
Figma UI Kit building Timeline
Oct - Dect, 2024
12 Weeks
Tools
Figma
Typeform
Notion
Google Suite



Intro

The behind-the-scenes engine that keeps the Ticketmaster experience running smoothly


Backstage is a design system that defines the principles and building blocks of the Ticketmaster website.

Check out our final works here:

Documentation   Figma UI Kit






Why does Ticketmaster need a design system?  Why does Ticketmaster need a design system?  Why does Ticketmaster need a design system?  Why does Ticketmaster need a design system?  



Ticketmaster is a global ticketing platform widely used for purchasing event/concert tickets. In the U.S., 63% of online event ticket buyers rely on Ticketmaster.

As a dominant ticketing platform, this is what you’ll experience during your ticket purchasing process...




-01

 22 font styles with varying weights and sizes, disrupting the overall visual hierarchy.



-02

Inconsistent component styles led to visual mismatches and a less professional brand image



-03

Color usages failed accessibility tests, causing readability issues.



Thus, we designed Backstage to improve usability issues, brand image, and working efficiency for designers and developers




But how did we get there?






Creating UI inventory

To build a robust system, we deconstructed Ticketmaster’s interface to document every components



As Ticketmaster is a large platform with many functions, I narrowed the scope to Home and Event pages, which are the key pages users engage with during the purchasing process.

I systematically reviewed the site, capturing screenshots of UI components with distinct styles, and categorized them into colors, typography, interactive elements, links, and more.




UI inventory revealed the current design patterns and component issue


The UI inventory not only helped us understand the design patterns Ticketmaster used, but also revealed weaknesses such as inconsistent components, unorganized use of colors and typography, and accessibility issues that hinder the user experience.

This gave us a clearer understanding of what needed to be redesigned in Backstage.






Building UI kit

Converting foundational elements—color, typography, and spacing—into reusable design tokens



We began by standardizing color, typography, and spacing as foundational styles, prioritizing website needs, visual clarity, and accessibility.

These foundational atoms ensure visual cohesion when creating molecules and organisms. To enable consistent and efficient reuse, we converted these elements into design tokens.
The process of defining & naming design tokens :) 



Buidling UI kit

Using foundational atoms, we rebuilt molecules to ensure greater consistency



Using the foundational styles, we built more complex components like buttons, text links, and switches. The predefined atoms ensured these molecules were cohesive. 

We also created component variants, including types, states, and sizes, to address diverse usage scenarios.


Buidling UI kit

Finally, we connected molecules to form organism-level components



By combining foundational styles and molecules, we built bigger components like navigation and cards.

Leveraging pre-built atoms and molecules made creating complex components easier while ensuring a consistent design style.





Documenting the system

Create principles and branding for the system to shape the design culture 


A design system is more than a component library; it shapes design culture, fosters collaboration, and aligns teams and stakeholders around a shared vision.



We defined design principles tp guide designer through every design choice they made at designing Ticketmaster




Brainstormed names to best represent our system — ended up with Backstage

Just as every concerts or sports event relies on a backstage crew to make the magic happen, Ticketmaster’s *Backstage* powers the behind-the-scenes work to deliver a seamless ticket-buying experience.


Documenting the system

A thorough documentation of Backstage on Zeroheight

The whole design system documentation is composed of Introduction, Foundation, Components, Resources, and Helps.

It introduces internal stakeholders to Backstage, offering access to foundational styles, components, downloadable design resources, and ways to contribute or reach out to us.






Each component page includes an overview, all variants, and detailed usage guidelines for designers to refer to effieciently.






Pitching

A pitch deck to communicate Backstage’s highlights, convincing stakeholders to adopt the system


We presented a pitch to 15 designers, highlighted how current design hinders user experience and brand image, how Backstage addresses these issues, and how it boosts design efficiency for internal stakeholders. 

We also did a live demo to showcase the speed and ease of rebuilding Ticketmaster pages with Backstage.





Thanks for reading