• Design Systems
  • Business

Design Systems 101

A straight answer for non-technical people on what it is and why it might be a good idea

So you heard about this thing called Design System. I guess you're probably a Director of Innovation or have a similar title at your organization, and someone told you about design systems. My objective with this article is to provide a non-technical explanation about this hugely successful tool.

I didn't write it for designers nor for developers. Instead, it is intended for managers and business people.

TLDR;

A Design System is a toolbox for your production team(s). Its core benefits are increased developer efficiency and consistency, resulting in better product quality and User Experience. Pretty great, right? The caveat 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 essential to highlight that Design Systems are boosters for economies of scale, making them very appealing for organizations with multiple websites.

Longer Explanation

I bet you heard your Dev Team manager saying they are overburdened and might need more people. That might be a legit issue, but in many situations, developers are stuck in sub-optimal processes, especially regarding frontend, eating up their time on repetitive tasks.

Frontend issues are especially prone to these problems since they require input from two distinct skill sets. Designers, solving visual communication problems, and developers implementing these solutions within the technical frameworks. So these processes end up taking up much time from your team, sometimes being one of the culprits of their overworked lives.

Over the past years, anyone that works in 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 significant frontend technologies such as React, Vue, Angular, WebComponents, etc.

Using that analogy, a Design System would be your box of Lego blocks and the instruction manuals to assemble different things.

That was my "explain to 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 for a given organization."

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

The Design System will provide your dev team with coded components (Lego blocks) that already solve smaller repetitive problems such as buttons, headers, typography, etc., and guidelines (instruction manuals) on solving larger problems using the components framework.

These methods speed up the frontend development process, freeing up your workforce to solve bigger and better problems and saving money in three possible ways:

  1. Faster iterations improve your product faster, resulting in more adoption, more users, and ultimately more profits.

  2. Better UX improve consistency and accessibility, resulting in more satisfied customers, increasing adoption, and so on...

  3. Smaller teams, with streamlined processes, your team will be more efficient, and maybe you will not need to hire those extra developers you've been asked for. As we all know, throwing more people on a project won't always result in faster outcomes since there ate several diminishing returns as teams grow.

After all, you can't make a baby in one month by having 18 people on it. That's just not how it works.

A few examples

Here are a few examples of widely successful design systems out in the wild. You might have heard of them, and you might have used them (especially the Material Design one)