top of page

GOVERNING THE DESIGN SYSTEM

PROBLEM

It's the one thing to create a design system component library, but it's also important that other people start using it.

​

We needed to solve the problems of how to make sure that the Design System is sustaining the product needs, how we can roll over all Design System changes to the product and how to encourage people from the company to use the Design System. 

OPERATING APPROACHES

Before founding a good way of operating the Design System we tried out a couple of approaches:
All designers while creating the component include different possible variations and documentation of usage. One designer is dedicated to collect the components, prepare them for the developers and maintain the Design System library. 
variant 1.png
The product roadmap always has priority, so the designers' attention was split out between those projects and the Design System part eventually got lost. 
FAIL
A dedicated team for the Design System focuses only on the Design System project, and product designers work only on the projects from the product roadmap.
variant 2.png
DS team was isolated from the product and while focusing on the components library, the product road map changed and components became outdated. 
FAIL
A dedicated team for the Design System closely collaborates with product designers, which know that they need to create a product with an eye toward how it affects the Design System. 
SUCCESS
variant 3.png
Product designers are always in the loop with the DS process and the DS team is always aware of any product changes.
I Dedicated person
II Dedicated team
III Cyclic method

STRUCTURE

In order to maintain the Cyclic method workflow we used the following setup:

  • An hour meeting three times a week with the Design System team, where every designer, product person, or engineer is welcome to attend. During these meetings the actual process of adding new components or changing the old at the DS library starts. A designer brings the new design and together with the DS team review the components. Then we jointly decide if the component passes the DS criteria or should be modified. If the component didn’t match the style, the DS team will take this component and try to provide an alternative option.

  • Design System slack channel, where everyone from the company could ask system-related questions.

  • Google form is another way of reporting bugs and requesting a new component. We have a form with a set of questions, after submitting the form, the request goes directly to the DS team backlog.

request form.png
dsm reques backlog.png

DS team backlog

Google request form

PATTERN LIFE CYCLE

A pattern, from creation to delivery, goes through many stages and rounds of contention.
PATTERN_CYCLE.png

DESIGN SYSTEM TEAM

The Design System team focuses on building the components in Sketch (designer) and React (engineer), creating the documentation of usage and maintaining the system.
Ds_team.png

Design System Team

Our focus besides building the Design System library was to create a cohesive team where designers and engineers will work closely together.

 

Even if designers and engineers use different platforms to build the component we set our road map in the way so designers and engineers work on the same component at the same time. This way of working helps us to understand how the process of creating the component looks like from both sides. 

We used DSM by InVision tool to keep all our components, code sources and documentation.

DSM_Form_Field.png

DS JOURNAL

Every team member daily documented the progress.

We've described what changes we made in the Design System and why this decision has been made. Documenting every step helped us to quickly locate the history of the component and see the reasons why we made this decision without overlooking it again in the future. 

Example of DS Journal (Dropbox paper)

DSM_journal.png

CHANGING THE CULTURE

One of the other important parts of governing the Design System is creating a culture where every person understands why we have the Design System, what it does and how it helps the company.

We started by explaining why the design system is important and how it will help the company and make designers and engineers working flow easier.

photo 1.JPG

  • We printed out the component inventory and put it on the wall so everybody from the company can see it and left their comments.

DSM_SKETCH.png

  • Run a set of workshops on how within a couple of minutes designers may create a page in Sketch using the DS library.  

Life_Button_Change.png

  • We run a set of presentations across the company, where we showed how in a couple of clicks component can be changed across the whole website.

Icons_Documentation.png

  • We have a separate site dedicated to the documentation of components usage.

Every person in a company should understand why it’s important and feels a part of the process. So giving the ability to contribute in some way and understanding why it is important is a huge step in order to create the culture.

DSM_Updates

  •  We presented on the review meetings and sent an email with the notes what have been changed in a new release accompanied by visual examples.

New_site_screen.png

  • Educate designers on how to use the Design system tool (video tutorials or articles with the tips of using the tool). 

FINAL NOTE

Incorporating a system into a design culture takes a lot of time; it’s a gradual process. And the way we manage the design system plays a huge role in its adoption. A successful design system needs to become part of the organization’s culture, helping the team produce more consistent user experiences, and building bridges between design and development.
bottom of page