After years of operating without a design system, the Ticketmaster design team found ourselves with a a tremendous amount of design debt. Icons, colors, typography and design patterns that were not consistent across the board. To create a better overall UX for our customers and to be able to speed up our design process we decided a design system would be the best path for success in those areas. Thus, the Aurora design system was born. I worked on its creation with the core B2B team, a B2C UX Designer, our VP of Design, and our Product Design Director.
After spending 3 months building the foundation of Aurora, we assigned a designer from each vertical to be dedicated to their teams component library of Aurora. We created a global library with the overall architecture of the system. Currently, all Ticketmaster engineers and product designers are using Aurora and it's growing and improving everyday to drive consistency across Ticketmaster's suite of products spanning from B2B to B2C across a wide range of user personas and fans.
Background
Ticketmaster allows fans and ticket brokers to re-sell their tickets on the secondary marketplace. I represent the B2B team who supports these clients.
In order to start creating a design library everyone could access, we needed a consistent template to work from. I started iterating on a version that had a main component area in the top navigation, and then a broken down list of details for each component on the left hand navigation.
I needed to create spacers for the design system, along with follow our new grid system. It was at this stage of the process where we were spit-balling names for the design system. As a team, we started off with 'Prism' and eventually landed on 'Aurora' inspired by the northern lights, whose colors are similar to a lot of Ticketmaster's signature shades.
design system template
These designs were an early draft / wireframe of the colors dedicated to each arm of the business. We have the 'brand' section, which represents all the colors of Ticketmaster's core brand, such as on customer fan facing places, like Ticketmaster.com. Marketplace represented B2C consumer products that the team in LA was responsible for designing. And Enterprise represented the suite of products my team was working on, such as a POS system for Ticket brokers / fans, and an AI ticket pricing model.
I created consistent colors for feedback areas of the product, such as error messages, warning labels, etc. which are used universally across teams.
colors
Badges were already in place when I arrived at Ticketmaster, however, they all looked different across our suite of products since they can be used in many different instances. Some popular instances include status, such as if a ticket order had been fulfilled, or if a stadium was sold out.
I created a consistent size for the badges, along with assigning specific colors to specific feedback messaging. Green being a good sign, and red being if there was an error. I assigned yellow for pending, or in progress tasks. At this point in the process, we had finalized our header area with the Aurora theme, and the pieces were starting to come together.
badges
Modals are something that was a hassle for everyone on the design team. One person's modal would have rounded corners, while another person's would have square corners. The heading of one designer's modal might be 44px from the top, another designer's 24px. The width of the modals were always inconsistent and sharing files to keep updates in our workflow was slowing down the process.
To fix this, I defined the size of various modals for different screen sizes and uses. I also defined the spacing for exit/cancel, primary CTA, and other areas designated for content. I also decided rules around scrolling modals.
modals
While I completed each variation per component on web sized screens, I also needed to create mobile component styles and guidelines as well. Components such as colors, toggles, and even our fundamental grid system were all areas that needed consistency across our products. At this stage, I would meet with the VP of Product Design so we could sign off on the guidelines as a team.
mobile specs
Finally, we had a global library of Aurora where we have our primary design patterns that are shared across all our products. This includes buttons, color, spacing, icons, logos, typography, inputs, modals, and links. These components are the foundation of the design system and everything we’re building at Ticketmaster.
Global
After creating our global system by analyzing, & re-designing components from across all of our applications into one shared design system for all product designers to use across the organization, we handed off our work to the development team to put into a Sandbox with code so it was a fully functioning system.
design & build
The Ticketmaster brand also needed a website to show off the design system and get the messaging across for what the core values of the company and design system are.
One of our designers created fun animations, and a video to display the new Ticketmaster logo. The logo was amended from reading 'Ticketmaster' to being represented by just at lowercase 't' in most places. We used the typeface Averta in the Aurora design system. Overall, our core values for the design system and font needed to be professional, trustworthy, & fun.
adding video
We launched the design system to blast out to all designers in a shared core library where each member of the team could pull down specific instances of components they needed. Developers launched the Sandbox, and the component website launched.
I'm proud to say we created a fully functioning design system that saves our designers and developers time on a daily basis throughout their work. The products have cleaned up across the entire organization and appear consistent and more professional. I found in my own work, I could create designs so much faster not having to debate with other designers about which modal width is correct, or how big the x in the corner should be.
For such a large organization, this was a massive feat, and I'm so proud of the team for making it happen. We collaborated across teams working in different states to accomplish this, before Covid happened. It took a lot of teamwork and dedication to the larger organization and vision.
results
KPI'S
ACTUAL RESULTS
Increase consistency across applications by 20% in 6 months
02.
Save design team 2 hours per project in the design process
01.
Consistent components across 65% of apps in 6 months
02.
Designers reported saving an average of 3 hours of work on projects with a project duration of 2 weeks or more total.
01.