A design system is hard to summarize. It’s perhaps easier to explain why design systems are important, and what they help us to do, than to explain exactly what they are. However, here’s my attempt at a definition:

What is a design system?

Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how.

I should stress that the design, build, and “rules” of a system are not set in stone — they are a constant work in progress, open to iteration to improve, adapt, and scale.

Designing and building on-brand, quality, and consistent digital products at scale is hard. It’s even harder when your designers and engineers span different product teams, departments, and locations. Success requires more than an assortment of Photoshop, Sketch, or Figma files, style guides, a print brand book, pattern libraries, and whatever else your team may be working from. You need a single source of truth.

Why are design systems important?

Here are just some of the things design systems help us with:

1. Efficiency and speed

Design systems allow us to work faster and more efficiently. They streamline the design and development process — decreasing the amount of time it takes to design, build, and ship new websites, products, and features. They also enable teams to rapidly prototype and experiment with ideas in high fidelity — ultimately saving the business time and money.

2. Consistency and user experience

Design systems help us design and build on-brand, quality digital products. Rather than working with a variety of styles and slightly differing approaches, teams are able to follow guidelines and stay consistent. This ensures interfaces are more predictable and accessible, which fosters trust in users and helps with conversion and retention.

3. Creating stronger brands

Design systems help weave brand identity throughout a product in a consistent and maintainable way. I’m a big believer that brand plays a crucial role in design systems. This is why I recommend thinking and designing holistically — considering the brand and product as a whole, as opposed to tackling problems one-by-one and hoping the pieces will fit.

4. They free us to focus on what matters

Design systems help designers and engineers spend less time needlessly creating the same things over and over — slightly differently every time — and more time focusing on user research, problem-solving, and building great products. They also help keep feedback focused on the user experience, as opposed to debating padding, colors, and type choices.

5. Organization

Design systems keep our work organized, which makes everything easier — from accessing common design elements in a master library, to using a uniform approach for the structure and naming conventions in the code, to ease of maintenance, iteration, and syncing of the design and code.

6. Speaking the same language

Design systems help our teams communicate more clearly by establishing naming conventions and consistent terminology across the design and code.

7. Source of truth

Design systems and documentation are a source of truth for the whole team. A well-designed, implemented, and maintained design system sets high standards for your product and your process. Everyone becomes accountable for upholding these standards.

When do we need design systems?

Design systems are always useful, but the “need” for a design system varies greatly depending on the nature of the business, product, or project.

It’s a reasonably common experience for design agencies, small companies, and freelancers to design and build without a design system, then move on. This is often fine, and it works for many companies. The resulting product may be online for only a couple of years before it’s replaced when change is needed. There’s nothing inherently wrong with that process. It’s cost-effective, simple, and fast.

Design systems are useful when companies aim to iteratively work on a product over time — to not just build once, and replace later. This is why they’re more frequently needed for products than marketing websites.

Design systems are especially useful when a team of people are working on the same product. I can’t stress this point enough.

“Software is often built by teams — sometimes incredibly large teams — of people. The challenge to create coherent experiences multiplies exponentially as more people are added to the mix. Also, over time, no matter how consistent or small a team is, different people will contribute new solutions and styles, causing experiences to diverge.” — Quote taken from an article by Karri Saarinen.

Startups are a little different. For startups, a design system can be a low priority, because everything tends to be wide open to radical and fast changes of direction. They rarely have the stability, security, budget, and time frames that established companies have. This isn’t to say startups shouldn’t be designing systematically; they just need to be more realistic about their priorities. That said… start as you mean to go on! If you create a design system from the start, you’ll avoid legacy problems later on.

A recent trend is to bring design and development in-house. And the larger the company, the larger the product teams (for better or worse).

My time spent working with in-house design environments/people/teams/cultures taught me a lot about the importance of design systems, and the intricacies of designers, developers, and product managers working together.

Working on products that involve lots of people requires a different approach than projects with smaller, leaner teams. It’s more complicated, and there’s more that can go wrong. The expression, “too many cooks spoil the broth” becomes a little too real at times. Every member of the team has their own preferences about what typefaces, colors, buttons, formatting, spacing, frameworks, or naming conventions you should use.

It gets messy, if you allow it.

Design systems bring structure, accountability, and order to this chaos.

Leading the way

For me, making the transition from freelance design into an in-house design leadership role was a learning experience, to say the least. Overseeing other people doing the work — or working with a team of people on the same product — is very different to being the one person doing the work!

Design leadership and teamwork go beyond just handing off design mock-ups, style guides, and specs. You need to find a way to create — and effectively and openly communicate — common, shared design guidelines, so everyone works in the same direction. The alternative is everyone does their own thing — reinventing the wheel, bloating the code, and damaging the brand and product user experience. And sometimes, falling out in the process.

When you work on a team, your design thinking is useless if only you know about it, or if it’s disruptively different from the approach of your colleagues. You need to work together in the same direction. As other chapters in this book will demonstrate, a design system genuinely helps you to do this.

The real test…

The real test of a design system is whether the design and build mirror each other, and if you and your team consistently use the elements you establish rather than needlessly creating new ones.

A successful design system liberates your team from reinventing the wheel. It allows you to focus on what really matters: learning and improving digital products to meet user and business goals. Heck, you might even create something amazing that you’re all proud of!