Design Systems: What is a design system?

A design system is a systematic and scalable approach to product development complete with guidelines, principles, tools and code.

 

A design system is more than a component library

Design systems are not a ‘nice to have’ but foundational to succeeding in the new digital economy. With multiple brands, product lines, and a global customer base, today’s business leaders can't play guessing games with their digital experiences.

A design system is a “system of systems” with a set of operational processes that offer a library of visual style and components documented and released as reusable code for developers along with tools for designers. A design system also bakes in guidance on accessibility, page layout, editorial, branding, data visualization, UX patterns, and other user experience considerations. 

A design system is not a singular entity but made of 6 separate pieces that include:

You've built a design system; now what? Just building one isn't enough—you need to operationalize it. Next steps include driving adoption, establishing a governance model and cross-functional team collaboration, and implementing automated workflows. Since design systems are intelligent constructs that evolve over time, implementing lean processes to accelerate scaling and transform your design system is the key to success.

A design system should be adopted and supported by all teams responsible for creating experiences. It empowers teams to deliver innovative digital products, and features can be developed and shipped faster and more efficiently for a more cohesive customer journey.

 

Read more on this topic

What is a design system?

Read more 

The six pieces of a design system

Podcast: What is a design system?

Design Systems: Why it's important to have one

At scale, design systems are necessary to ship on-time & on-brand. They significantly improve capital efficiency by reducing waste and lead time.

 

 

A design system enables product teams to focus on customer problems instead of time-consuming specifications, duplication of effort, and long QA work. It saves time and money while enabling getting to market faster and with higher quality.

A design system helps: 

  • Reduce lead time 
  • Improve speed to market
  • Unify customer experience
  • Improve collaboration across teams and brands
  • Provide easier onboarding for new hires and vendors
  • Scale your ability to build on-brand market-leading products

 

As the number of teams within organizations increases, productivity can suffer because of:

 

As the number of teams increases, customer experience can suffer as a result of:

  *

 

If you think you can’t justify the cost, you’re not looking to the future

Investing in a design system today means you spend less tomorrow. Building and launching large-scale, complex applications without one creates waste—each time you create a new experience, you’d have to build from scratch. Why spend time building the same components and features that your team built three years ago?

Let’s look at an example of how much it costs for three people from the same product team to build product buttons from scratch. Then, let’s see what happens if you start to scale that model for other product lines. 

 

 

Design systems improve capital efficiency

Your business is an ecosystem. It’s inefficient and unrealistic to think you can keep all your talent in-house. A design system allows you to leverage cost-effective, outsourced partners, knowing your experiences will be consistent, high-quality, and scalable. 

 

Read more on this topic

Webinar: A business case for design systems

Watch now 

Why do I need a design system?

What are the top 3 organizational impacts of a design system?

The top three business benefits of a design system

Can a design system align an organization?

Masterclass: Does creating your customer experience save you money?

Design Systems: How to get started

Jumpstart your design system build by using our open-source, fully flexible, and scalable accelerator kit.

 

 

Building a new design system from scratch isn't easy. You have to pick the design tooling, architectural patterns, platform for building & testing components, and a documentation platform. And with most organizations having a mixed set of front-end technologies, this can cause friction when adopting a design system or going through a redesign.

 

Flexible and focused

Radius is our design system framework and ecosystem—an evergreen collection of open-source tools and methodologies that accelerate projects for design system teams. Radius provides the foundation for a complete end-to-end design system, not just the components.

1. It’s flexible

Fit your design system build to your organization’s own ecosystem of tooling, processes, and vendors, and scale as your product lines grow.

2. It’s focused


Radius solves your business case and empowers you to communicate your brand, rather than focusing on building as many components as possible.

With Radius, you can build products at scale and enable teams to see the end-to-end flow for all design system processes.

 

Design systems, accelerated

Fully on-premise and under your control, without any subscription or hidden costs.

Learn more about Radius 

 

Regardless of how you start, here are some important tips:

1. Put customer experience first

A design system is a product that provides a platform for building customer experiences. When building a design system, you should “walk backwards” from the products that will consume it. This way, you’re not building a system that you hope helps the experience, or worse, building a system that limits the customer experience—a common implementation mistake.

