Using a megaphone to advocate for design system.

Advocating for your design system

Building a design system that ensures a coherent user experience is only possible if the entire team is aligned towards the same goal. It has the ability to improve user experience by offering consistency and accessibility, which encourages adoption. Maintaining and scaling design systems takes time and resources. Team members must embrace a design system in order to demonstrate its usefulness. Getting people to contribute to a design system offers them ownership, which leads to wider use. In order to increase usage and obtain feedback for changes, a design system must engage with teams across the organization.

This is why advocacy is a valuable tool. Advocating for your design system doesn’t mean imposing it on teams, but rather a process of education so it can be adopted easily. It means working together with the teams who will use the design system, and learning valuable insights along the way.

First and foremost, your design system must be adopted and accepted by your own team. And, without a doubt, we must be the biggest advocates of our design system, since no one else will.

Let’s look at how to get your design system adopted by your team, advocate for your design system and how documentation can help.

Design system adoption in product teams

Adoption of the system relies heavily on shared understanding. It will only be helpful if the individuals working on the product actually adopt the design system.

Implementing a design system is much more than just translating a design into code for the developers. They must convince other developers who are building the applications to adopt their components in order to generate and distribute components. They must lay the necessary groundwork for a standardized and collaborative component ecosystem. Over time, adding, maintaining and updating the components to make sure everyone can use them without being blocked drives design system adoption in the product team.

Adopting some of these best practices will definitely help design, engineering and product teams alike.

  • Create a living style guide: Strong documentation for a design system isn’t just a “nice to have.” A design system lives by it, it is a step-by-step guide for putting your design system into action. An excellent style guide and documentation should be easy to find, automatically updated and relevant to the whole team. It should be the go-to place for everyone looking for information, and everyone should feel confident that they will be able to find answers to their queries there. For new developers joining the team, live previews of code or documentation can make things easier. It will help them familiarize themselves with the coding style and teach them best practices. Providing enough documentation links and resources also helps paint a clearer picture for new hires. Backlight includes features such as real-time preview and collaboration, branch/pull-request management, asynchronous communication and visual reviews. It embraces collaboration between different teams. Adoption is the key to a design system’s long-term success, and appropriate documentation encourages it. As adoption develops, your design teams will produce consistent, high-quality work.
  • Reusable component ecosystem: A successful design system is, to a large extent, reusable; guided by clear standards, assembled to build products together. The design system is a set of reusable components shared and used by everyone in the organization. Collaboration between designers and developers is one of the most crucial aspects of a reusable component system. For example, we have two teams, A and B. Team A uses React while team B uses VanillaJS. When considering our design system, our focus should be on building components that can accommodate multiple frameworks, provide flexibility, without restricting developers from using a particular framework. This will ultimately encourage adoption among different teams. As a result of the Covid-19 pandemic, many companies are working remotely, increasing the need for strong collaboration. Flexible, adaptable and reusable components allow cross-functional teams, designers and engineers to perform their tasks effectively while using their unique skillsets. Reusable components scale the whole design system and avoid unnecessary, repetitive design decisions for the same component. The design system’s users will be able to interact with the application effectively, have a consistent experience and eventually become familiar with the company’s brand.
  • Automation to the rescue: Many companies want their designers to create and ship new features to development more quickly than ever. If we analyze the process of building, adopting and maintaining a design system, we may observe that there are many areas that can be automated for greater optimization. For example, in the middle of a project it can be difficult to identify redundant sections of code. It increases the frustration when developers with different styles collaborate and try to write in a single manner. This is where tools like ESLint comes into play. Due to its versatility, it has become a very popular component for many projects, saving a lot of time and making designers happy. To learn more about design system best practices with ESLint, check out this series on the Backlight blog.

    Backlight: Designers love it because it has visual features and they don’t have to learn how to code. Developers love it because it allows them to quickly build and experiment with the design system.

How to advocate for your design system

You can build the finest design system in the world, but if you do not advocate for it within your organization, it will eventually fail. It is crucial to advocate for your design system from the beginning. That is why, right from the start, we must take the initiatives to advocate our own design system’s adoption. This can be achieved by building a community of advocates that promote system thinking, and offer education in the form of talks and workshops. These actions should have the same goal: to promote knowledge of the design system’s existence and educate people on how to use it.

  • Share knowledge at design meet-ups and conferences: Encourage members of your team to join you at meet-ups, and share your knowledge by attending and participating in seminars at conferences. These seminars provide an excellent chance to network, gain new information and become more comfortable sharing our perspectives. It is incredibly beneficial to one’s personal growth. The world gets to know about our design system and we raise awareness about how we are using it.
  • Create a safe space for honest conversation: It is critical to create a secure atmosphere for people to express their genuine thoughts and ensure that everyone is heard. It is a chance for product designers to speak up about their work and obtain constructive feedback. Encourage people in the meetings to share their creative ideas and issues they face daily and provide clarity on the problems. Spot the team’s common design issues, take necessary steps and offer related resources to tackle them. Regular updates hold the team together, and provide transparency and clarity on the working status in terms of development.
  • Case studies, user stories and behind-the-scenes: Use case studies to promote your own design system. This can assist in providing a clearer picture of what should and should not be done in order to adopt the greatest design system. It gives a sense of confidence within the team and can help get different perspectives and learnings from the outside world. Encourage the team to study design system articles and books, such as Brad Frost’s Atomic Design.
  • Encourage contribution to the design system: People want to do more than just join; they want to contribute. The contribution comes in multiple forms other than designing and coding, but also through word of mouth, such as hackathons, conferences, blog posts and meet-ups. This promotes our design system to the rest of the globe and creates an alliance of developer advocates who will represent and sponsor your company’s design system.

Documentation - a tool for easy adoption

It isn’t a design system if no one adopts it! The design system’s advocates must communicate the benefits of their work to colleagues and ensure their help during the adoption stage. Creating an excellent style guide is one of the best ways to accomplish this. Documentation promotes adoption in several ways. Providing a clear reference for someone who has just started with the design system is one example. It can be treated as a single source to put all the set-up guidelines and resources, eliminating ambiguity or the need to look in multiple places and get confused about which rules to adhere to.

In addition, documentation should answer any “Why” and “How” questions, which will undoubtedly dispel a developer’s or designer’s uncertainties. Questions such as how to use a specific component, when and where to use it, which color guidelines to follow. All of these questions should be addressed in the documentation. If all of this is in place, the team will find it much easier to implement the design system.

We can take some inspiration from the best design system documentation sites.

Because design systems are constantly developing, skilled governance is required to ensure long-term viability. Including a contribution and governance approach in our style guide can be very helpful. And codifying these can allow it to expand organically without breaking, which relieves the design system team of pressure.

Having documentation doesn’t guarantee a successful design system, but having it can offer numerous advantages for establishing a lasting design legacy.

For more design system documentation best practices, check out this blog post written by Thais Santos, Design Lead at DivRiots.

Consistent advocacy is the key

The main issue of design systems is adoption. To get others to embrace your design system means the need for regular updates, especially as the team evolves. That is to say, if you want a design system to have a long-term impact, you need to consistently advocate for it.

To continue the discussion, reach out to the Backlight team:

👋 Join the official Backlight Discord community

🐬 Follow us on Twitter for latest updates

📩 Subscribe to our YouTube channel