Best practices to scale design with Design Systems
The business benefits of good design are no longer up for debate. Research from Forrester, the Design Management Institute, McKinsey & Company, and the UK Design Council has found that firms prioritizing design have more loyal customers, better stock performance, higher revenues, and larger valuations. This presents an exciting opportunity for design teams to expand their influence and impact the business in new and bigger ways.
Forrester’s research found that over half of design teams are seizing the opportunity to influence strategic decisions by answering questions like, “What core needs do we serve as a business?” and “What do our various products and services need to do?” Simultaneously, design leaders are continuing to deepen and scale their digital experience design capabilities.
But the surge in interest in design creates a challenge: With demand for design higher than ever before, how does the design team scale while also freeing up more time for designers to work on more projects? For many firms, design systems are the answer. Why? Design systems help firms create cohesive experiences, increase speed-to-market, improve performance, bolster product accessibility, and power design at scale. And in Forrester’s annual global survey of design teams, the number of design teams that reported using a design system rose from 50 percent in 2019 to 65 percent in 2020.
As firms work to unlock the benefits of design systems, Adobe commissioned an independent study with Forrester to understand what sets successful design teams apart. According to Forrester’s study, firms with mature design systems do several things differently.
Understand the five key elements of an effective design system
Just about every firm has a brand style guide, and many firms have reusable component libraries. But these two things alone do not make a design system. Leading design teams create, and continuously evolve, five key elements:
- Design principles: An agreed-upon framework for making design decisions that aligns with — and can be used to articulate — the company’s customer experience (CX) vision and brand. (Example: Shopify’s experience values)
- Foundations: Standards for use of colors, typography, motion, illustrations, iconography, and more. (Example: Adobe Spectrum’s Foundations)
- Components: The building blocks for creating user interfaces. Components define things like possible states of an action button and template for creating a modal window. (Example: Google’s Material Design components)
- Guidelines: Important guidance explaining when and why designers should use certain components and proven patterns to follow in combining them. Guidelines also provide direction for content, such as words to avoid and best practices for writing in an inclusive way. (Example: Zendesk’s content guidelines)
- Resources: Tools such as UI kits, plug-ins, and a design system website that designers, developers, and content authors use to access the foundations, components, and guidelines. (Example: IBM Carbon Designing: Get Started guide)
Create dedicated roles for creating and evolving the design system
Leading design teams approach a design system like any other digital product. This means they ground their design system in user needs, start small with pilot projects, promote and build a community around the design system, and create a governance process. It also means they staff the design system by establishing dedicated roles to work on it.
While many design systems start by dedicating a couple of individuals to a “20 percent time” project, a design system requires dedicated staff to successfully gain adoption and grow. According to Forrester’s study, 57 percent of decision-makers say their firms have a dedicated team for their design system. And while these teams almost always include designers (74 percent) and developers (70 percent), we found that leading design teams bring in experts in content strategy, accessibility and inclusion, and user research as well.
Overall, the investment in design roles has paid off as 75 percent of respondents at leading design organizations believe their teams are “very collaborative” compared to only 30 percent of “emergers” (see Forrester report).
Establish success metrics
Design systems help firms improve CX, maintain brand consistency, increase speed-to-market, reduce UI and accessibility defects, and much more. But how do you know if your design system is delivering on its goals? Leading design teams establish two types of success metrics for their design systems:
1. Adoption metrics: These metrics answer the question, “Are teams aware of, using, and engaging with the design system?” Example adoption metrics include number of component inserts, percent of products with at least X percent adoption, number of users in the design system’s Slack channel, and number of incoming questions or requests per week.
2. Outcome metrics: These metrics answer the question, “Are we successfully achieving the goals we set out to achieve in creating our design system?” For example, if a goal is to get products to market faster, you might measure the number of points required to build a feature within a sprint or the number of development hours required to create a page template with vs. without a design system. If the goal is to improve accessibility, track how the number of accessibility bugs decreases over time for products using the design system.
Which metrics are right for your firm? Focus on metrics that are meaningful to the business (not just the design team), that are easy to explain, and that can be tethered to business outcomes. Establish a repeatable process for measuring and reporting on these metrics to ensure your design system receives sustained support and investment.