2. Build to evolve, not to last

Ship immediately to consume the design system in real products as quickly as possible. After all, a design system is a product, not a project. Use a lean-agile, iterative development process focused on short cycle times and rapid feedback. Consuming teams are your primary source of feedback and it will guide you in evolving the design system to meet your customers’ needs.

3. Deliver narrowly end-to-end then scale

In large organizations with multiple brands, platforms, and LOBs, a design system-of-systems approach is the best strategy. Begin by delivering an end-to-end design system to enable building the first end-to-end flow, and then scale across all brands. This approach creates the MVP version of each design system component (design kit, documentation site, etc.) first to unlock the core design system team to work in parallel to build out each brand kit.

 

Read more on this topic

Design systems: Start from where you are

Read more 

Preparing for a design system: Visible, consistent and changeable components

Design Systems: Challenges of scaling

When attempting to scale a design system, most organizations fail

 

 

Why?

#1: There are multiple incomplete component libraries that are considered a complete design system

Our tip: Build a system of systems

Build an intelligent system of systems, instead of a glorified component library. If you have multiple design systems or component libraries, focus on a narrow and specific global version for a single brand and a single product. Strive to ship immediately to consume the design system in real products as quickly as possible so you can grow your system based on user feedback and needs. Don’t forget to create all the necessary processes to make it a pragmatic end-to-end experience before you would start distributing it to local teams, solve for other products, brands or the majority of snowflakes.

#2: An outdated design system that only solves for a small percentage of use cases was built originally

Our tip: Build to evolve, not to last

A design system is a lean product with its own lifecycle; thus it should be built and managed as such. Consuming teams are your primary source of feedback and will guide you in evolving the design system platform. Create a lean governance structure around your design system to provide guardrails on how teams can add new components, solve for snowflakes, and grow your design system in the rhythm of your organizational and product portfolio growth.  

#3: Not enough people are using and contributing back to the design system

Our tip: Prioritize & drive cross-functional adoption

Driving design system adoption is a challenge many teams face. Typically, the time and effort needed to do it are severely underestimated, causing most design system implementations to fail.

Drive adoption and internal design system marketing from day one. You can do this by educating teams using formal role-based training. Or, what we believe is much more efficient to do is organize dojos to facilitate immersive learning, create practical knowledge, and immediate involvement in the design system. If you have a mature design system and your teams aren’t using it, you need to figure out why. Have a candid conversation to uncover the root of the problem. Perhaps your design system doesn’t cover enough use cases or it isn’t user friendly enough.

#4: The expected ROI is lagging

Our tip: Measure value the right way

A design system only saves money when it’s being used. The more it’s used, the more money it saves. However, it’s easy to measure the wrong success factors. Oftentimes, organizations measure success by the number of components, forgetting what truly matters: the leading indicators for usage (adoption rate) and measuring how you accelerate delivery while driving outstanding user experiences. If you focus on leading indicators instead, you’ll gain insights on where the ‘leaks’ are in your processes. As a result, you can strategically target the gaps to achieve the economic results you’re after.

#5: Your design system is becoming more disorganized over time

Our tip: Implement lean processes

A design system without lean processes baked in will fail. Your organization needs guardrails to teach users how to consume and contribute to the design system in a way that adds value, aligns with organizational goals, and drives the aspired culture. If you work for a global company or geographically dispersed teams, this becomes even more important. Set up lean governance structures and clear workflows for how to use the design system, how to contribute new code/design to the design system, how to keep documentation up-to-date, how to deal with multiple brands, and how to handle snowflakes.

#6: Your organization is lacking certain capabilities, experience, or tooling

Our tip: Work with an experienced partner to help avoid common mistakes 

Many product teams lack the skills required to design and code high-quality, reusable, and accessible user experiences. It’s important to build usability, accessibility, and coding best practices into the design system to enable ease of use and learning. For example, use a dynamic documentation tool like Storybook as a developer sandbox to establish clear guidelines, allow for experimentation. 

 

Read more on this topic

5 design system fails—and their fixes

Read more 

Design without the ‘system’: Why design system adoptions fail

