Universe, a Ticketmaster company, is an event platform where organizers can create events for their guests to have memorable experiences. From live shows to festivals, Universe has hosted a wide range of clients such as TechCrunch, TedX, Redbull, and Paisley Park. Milkyway is the name of our design system, and I was the designated gatekeeper. In order for the system to establish its value, I made sure I:
January 2019 - April 2019
Senior Designer + Software Engineer + Product Design Intern (me)
Three Designers (Zachery Eng, Carolyne Gogogta, and me)
Having pain-points such as unaligned and missing components, as well as a lack of initially establishing both a proper grid and typography system, multiple interpretations of the current Milkyway design system emerge. With this problem constantly reappearing, the lack of proper team collaboration is a barrier for Universe to thrive.
To increase production quality and team collaboration, I was responsible with redesigning the newest iteration of the Milkyway by establishing key foundational pieces to cultivate a shared language. This includes a flexible design language, clear strategy, established sources of documentation as well as methods to reinforce importance.
THE ROOT OF THE PROBLEM
To understand the root of the problem to its core I conducted user interviews to multiple members of the design and development team. Asking questions such as: how do you refer to the design system in your day-to-day process? What are some of the barriers you encounter when using the design system? Turns out, there were multiple versions of how the ‘source of truth’ was and how it was interpreted.
Many of the pain-points were first discovered by its components, then the challenge expanded to having a lack of an established process and systems foundation.
To validate the results from the interviews, I audited every component in production and the design system. Here's a small taste of what I found:
Symoblized text styles
Types of Navigations
GOAL + DIRECTION
The complexity of the problem was rooted in how deep the pain-points were intertwined with one another. By relying back to our goal, we formulated a better understanding on how to direct the design system to success:
FOUNDATIONAL VALUES +
Done gradually through constant transparent communication, involvement, and executing a memorable experience to instill value amongst the company.
Constantly syncing up with the team and creating a step-by-step process, to execute everything planned. Prioritizing tasks with factors such as high usage frequency or is fundamentally essential.
Accessible documentation would contain different procedures, dedicated POCs, as well as a criteria list to ensure quality and continued discussion for both designers and developers.
A successful ever-lasting design system starts with a formulated strategy. As our products evolve at a rapid pace, prioritizing a concrete foundation first can align all our digital products into a cohesive experience. To visualize this approach and why we did it, we relied on Brad Frost's Atomic Design methodology to start the process:
By analyzing their components and painpoints, it was lacking a strong foundation —the 'atoms'. Organizing the style guide consists of re-establishing the typographic system, icon library, colour palette, card + shadow styles, and grids. We made sure to reference established design systems such as Shopify's Polaris and IBM's Carbon System.
Once established, the next step is to prioritize how to improve the molecules/components of the system. This included factors of high usage frequency and is fundamentally crucial for the system. Examples of high priority components included input fields, buttons, and drop-downs. The process and criteria are as follows, and re-evaluated when user-testing.
Is this component needed? Does it live in production right now? Are there other components associated with this component?
Does this currently align with our colours, iconography, card styles, and type system? Are these linked directly to our Sketch library?
Can this be incorporated throughout the platform and in different screens? Are all scenarios considered? Are both minimum + maximum sizes, padding, margins calculated? Accessibility?
Are the rules and states established clear on both Sketch, Notion, and Storybook? Do's and dont's? Proper naming conventions?
STEP 1 OUTCOME
By initializing the establishment of the Milkyway design system and process, through constant communication, involvement, and testing, the Milkyway design language can allow people to strengthen production quality and collaboration. When people work better, so will the experiences of our customers.
As this is an ongoing effort for both the design and development teams. The picture below shows a general summary of the components that have been updated during my time there. Below addresses the goals that were previously mentioned.
To ensure everything implemented and will be implemented can live on for years to come, we re-established a more simplified process to instill the design system into everyone's workflows easily. This also includes empowering designated Design System Advocates™ for both design and development teams to contact them whenever there are questions/concerns.
STEP 2 OUTCOME: PLATFORM CONVERSION
Details on overarching goals, rules, processes, and resources to consider.
Details on overarching goals, rules, processes, and resources to consider.
Overarching guidelines/rules labeled for each component + their sections. This includes details in paddings, edge cases, grids, etc.
STEP 2 OUTCOME: DOCUMENTATION
To ensure mistakes in the past such as improper maintenance and prioritization are prevented, we've finalized these as the 3 main platforms for rule documentation as it provides a clear reference for every Designer and Project Manager on the team. This includes incorporating the criteria list mentioned previously.
To influence both design and development teams on the importance of the system was by showing the work and allowing others to imagine how valuable it can be to incorporate it into their process.
STEP 3 OUTCOME: MILKYWAY 101 PRESENTATION
This presentation is a proper educational hand-off to every player on both the design and development team. This includes the foundational importance of the design system, the technical processes involved, an introduction + quick game to Abstract, the future of the system, as well as an open discussion. The presentation can be accessed to all parties for future references.
STEP 3 OUTCOME: 'THINK YOU KNOW MILKYWAY'
This personal initiative is the Universe edition of the popular "Can't Unsee" game, which focuses on finding common mistakes found in the design system in a fun, engaging manner. Allowing others to not only understand the importance of the design system through their own personal mistakes, but have this experience incorporate motivation when thinking about the design system, rather than considering it like a chore.
Working on the design system over time, constant involvement and communication are absolutely necessary even for a small team. A design system affects not only billions of interactions on the site but it also affects the daily decisions of each and every team member every day. With this overall experience, I learned how to frequently, transparently, and strategically communicate priorities and updates to the best-suited people as possible. This included understanding when and how to address changes to the design system to both designers and developers. By including others into the discussion and voicing their needs early on, decisions were made strategically as well as executed efficiently. Although these changes are slowly being implemented, I'm very grateful for the opportunity to get involved with understanding more of the development side, and for all the relationships I've made there in the process.
© Rachel Cheng, 2019