July 30, 2021
July 30, 2021
Contributor: Ashutosh Gupta
To quickly build digital products with effective UX designs, software engineering leaders must leverage design systems that promote reuse and assembly.
Many modern-day product teams continue to create original UX designs and craft digital experiences from scratch. In doing so, they overlook the advantages of using existing and proven design patterns leading to poor usability, visual and behavioral inconsistencies, as well as longer design cycles. To improve the overall UX quality, software engineering leaders should deploy a design system — a set of reusable design assets and presentation layer code components that are governed by clear standards to build various digital products.
“A design system is one of the most important strategic assets for your company. It is a living digital product that requires a team, a plan and a set of specialized tools,” says Brent Stewart, Senior Director Analyst, Gartner.
Download now: Improve Software Quality by Building Digital Immunity
A design system creates a “single version of the truth” — a central design language for UX designers, enabling them to craft consistent user experiences across diverse teams, channels and platforms. The value proposition of a design system includes:
An ideal design system comprises design tokens, customizable UX design patterns, production-ready codes and instructions to efficiently deliver high-performing digital products. Here are the four components of a design system:
The visual, written and behavioral attributes like logos, color palette, iconography, typography, voice or tone come under the umbrella of style assets.
Advanced design systems use design tokens to centralize the management of colors, text styles, icons and more. Design tokens are platform-neutral entities that store design variables and are used in place of hard-coded values such as pixel or hex values to maintain UI and UX consistency when design systems scale.
Structural assets are an assembly of UX design elements (specific buttons, page templates, etc.) for creating user-friendly screen designs with a shorter turnaround time.
The atomic design approach is one of the most popular ways to describe the hierarchy of structural assets. Here’s a general breakdown:
Code components are an inventory of production-ready codes in the selected framework. They are organized using the atomic design approach hierarchy. Each design atom, molecule, organism and template have an associated code component to match. Sophisticated design systems tokenize code components for updating colors, typography, spacing, etc., in a centralized manner.
Enforceable guiding principles, usage guidelines and governance policies should be in place to create efficient design systems.
The guiding principles ensure that design assets and code components are modular, composable, generic, flexible and accessible. Usage guidelines include the rules related to typography, color palette, dimensions and spacing, grammar, aspect ratios, writing style, etc.
Governance policies are necessary to sustain the given standards over time. Instead of implementing the conventional IT governance model, software engineering leaders can use a wiki-style approach. It can give contributors the freedom to create, update and delete style assets, structural assets and code components on an ad hoc basis, allowing the product teams to improve the design system “on the fly.”
To maintain the credibility of the design system, the leadership team can review additions, edits and deletions during a significant release, apart from their quarterly reviews.
Over the years, various platform-based and open-source design systems have been launched to ensure high-performing UX. For building apps on a major platform, it’s highly recommended to repurpose these existing design systems as much as possible. The design assets and code components in these systems are backed by extensive research on UX within product categories such as customer relationship management (CRM) and enterprise resource planning (ERP).
Treat your design system as a digital product by establishing a product leadership consisting of a product owner, UX lead and development lead.
The three leads can improve the design system with operational, design and technical guidance. The team can also have contributors such as UX designers, content strategists, front-end developers and accessibility specialists to handle each release of the design system.
Join our panel of industry leaders and Gartner experts to explore key market insights, business goals, digital workplace strategic plans and much more.
Recommended resources for Gartner clients*:
Build Better Products Faster With Design Systems
How to Build a User Experience Team
Proven Design Principles to Deliver a High-Value Employee User Experience
DesignOps: Organize, Collaborate and Innovate Product UX at Speed
*Note that some documents may not be available to all Gartner clients.