Is your design system performing?

Five reasons your first design system will fail

Side-loading a design system: Scale knowledge sharing without sacrificing delivery speed

Governance by design: Building successful design systems

The pressure is good for you: Untold stories from the design system

Can a design system align an organization?

Previous Chapter

 How to get started

Design Systems: Driving adoption

A design system needs end-to-end adoption across digital teams to maximize ROI.

 

 

Organizations often over-invest in the visible parts of the system (components) but under-invest in documentation, operational tooling, and process changes required to drive adoption. To create a streamlined world-class design system that achieves business outcomes at scale, organizations need to strive for end-to-end adoption.

The more times a component is used, the more time and money is saved and the more operating costs are reduced.

Once systems and operations are established, the best way to evolve a design system is by prioritizing changes that help 1) new teams adopt it, and 2) existing consuming teams extend the amount of design and code components used in their work.

Adopting a design system cross-functionally in technical and non-technical user groups requires a certain level of cultural change anchored by a new way of working. Transitioning to this new way of working should happen continuously, allowing time and space for behaviour and mindset changes on an individual level supported by the right information, education, and ongoing support. You need to think of how you’ll continuously: 

Inform & Prepare

Tip: Hold regular town halls to update employees on the latest design system developments—get them excited to ensure everyone is aligned on the overall mission and goals of the business. This also provides an opportunity to ask for feedback, as well as clarify areas of concern.

Upskill & Enable

Tip: In addition to regular onboarding programs and training, organize dojos to facilitate immersive learning, create practical knowledge, and encourage immediate involvement in the design system.

Coach & Support

Tip: Build an engaging community of practice (CoP) around design systems to provide a forum for employees to ask questions, share new ideas, inspire each other, and participate in the design system product throughout its different life stages. 

 

How can you measure adoption?

One of the best KPIs to measure adoption is the market share of design system components within the codebase. Software products are delivered as code, and the design system is shipped as a part of it. Measuring how many times a design system component is used in code, and comparing it to non-design system components is akin to measuring the market share of a product. So in short, track design system performance against internal competition.

To help with this, we built Radius Tracker, an open-source tool for collecting usage statistics. It automatically collects and analyzes component usage data from React projects. You can run it against all your product codebases at the same time to find out how people use your design system and non-design system components.

Visit the Radius Tracker, our open source tool for collecting usage statistics.

Fully on-premise and under your control, without uploading anything to third-party servers.

Learn more 

 

Read more on this topic:

Market share: The second-best metric to measure the success of a design system

Read more 

Measure the adoption of your design system with our open-source Radius tracker

React Summit 2022: Find our if your design system is better than nothing

Design without the ‘system’: Why design system adoptions fail

Podcast: Adoption of a design system

Design Systems: Practitioner content for experts

We’ve worked on countless design system initiatives. 

Eager to learn more? We have years of experience helping organizations build design systems. Here is more content to help guide your team’s understanding of design systems.

 

For product designers:

Preparing for a design system: Visible, consistent and changeable components

Read more 

Figma enables Agile design: Why we love this tool

Step-by-step with Figma: How this tool supports designers building design systems

The role of research in design systems

Can a design system be accessible?

How to be content with content: a guide to writing for design systems

Systemizing visual design QA

 

For developers:

A developer's guide to design systems

Read more 

Everything you need to know about web components: Part 1

Everything you need to know about web components:  Part 2

Flattening deep hierarchies of components

Styled components, styled systems and how they work

Downshift: The answer to building accessible and visually flexible React input components

Mixin design tokens

Van Gogh, InVision Design System Manager and a new NPM package

Previous Chapter

 Driving adoption

Design Systems: Our experience

We partner with global firms to solve their most complex product and experience challenges, and accelerate the pace of their production. 

 

Wabtec

How Wabtec empowered design and development to mutually inform a Design System.

Read case study 

Staples

Reducing the launch time of a re-branded and re-imagined in-store digital kiosks experience by 4+ months.

Global retail company

Transforming one of the world’s largest retail companies into a digital first organisation.

Fashion retail companies

A comparative case study between a sportswear and a casual wear company

 

Subscribe to upcoming articles & events