4 Reasons I'm Excited About Design Systems

Cover photo by Balázs Kétyi on Unsplash

Before I get into my fan-boy rant about the multiple benefits of Design Systems, I’ll try to give a brief intro to what a Design System actually is. Or at least what I mean when I talk about Design Systems, since the definition isn’t as straightforward as one could hope.

The problem of giving a clear definition of Design Systems isn’t for lack of information, though. You’ll find plenty of articles, online courses, books, and industry experts offering their take on it. I suggest reading this article or perhaps checking out this comprehensive guide. The problem is that people don’t really seem to agree on the definition. This probably sounds familiar to a lot of you, working with ambiguous terms like UX Design, Interaction Design, Product Design, and Design Thinking…

For the sake of this article, I’m thinking of a Design System as:

A set of reusable UI components (e.g. buttons, icons, menus, tooltips, headers), with a set of style guidelines (e.g. for padding, dimensions, alignment), as well as any additional information needed for Designers and Developers to effectively create interfaces and user experiences (e.g. rules to always adhere by, rules that can be broken, and guidelines by which new elements will be generated in the future).

This is by no means a comprehensive definition, and I know other people would offer a different one. However, for what I’m about to write, it’s really not crucial that we nail the definition upfront. The benefits I’m going to list below can also be achieved by a UI Kit, a Style Guide, a Component Library, or some other “alternative” to a Design System. They may not provide all the benefits at the same level as a Design System, as a Design System is generally understood to be more comprehensive and powerful than the other options: the one that combines the UI Kit, Style Guide, and Component Library into one entity. However, each step you make toward a full-fledged Design System can at least give you some of the following benefits.

And with all that out of the way, let’s get into them.

‍

The 4 main reasons I’m excited about Design Systems

‍

Reason #1: Increased productivity

Let’s just go straight to what’s arguably the most commonly cited and compelling benefit of a successfully implemented Design System. A good Design System enables you to speed up your Design & Development process in a few different ways, so if the mentioning of increased productivity didn’t get you excited already, consider the following possibilities:

Faster UI design
This one should be pretty obvious. If the color palette, font family and styles, grid system, buttons, and other UI components are already decided and designed, it’ll take you less time and effort to design a handoff-ready UI mockup of whatever you’re working on.

Go straight from wireframe to Development
Handing off anything but pixel-perfect UI mocks may sound like a scary prospect to most Designers, but stay with me on this one… We’re used to thinking that this scenario will require a Developer to freestyle on the UI, which can indeed be uncomfortable for both the Designer and the Developer. However, the key idea behind a Design System is exactly that it should eliminate the need for UI freestyling, because the most common UI elements, your color palette, grid system, layout rules, etc. have already been defined and implemented in the Development workflow. Thus, if you want something new implemented, or make a change in the existing design, and it can be done with the components and guidelines you have in your Design System, your Developer colleagues shouldn’t need more than a properly created wireframe and a brief talk about the task.

Go straight from idea to final UI
Another way of speeding up the Design process is to skip the low-fidelity step. Sketching and wireframing can be super valuable for exploring potential solutions, but sometimes the challenge you’re solving may be so trivial (or your deadline so close) that you might as well move straight from idea to high fidelity. With a good Design System, creating a high-fidelity mockup can be just as fast as creating a wireframe.

Eliminate the need for clarification of UI mockups
If your UI mockups are designed with the correct use of the UI elements and guidelines in your Design System, there shouldn’t be a need for clarification when handing them off for Development. I know the Developers out there like the sound of this!

Eliminate the need for UI tweaks during or after Development
If I haven’t sold you on the value of a Design System already, I’m pretty sure this will do the trick: What you hand over, and what is implemented, will actually look the same! Feel free to take a moment to imagine that before you read on…

Enable more people to do UI Design
With a good Design System, doing UI Design gets a whole lot easier. You may not give your CFO Editor access to Figma or a license to Sketch, but non-UI Designers or other team members may want and be able to go in and create UI mockups in the same way as they now visualize and communicate ideas with low-fidelity tools. As mentioned above, a Design System can make working in high fidelity just as fast, easy, and accessible as sketching and wireframing.

‍

Reason #2: Consistency

Increased speed in the Design and Development process often leads to less consistency. With a Design System, however, what enables increased productivity is also what improves the consistency in your user interface and experience. Both Designers and Developers will know which UI guidelines to follow and components to use. For instance, Design and Development become less about designing a button and more about using a button that’s already been created. This ensures consistency throughout your product and other touchpoints, improving the overall user experience (and satisfaction on the team).

‍

Reason #3: Easier onboarding of new team members

I haven’t yet had a chance to onboard a new Design team member since we created our Design System at SimpleSite, so I can only share what I’ve heard from Developers in the company and from other Designers. What they all seem to agree on is that a Design System makes it significantly easier for a new team member to get up to speed with how things are done. In the case of a new Designer, your Design System will basically let them sit down and design high-quality interfaces aligned with your guidelines from day 1.

‍

Reason #4: More time for the big Design challenges

The overall outcome of a Design System, and of all the benefits described above, is that creating the UI of your product will take less time. Less time for designing it, less time for experimenting with it, less time testing it, less time building it, less time adjusting and approving what’s implemented, less time fixing inconsistencies… So, what do you do with all this extra time?

If we look at Design as an overly simplified linear process, one very natural place to focus your time and energy is in the part of the process that comes before UI Design. You’ll have more time for Research to understand the actual needs of your users, make sure you’re working on the right problems to solve and get inspiration for whole new features or products you hadn’t thought of. You’ll have more time to explore potential solutions to the problems you’ve identified, instead of going with the first idea that comes to mind. You’ll have more time for co-creation or other workshops. You’ll even have more time to experiment with new ways of working, improving your Design process, and trying out new tools to help you do even better design. HubSpot, with its design language HubSpot Canvas, is a great case study to highlight this.

This leads me to perhaps the most common concern regarding Design Systems, which I think is an appropriate note to end on:

Design Systems kill creativity!

I hope you see by now that your role as a Designer will still involve plenty of creative work. While it’s true that you will no longer be designing color palettes, icons, and button styles on a daily basis, you shouldn’t worry about losing your creative outlet either. Instead, you should be excited about getting to apply your creativity in new ways and at different stages of the Design process.

‍

This article turned into a much longer one than I anticipated, and now that I’m wrapping it up, I feel certain I’ve missed a ton of additional benefits and important perspectives. The fact of the matter is that a Design System can be extremely valuable in any type of organization and team, as long as you’re willing, able, and allowed to put in the time and effort it takes to create and implement it successfully. How to do that is something I’ll try to address in a future article. Not that there’s a lack of valuable content on the subject though… Here are just a few of my favorite articles:

How to construct a design system

Creating a UI Component Design System (step-by-step guide)

Building a UI Component Design System (using Uber, Airbnb, Shopify, and Pinterest as examples!)