page name
empowering brands to grow with no-code
Live site

Design Systems: What They Are and Why They Matter

Did you know that half of customers are not happy with the experiences most companies are giving them?

In the increasingly complex world of design, that’s not surprising. As teams grow and new tools get introduced, it can be too easy for product teams to lose their way. Before you know it, members of your team are creating design decisions ad hoc. Suddenly, developers and designers can’t seem to agree on a design element. Workflow bottlenecks occur. Inconsistencies in design implementation start to rear their ugly heads.

Chaos emerges.

The result? Products that users don’t care about.

How do you make it easy for your marketing, design, and engineering teams to do the right thing by your customers? How do you keep everyone aligned? How do you ensure that everything they do is in service to your organization’s overarching goal?

This is where Design Systems come into play. 

What is a Design System?

Simply put, a Design System is the single source of truth containing all the elements that help product teams design, conceptualize, and develop products that deliver satisfying and consistent experiences to users. 

When we say ‘elements,’ we’re talking both tangible elements and non-tangible ones, which are:

  • Tangibles. Tools, patterns, reusable UI components, UI design kits, UX guidelines and components, code implementation, and brand guidelines, marketing guidelines, etc. 
  • Intangibles. Abstract elements such as brand mission, vision, core brand values, shared design philosophy, mindset, etc.

We know that’s quite a lot to take in. But Emmet Connolly, Director of Product Design at Intercom, put it quite nicely by comparing design systems to “a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”

As you can tell, design systems are a broad discipline that encompasses every aspect of product creation. To have a better understanding and appreciation of what design systems are and how they help organizations create better user experiences, let’s first talk about what it is not.

Design Systems vs Brand Style Guide vs Pattern Library

Too many people are using the terms 'design systems', 'brand style guide', and 'pattern libraries' interchangeably, so let’s unpack their differences.

A brand style guide is a set of rules on how your brand should be presented to the world. This includes visual (logo, color palette, imagery, fonts, etc.) as well as written content (voice and tone).

A pattern library (also called ‘component library’), meanwhile, is a collection of UI (user interface) design elements. These include slideshows, news listings, social media features, navigation, and more.

Look at it this way: Brand style guides and pattern libraries are both subsets of design systems.

If you want to create a "full-stack design system," you can start by creating a pattern library. Or a brand style guide, if you prefer. You can have it both ways.

So if I have both, does that mean that I already have a fully functional design system?

No. There’s a missing element.

To get a full grasp of how a design system works, you need a “how, what, why” approach. If your brand style guide answers the ‘how’, and your pattern library answers the ‘what’, then which one answers the ‘why’?

We’d like to call it the  Design Purpose. As the term suggests, Design Purpose is more concerned about ‘The Big Picture.’ It asks questions like “Why are we doing this?” “What are the specific goals for this project? “What pain points are we trying to solve? “What’s the brand promise?” 

When you bring all these elements together, you get a full stack design system that not only provides designers and engineers with the building blocks needed to deliver great user experiences but also with a shared language that allows them to work more collaboratively towards a common goal.

Benefits of Design Systems

Now that you have a general idea of what design systems are and what they do, let's dive deep into the benefits of using one.

1. Improved collaboration

When developers, marketers, and designers are guided by a “single source of truth,” everyone is made aware of each other’s roles, bringing a strong sense of transparency into each stage and aspect of the product development process. Because everyone's using the same system, cross-functional teams are able to speak the same language, improving communication between departments tenfold. This not only eliminates inconsistencies and bottlenecks in the workflow but also ensures that every step is contributing to the organization's overarching goal. 

2. Consistent and better user experiences

A design system isn't just a repository of your design components, but it also serves as an asset management tool. By making branded assets readily accessible in the design system, teams can have a shared understanding of how to implement UX design elements through the entire product creation process. A design system also gives teams across multiple teams a shared visual language, making it easy for them to deliver consistent and better user experiences for users.

3. Better efficiency and reduced expenses

As your teams continue to take on new design projects, they will find themselves using the same components and patterns over and over again but in different combinations when creating different types of products.

When you have a design system in place, designers and developers can work with pre-designed reusable UI design components to create web interfaces on the fly, eliminating the need to write code from scratch. Design systems also prevent unnecessary back-and-forth between developers and designers since each part can easily spot visual inconsistencies in the mockups before they become a problem down the line. 

