User Rating: 1 / 5

Star ActiveStar InactiveStar InactiveStar InactiveStar Inactive

Let's talk about the basics

A design system is an advanced and more in-depth type of brand guidelines which aims to bring to your company consistency and bridge any gaps you may have in your design. It is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications. It accelerates the design process and bridges the gap between teams involved in building a final product by having clear graphic standards, that make assembling websites from components super easy. It is a set of deliverables that evolves with the product, the tools and the new technologies.

A big box of UI Lego pieces that can be assembled in near-infinite ways. 

Emmet Connolly, Director of Product Design at Intercom.

Obviously, huge problems are manageable when they are broken down to smaller ones. Before we explain the whole process, start with who is going to be involved in the creation and how the team will collaborate. Once the team is assembled, then you can think about the colour, typography etc. Your visual design language will be the foundation of your UI library and be a file of components that can lead to fast creation of an interface.

Let’s walk now, step-by-step, through the process of creating your design system.

Team composition

Before beginning work on your design system, take a moment to think about the team you’ll need to bring it to life. Who needs to be involved? Spoiler alert! You’re going to need more than just designers.

Here’s a quick list of the disciplines that can be represented in your team to create an effective design system:

  • Designers to define the visual elements of the system
  • Front-end developers to create modular, efficient code
  • Accessibility experts to ensure your system conforms to standards like WCAG
  • Content strategists who can help the team nail the voice and tone of the system
  • Researchers who can help you understand customer needs
  • Performance experts who can ensure your system loads quickly on all devices
  • Product managers to ensure the system is aligned with customer needs
  • Leaders (VPs and directors) to champion and align the vision throughout the company, including up to executive leadership

The right team of experts guided by strong leadership will help you to achieve your goals.

Customers Interviews

The first and most important aspect of any process is the research. The design system should be used by all the teams. By interviewing customers, you will be able to identify the pain points, define actions and be able to focus on the most important things. You need to have input from all the sides of your business as the design system must satisfy all. It is a necessity to get the thoughts of the executives and managers as there might be some invisible goals and metrics that will enhance success. An example can be an improved UI quality.

Having all the interviews and the outcomes it is time to create an inventory. There are 2 types that a business must create: 1) the inventory of visual attributes (spacing, colour and typography) and 2) the inventory of UI element (buttons, cards and modals). We will analyse each compartment in the next articles.

The next article in the this three-part series will arrive next week! Stay Tuned!