Design Systems Accelerate Digital Product Delivery
Design Systems are collections of reusable components, guided by clear standards, that can be assembled to build any number of applications. It is a reference that helps different teams design and build digital products. Design Systems?significantly benefit user experience (UX), brand consistency, and developer productivity.
Design systems were created to bring order into an inevitable entropy. The first design system was introduced by NASA in 1976,?and today nearly all large organizations like Uber, Pinterest, Airbnb, or Shopify have?such a system to bring consistency into the chaos of more products and teams.
Even though Design Systems have proliferated in recent years, most organizations have not adopted them due to these key?challenges:
? IT leaders face myriad decisions, including choosing an open-source project they begin with and?incorporating the existing design.
? IT leaders need clarification on how they must resource the design system. This leads to inaction and a failure to harness the benefits of design systems for both users and internal teams.
? IT teams are often?drawn to the “build your own”?approach, as this method affords them total control over every element of the design system’s user interface (UI) and UX. However, building design systems from scratch is a huge undertaking that increases the time it takes to realize actual business value.
As a result, IT leaders cannot realize the benefits of faster product delivery and improved user experience.
The Appropriate Design System
For IT leaders to use an appropriate design system, they must first assess which system design approach is best suited for their teams and products. Next, they must determine how to operationalize and sustain the design system.
Best Fit Approach For Teams and Products
Except for new startups, companies likely start from existing UIs in use.?If the comapny still at the beginning of the journey, it can use a decision tree to determine the best starting point for a new design system project.
IT leaders should think about their current portfolio of digital products and ask, “Are their teams using an?existing UI pattern library?or frontend framework that provides prebuilt UI controls?” If so, their teams can use this pattern library as a starting point to?codify?the in-house look and feel, and form the basis of the chosen design system approach.
They should start the?design system?by codifying existing UI patterns:
? Using the existing frontend framework as the basis of their design system.
? Directing the team to build out a UI pattern library?in a?digital design platform?that enables collaboration, such as Figma or Sketch — codifying the house style for easy and consistent reuse.
? Directing?engineering teams to create or?extract the?HTML and CSS?that allow these patterns to be reused in code.
If the teams don’t already have a pattern library, IT leaders should start by using an open-source design system:
? Begining with a well-used open source design system, ensuring the choose one with a large and active community of contributors behind it. The number of “stars” on GitHub, or the amount of social media discourse are often good indicators of a project’s popularity.
? Directing the team to customize?the?design system’s?visual theme?in a digital design platform that enables collaboration - integrating brand colors, typography and logos into the design system.
? Directing engineering teams to extend the existing?HTML and CSS?to allow these patterns to be used in?code.
If the digital products are delivered by a platform (for example, Salesforce) — IT leaders should create a theme for the platform-based design system:
? Using the design system of the platform teams are building on (for example, Salesforce Lightning Design System).
? Creating a theme to adjust the look and feel of the platform and making it coherent with the organization’s brand - and adjusting the color palette, logos, icons and typography styles.
领英推荐
IT leaders should implement these recommendations to build a robust design system strategy that will meet the needs of all stakeholders and accelerate digital product delivery.
Operationalize the Design System Through the Creation of Reusable Components and Documentation
IT leaders should make it easy for IT teams to quickly derive value from the design system by extending the UI pattern library into a documented system of reusable components.
Instead of building UI components from scratch each time, IT teams can now pull from a standard set of UI elements, which reduces the time and effort required to build new UIs. It also dramatically improves design consistency.
IT leaders should direct the teams to create reusable components for design systems:
? Combining frequently used UI controls into reusable components that always behave the same way across products and platforms. For example,?combine an input, spyglass icon and a button into a reusable “search” component.
? For open-source design systems,?combining?the provided UI elements into components — increasing familiarity for users and reducing developer effort each time they are reused.
? Demonstrating?these components on a?showcase?site or using a design system management tool.
IT leader should also?direct the teams to produce documentation for the design system. This documentation will help UX designers produce wireframes and mockups and will help developers produce frontend UIs.
Documentation should cover all UI elements, from individual controls, to patterns and page templates. This documentation should provide advice on:
? Behavior of the UI elements, to maintain consistency for users.
? Guidelines on when to use each component or pattern (and when not to use it).
? Accessibility guidelines to help designers and developers produce experiences that perform well with assistive technologies and meet recognized accessibility requirements.
Develop a Governance and Resource Plan?That Ensures the Design System is Used Consistently and Maintained
IT leaders should treat the design system like any other essential internal product and assign the resources it needs to deliver value and become widely?adopted. They should establish a system of governance to ensure the design system is used consistently. This includes:
? Creating and enforcing rules that mandate the use of the design system. For example, an organization could mandate that all new products must begin with the design system?or the product will not pass quality assurance (QA) and be released.
? Creating a migration path for legacy products to adopt the new design system.
? Showcasing successful innovations in usability and the amount of developer effort saved by regularly presenting these results back to the wider software engineering practice.
? Directing teams to track and report on the rate of rework and developer productivity, accessibility compliance, and user satisfaction scores - showing how the design system positively contributes across all three of these areas.
Like any digital product, a design system needs stewardship to continue to deliver sustained value over time. IT leaders should provide the resources needed for an essential internal product, identify a product owner, create a roadmap, and align engineers and designers who will work on a product backlog to deliver maximum value to users and developers. They need to:
? Empower this team to assess the backlog of requests for new UI patterns and enhancements to existing patterns, prioritizing work with the biggest impact to users and developers.
? Plan for expansion of?the design system, creating new patterns in response to both technology changes and the development of new products and features within the organization. This will require building and communicating a design system roadmap.
? Anticipate future repurposing and reimagining of existing patterns for use with emerging experiences like virtual reality (VR), augmented reality (AR) or AI.?This work will likely be used across multiple products.
From Gartner's article "Start Using Design Systems, Accelerate Digital Product Delivery"