4. Easy maintenance of codebase and design assets

A design system also makes it easy for both designers and developers to maintain and update the organization's code base and design assets. In cases where you need to update a functionality or a design element in your next product update, you can automatically make changes to existing designs by updating the system itself. This translates to clean code and clean designs because you’re making updates in a way where changes are not overriding each other.

Examples of Design Systems

Do you want to see what a design system looks like? That’s easy. In fact, some of the biggest organizations in the world have created design systems and made them open to the public (if you’re in a startup, making your design system open-source is a good way to raise money via substantial investment rounds from Venture Capitalists and Angel Investors!).

Give some of them a look to get a feel for the type of design system you want your organization to have should you decide to implement one.

  • Material Design by Google. Introduced by Google in 2014, Material Design has evolved now considered as the quintessential collaborative interface design tool.
  • Atlassian Design. The level of detail is amazing. The slick design is also something to write home about.
  • Pajamas Design System by Gitlab. This is where the Gitlab community contributors come to play, so to speak.
  • Polaris. Shopify’s design system has shown time and time again that it’s the best in creating great commerce experiences.

How Refokus Implements Design Systems

Here at Refokus, we’re pretty serious about making digital experiences radically better, and it's incumbent on us to harness the best available resources to make it happen. The decision to create design systems for our clients is a no brainer.

As the world of design continues to evolve, more and more companies are realizing how instrumental design systems can be in creating consistent, powerful user experiences. They know they need design systems to scale their services seamlessly in the face of bigger projects. 

Building a robust design system is not easy, however. But as adherents of design thinking ourselves, our design team has been using the product design approach to great effect. 

And thanks to Figma’s robust collaborative features, we are able to create powerful, scalable design systems that help our clients achieve their product goals in less time. After defining the design in Figma, we implement it either in Webflow, in React, or both, depending on the client’s needs.

Design Systems in Webflow

Webflow is everyone's new favorite design tool, and for many good reasons. For one, it provides users with an intuitive framework to build simple websites visually. This allows marketing teams (and anyone without extensive design training) to create websites with ease and in less time. 

Webflow's new Symbols feature, in particular, is a game-changer for implementing design systems as it allows teams to overwrite the content (text, images, links, etc.) simply by dragging symbols from their library. It's like building a big Lego structure where teams are allowed to go nuts without the risk of breaking something. Building a website has never been this easy and fun!

That said, one has to know Webflow inside and out to create high-quality designs that delight customers and make brand stories come alive. We knew this early on and became one of the first certified Webflow experts as a result. As a Webflow official partner, we’ve helped empower businesses by creating unique experiences that are tailored to their customers’ needs.

For more on this, you can read the article we’ve published on Webflow’s Blog: “Building Design Systems for Marketing Teams” 

Produck’s Design System sets guidelines for how the brand should manifest itself across all mediums.

Design Systems in React

When building design systems for web applications, our preferred technology is React. By using React, we were able to transform our design system into reusable components at the most atomic level. This, in turn, allows us to create our own React library (which we will soon open source!) which we used as a base for our core functions, ensuring a great user experience and faster loading times. We also keep all components organized and accessible to the whole team by using Storybook.

Design system workshops

Having a robust design system in place is not enough to turn your organization around. We won’t simply hand you a design system and let you run with it without the proper training and guidance. 

It is for this reason why we conduct workshops. On top of educating our clients about how to use their custom made design system, we also help them re-establish their design philosophy so everyone can tailor their processes accordingly. We also have specific workshops to help marketing teams get the most out of Webflow’s component library. Last but not least, we take a deep look at the solutions already in place and then figure out how best to apply them towards adoption in the context of the company's overall vision.

Final Word

Make no mistake, design systems are shaking up the exciting world of product design. It can make the lives of your product leaders, marketing managers, developers, and designers a thousand times easier. More importantly, a robust design system is key to true collaboration, efficiency, and quality. Creating a design system doesn’t only give your teams guidelines to follow, but also provide them with the framework to launch amazing products and websites people love. After all, user experience is the most important metric there is.

Published on
July 2, 2020
Are your product teams not seeing eye to eye on design projects? Learn why a design system is the single source of truth you need to create digital experiences that fuel your brand.