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?
Defining what a Design System is and what it means for an organization can be tricky. In this post, we'll take the conversation of Design Systems past style guides and component libraries and get into breaking down silos between development and design.
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
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.
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
Preparing for a design system: Visible, consistent and changeable components
Rebrand & scale your website effortlessly: see design tokens in action
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
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?
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.
Read more on this topic:
Market share: The second-best metric to measure the success of a design system
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
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
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
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.
Staples in-store digital kiosks
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