Milkyway

DESIGN SYSTEM — WEB

Reconstructing a flexible design language to strengthen production quality and team collaboration at Universe

Reconstructing a flexible design language to strengthen production quality and team collaboration at Universe

With the Universe team growing at such a fast pace, it gradually became crucial to redevelop an anchored design system and process in order to elevate the production quality and the collaboration dynamic even further.

OVERVIEW + ROLE (PRODUCT DESIGN INTERN)

ROLE

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:

  • Conducted weekly check-ins to focus on system prioritization 
  • Communicate and test changes openly with the design team
  • Establish components + its documentation at a systematic level

PLATFORM

ROLE

Web (Product)

Researching, Concepting, User Testing, Visual Design

TOOLS

TOOLS

Sketch, Abstract, Zeplin, Principle, NotionFrontify, Storybook

Adobe Creative Suite, Sketch, Figma, InVision

DURATION

TIMEFRAME

January 2019 - April 2019

Four Months

TEAM

TEAM

Senior Designer + Software Engineer + Product Design Intern (me)

Three Designers (Zachery Eng, Carolyne Gogogta, and me)

PROBLEM

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.

SOLUTION

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 languageclear strategy, established sources of documentation as well as methods to reinforce importance.

t

t

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:

Zero

Symoblized text styles

30

Types of Navigations

80+

Uncategorized components

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

FOUNDATIONAL VALUES +

ACTION ITEMS

ACTION ITEMS

Establishing Importance

Done gradually through constant transparent communication, involvement, and executing a memorable experience to instill value amongst the company.

Strategic Prioritization

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. 

Proper Maintenance

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. 

Step 1: Strategic Prioritization

Step 1: Strategic Prioritization

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:

Atomic Design

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.

Establishing Style_2

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.

1

Functionality

Is this component needed? Does it live in production right now? Are there other components associated with this component?

2

Brand Language

Does this currently align with our colours, iconography, card styles, and type system? Are these linked directly to our Sketch library?

3

Scalability

Can this be incorporated throughout the platform and in different screens? Are all scenarios considered? Are both minimum + maximum sizes, padding, margins calculated? Accessibility?

4

Documentation

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. 

finale_heading_2
Finale_v2(dark)_2

Step 2: Proper Maintenance

Step 2: Proper Maintenance

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. 

Product_Current Process
Product_Proposed Process

STEP 2 OUTCOME: PLATFORM CONVERSION

By analyzing the original process, platforms like Frontify and Zeplin became either unused/forgotten or miscommunicated improper translations to the development team. After discussion, resulted in both Abstract and Storybook to be introduced for an efficient hand-off.

Notion_4

Details on overarching goals, rules, processes, and resources to consider.

Details on overarching goals, rules, processes, and resources to consider.

Sketch_4

Overarching guidelines/rules labeled for each component + their sections. This includes details in paddings, edge cases, grids, etc.

Storybook_4

The live-time component library, built using React Semantic UI to document use-cases, change history, and immediate visual testing

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.

Step 3: Establishing Importance

Step 3: Establishing Importance

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. 

pres

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.

game

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.

REFLECTION
REFLECTION

It takes a village to raise a design system

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.

Interested to learn more about how I did this at a more molecular level? *wink wink* Feel free to reach me here: rhtcheng@yahoo.ca

People who liked this case study also liked...

HypercareProduct Design

MilkywayDesign System

EquipdProduct Design

ZēnoProduct Design

MiscellaneousProduct Design/ Web / Print

Let’s collaborate together! — rhtcheng@yahoo.ca

© Rachel Cheng, 2019