Driving design system adoption
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.
Before founding a good way of operating the Design System we tried out a couple of approaches:
I Dedicated person
All designers while creating the component include different possible variations and documentation of usage. One designer is dedicated to collect components, prepare them for delivery and maintain the Design System library.
The product roadmap always has priority, so the designers' attention was split out between those projects and the Design System part eventually got lost.
II Dedicated team
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.
DS team was isolated from the product and while focusing on the components library, the product road map changed and components became outdated.
III Cyclic method
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.
Product designers are always in the loop with the DS process and the DS team is always aware of any product changes.
In order to maintain the Cyclic method workflow we used the following setup:
1. An hour meeting three times a week with the Design System team
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.
2. Design System slack channel
Everyone from the company could ask system-related questions.
3. Google form
As a 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.
Google request form
DS team backlog
pattern life cycle
A pattern, from creation to delivery, goes through many stages and rounds of contention.
The Design System team focuses on building the components in Sketch (designer) and React (engineer), creating the documentation of usage and maintaining the system.
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
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.
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.
We printed out the component inventory and put it on the wall so everybody from the company can see it and left their comments.
Run a set of workshops on how within a couple of minutes designers may create a page in Sketch using the DS library.
We have a separate site dedicated to the documentation of components usage.
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.
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.
Educate designers on how to use the Design system tool (video tutorials or articles with the tips of using the tool).
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.