Insights from Gartner’s design system effectiveness report

‍

Gartner’s recent report on design systems, written in partnership with Blink UX, tells us what we already know: design systems are the future of design, and pattern-based design leads to better UX. Here are our major takeaways from reading the report.

1. Effective design systems promote re-use
2. The best UI design is pattern-based
3. Voice and tone guides belong in your design system
4. Scalable design systems are built on tokens 
5. Design systems are products, and they need resources

1. Effective design systems promote re-use

Design systems are complex, but they’re supposed to make our lives easier and our work better. 

By definition, a design system is “a set of reusable design assets and presentation layer code components, governed by clear standards, that can be assembled to build a variety of digital products.” If your design system is working as it should be, it empowers designers and developers to reuse existing components. Instead of redesigning that button over and over, you can copy-paste and save your energy for new projects.

To measure your design system’s effectiveness, check in with your designers and developers about what they’re building on the day-to-day. If your design system is healthy, they’ll be taking advantage of existing components to increase consistency and compliance.

The report breaks this down into seven use cases:

• Speed: Design systems drastically reduce the time required to design and code the presentation layer by assembling and tweaking screen designs rather than designing them from a blank artboard.
• Usability: Design systems typically are composed of time-tested, proven UI design patterns that are familiar to most users. Foundational UI design heuristics, such as “visibility of system status” or “recognition rather than recall” are built-in to these patterns.
• Consistency: Design systems enable consistent user experiences across disparate teams, whether they are feature teams delivering into a single product or product teams sharing a design system across a larger product portfolio.
• Scale: Design systems make it easy for designers and developers to share common, approved design assets and code components across an entire portfolio of digital products.
• Reduction of defects: Over time, design system code components become “hardened,” leading to far fewer production defects in your presentation layer.
• Brand compliance: Design systems reinforce your brand identity and infuse key elements such as color and typography into every single design and code asset.
• Accessibility: Design system assets can be pretested for compliance with the latest Web Content Accessibility Guidelines (WCAG), eliminating unnecessary rework downstream.

2. The best UI design is pattern-based

Pattern-based design frees designers from the drudgery of rebuilding buttons and forms. When you can reuse those “boring” elements, designers and developers are empowered to focus on innovation and improvement.

“Smart UX designers derive the majority of their structural elements from well-established design patterns borrowed from other design systems, past work, and popular digital products, thus ensuring the best usability possible.”

An argument in favor of building and maintaining a design system is increased consistency. An impactful design system will always lead to more consistent experiences because, instead of rebuilding, designers and developers can draw from an organized library of existing components.

3. Voice and tone guides belong in your design system

Your design system should be the home of all of your branding elements, including your voice and tone guide. Mature design systems are accessible to everyone touching your brand and product—not just designers and developers but also content strategists and marketers.

As content becomes a more visible part of the design process, content writers become a more valuable resource for design system teams. By creating a gold standard for writing within and outside the design system, you’re guaranteed consistency in a critical aspect of your product’s UX.

“The style assets of a design system are an inventory of the visual, written, and behavioral attributes (such as color, typography, voice/tone, and motion) and must comply with your brand guide. Savvy designers collaborate with brand managers and product marketers to ensure the style elements in their design system accurately manifest the brand identity.”

Content strategists don’t just work on products and branding; they can be an active role in maintaining your design system. Developing consistent content within your design system will keep designers and developers from making costly mistakes. Making your design system a home for content writers will help keep your whole branding house in order.

4. Scalable design systems are built on tokens 

Design tokens, according to Adobe, are “the values needed to construct and maintain a design system—spacing, color, typography, object styles, animation, etc.—represented as data.” Using tokens is the basis of pattern-based work, because changing an element in a token triggers changes across the product everywhere that token is used.

“Sophisticated design systems translate key style assets into design tokens, a powerful way to centralize the management of colors, text styles, icons, and more.”

For designers and developers collaborating within their design system, tokens streamline workflows—something especially critical for teams working asynchronously. Tokes are a hallmark of mature design systems.

5. Design systems are products, and they need resources

Design systems are hard to build, and they don’t maintain themselves. Even after they’re built out, the work is never finished. Like any other product, design systems need a team of experts working together to keep them in order.

Gartner recommends involving UX designers, front-end developers, content strategists, and accessibility specialists in maintaining your design system.

• UX designers: Designers inventory, select, and document the visual style assets and the UI structural assets of the design system.
• Content strategists and writers: Content strategists inventory, select and document all written style assets (the voice and tone) and the standard content types among the structural assets of the design system.
• Front-end developers: Front-end developers inventory, select and document all code components and map them directly to the atomic design taxonomy created by the designers and content strategists.
• Accessibility specialists: Accessibility specialists review all design and structural assets for compatibility with assistive technology (e.g., screen readers) and ensure reusable assets are in compliance with the latest WCAG standards.
  

These experts don’t have to be dedicated to your design system full-time, but they do have to be actively involved in quality control. A design system is only worthwhile if it’s complete and up-to-date.

Staying up-to-date with design system news

The design systems community is growing fast, and more reports like these are being released all the time. To keep up with the latest developments in the design systems ecosystem, subscribe to our podcast and follow us on Twitter.