Initial Idea

So you heard about this thing called Design System. I guess you're probably a Director of Innovation (or maybe you have a fancy C-suite title) at your organization and someone tried to sell you this thing called a design system. The reason for this article is to give a simple explanation about this hugely successful tool for non-technical people.

This article is not written for designers nor developers. This is intended for managers and business people.

TLDR;

From a business perspective, a Design System is a toolbox for your production team(s). Its core benefits are increased production efficiency and product quality. Pretty great, right?The caveat for a tool with such positive outcomes is the high level of commitment necessary to make this tool effective. Said that, the ROI is very positive independently of your organization size. Although, it is important to highlight that Design Systems are boosters for economies of scale, making them very appealing for larger organizations.

Longer Explanation

Over the past years, anyone that works on the digital product world heard about Component-based interfaces. In many cases, this was the main argument to adopt React. To describe this to non-technicals, we often rely on the metaphor of Lego Blocks. We see this in all major frontend technologies such as React, Vue, Angular, WebComponents, etc.

Using that same analogy, a Design System will be a box with your Lego blocks in it and the instruction manuals to build different things.

That was my "explain me like I'm five" take. The adult version of it would be something like this:

"A Design System is a collection of coded components and documentation specifically built to help streamline the production of digital products in a given organization."

The medium to long-term results of a design system consist of better components, cheaper/faster development processes, better User Experience through interface consistency, increased accessibility, performance, etc.

By reusing the Design System components we speed up the frontend development process, freeing up the workforce to solve bigger and better problems.

A few examples

Material Design by Google

Carbon Design System by IBM

Lightning Design System by Salesforce

USWDS by USDS

Gov.uk by GOV.UK Design System team