The majority of modern user interface design relies on the reuse and assembly of proven UI design patterns.

Software engineering leaders must evaluate and select from platform-based, open-source and in-house design systems to build the best digital products in the least amount of time. They can use the following three best practices to build better products faster with design systems:

Deploy a design system that promotes reuse and assembly

A design system is a set of reusable design assets and front-end code components, governed by clear standards, that can be assembled to build a variety of digital products. The value proposition of a design system is strong and encompasses the following:

• Speed: Design systems significantly reduce the time required to design and code the front end by assembling and tweaking screen designs rather than designing them from a blank artboard.
• Usability: Design systems typically are composed of time-tested UI design patterns that are familiar to most users.
• 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.

Software engineering leaders should deploy a design system that promotes reuse and assembly through adherence to a design system’s style, structural, coding and documentation best practices.

Evaluate and select from existing design systems

Design systems have proliferated over recent years. In an effort to attract and retain customers, major platform providers have launched some of the most sophisticated design systems to date. The purpose of these design systems is to facilitate presentation layer design and development, and to ensure the best possible user experience for applications built on these platforms.

Open source is another notable development in design systems. In an effort to promote good design and build brand equity, major tech companies have launched open-source design systems that have evolved into robust and reliable sources for design assets and code components.

Software engineering leaders should reduce complexity of design system processes by evaluating and selecting from existing design systems that support an open-source design system approach.

Treat your design system like a product

A design system is one of the most important strategic assets for a company. It is a living digital product that requires a product owner, team, plan and set of specialized tools.

A design system requires product leadership which should consist of a product owner, UX lead and development lead. Between these three individuals, the design system benefits from operational, design and technical guidance. These three roles can be filled by either individuals from the associated product team, or they can be from more senior individuals who curate the design system.

A high-level plan for a design system is critical whether you are working on the first release of your design system or updating it following a new release of your user-facing product. This plan falls into three main categories:

• Inventory: Team members audit the current state of your products to identify repeatable atoms, molecules, organisms and templates for potential inclusion in the design system.
• Select: Team members review the inventory with the design system leadership team (product owner, UX lead, development lead) and select assets for inclusion in the design system.
• Document: Approved assets are tokenized and documented in the design system.

Finally, you must have a set of specialized tools for your design system. As design systems have proliferated, so too have the tools upon which they are built and maintained. Three platforms that are commonly used are:

• Digital product design platform: A collection of tools for professional UX practitioners, which enables the key UX functions of screen design, user flows, UX writing, design collaboration, prototyping and some front-end code generation.
• UI component platform: A space to create, organize and maintain your code components in frameworks.
• Design system management platform: An interconnected set of tools and services to create, organize and distribute your style, structural and code assets. A DSM platform supports a cross-functional, system-based digital production workflow, and is typically managed by a collaborative team (includes UX/design lead, engineering lead and product lead).

Design systems are a significant endeavor that take planning, resources and ongoing maintenance. Software engineering leaders should match investment in their design systems with their product maturity. Even minimum investment will yield concrete returns in return on investment in the form of quality, consistency and speed for all digital products.

Brent Stewart is a senior director analyst at Gartner Inc. on its Software Design and Development team, focusing on user experience, content design and design operations. Gartner analysts will provide additional analysis on designing and developing UX at the Gartner Application Innovation & Business Solutions Summit, taking place May 14-16 in Las Vegas.

Image: Firmbee/Pixabay