Empowering organizations to scale design

Key Takeaways

**Challenge:** Organizations struggled with inconsistent design across products, siloed component libraries, and ambiguous handoffs between design and development teams

• **Evolution:** Design tools evolved from static style guides → UI Kits → interactive prototypes → design systems with governance, guidelines, and working code

• **Solution:** Design systems provide centralized repositories of reusable, coded UI components with usage guidelines and governance models (centralized or federated)

• **Key Result:** Design systems enable organizations to scale design operations, deliver consistent user experiences, reduce rework, and improve quality across all products

Design Systems

Many companies have adopted an Agile approach to software development that allows teams to deliver working software faster and with increased quality due to the transparency and iterative approach to delivery. In turn, this has helped to shape and inform the operational aspects of the development lifecycle to offer a systematic approach for continuous integration and delivery that has become the basis of Agile development operations or Agile DevOps.

Like Agile development, the value of good design is also recognized as an essential part of business today. The role of the design team has also evolved to embrace an Agile approach in working to deliver high-quality designs that meet the needs of the customer and business. The rise of design systems is now playing an integral part in this evolution by enabling design teams to have a scalable and systematic approach to their design operations and delivery, known as DesignOps.

Regardless of whether the design team resides within the business or technology areas of a company, the design and development teams have a vital partnership in the process of successfully delivering software, and ultimately value for their customers and their business. For design teams, their tools and methods have transformed from a linear, static approach to a more iterative and dynamic delivery with their development team counterparts.

Short history on the design process

Years ago, a typical output from any design effort was a style guide. The style guide provided the design specification details for a software application. As an example, some of the specifications may include the size, spacing, color, and so forth for a design element. These specifications were helpful to the technology team as they provided a documented guide to follow during their development efforts. The downside is that the guide was static and could be ambiguous when communicating the more nuanced aspects of the design solution, such as motion and interactive behaviors. Another drawback was the style guide had the potential to be copied and altered without a robust method of version control. Developers who didn't have the latest version or didn't understand a particular specification could also misinterpret the guide and code the wrong thing. These shortcomings often led to errors, re-work, and delays in the production cycle.

While UI Kits and prototypes were a significant step forward, development teams still needed to code the front-end or presentation layer for every project. Even if the development team created a library of components for the project, there was a possibility that their library would be different than others used throughout the company. As is often the case in large organizations, silos emerged that contained varying design elements and libraries of code that lacked consistency and an overall cohesiveness in the user experience across a company's products and services.

A Design System enables organizations to scale design operations.

As design tools and methods continued to evolve, the static style guide morphed into the user interface toolkit or UI Kit, where the specification was embedded within the design tool. This was an important step forward for design and development teams as the designer was now able to create the complete user interface, screen-by-screen, from layout to form field element, and hand over her or his design as a digital file. This enabled the developer to essentially "copy and paste" the design elements into their environment to create the front-end and back-end code.

Additionally, many new prototyping tools entered the design market that had embedded UI design capabilities. This further provided designers with the ability to create fully interactive models that emulated the user-experience within a software application, website, or other digital product. These advancements helped expedite the development process by improving the handoff between design and development teams by reducing both time and effort in the communication and execution aspects of a project. Quality also improved as the design tool also allowed the developer and QA teams to view the exact specifications or "red lines" for every element, thus reducing re-work for both teams.

The Value of a Design System

This growing challenge needed a solution that provided an organization with the ability to deliver a unified experience across their products and services that could be managed and scaled to meet both the technology and business needs of an organization regardless of industry or size. The design system has emerged as a solution to address this need.

The design system builds upon the UI Kit by providing:

• Design Guidelines

• Governance

• Working Code

The design guidelines and front-end code are applicable for each element within the system. The range of design elements includes the simple, single items such as a color or font to the more complex, integrated elements like an address form or user profile. The guidelines provide another critical layer of communication between the design and development teams by detailing the usage, in other words, the "do's and don'ts" that provide context for when and how to implement an item within the design solution.

Guidelines also include best practices to promote important aspects of the user experience, such as accessibility and use of plain language to help with readability and comprehension. These guidelines, coupled with the design specification for each element, further reduce ambiguity to help teams correctly implement the design elements when creating an application.

Design systems also include governance, which directs the people and processes of creating, managing, and maintaining the system. Some organizations utilize a centralized model that has a dedicated design system team responsible for these areas. Others prefer a federated model that also includes representatives within each area of the business to contribute feedback on customer and business needs that keep the system relevant and useful for the organization.

Regardless of the model, having governance to support the design system is essential to building and maintaining the operational aspects within any organization. Unlike a UI Kit, which contains the specifications within the design elements, the design system goes further by having the actual user interface coded, tested, and available as UI components for development teams to access and use.

The design system, therefore, serves as a centralized repository of consistent, high-quality, reusable design assets that development teams can leverage in the development of applications, websites, or other digital products throughout the organization.

From governance and guidelines to reusable code, a design system serves as the centralized hub for a company's design operations. The design system, therefore, plays a critical role today in empowering organizations to scale their design capabilities and deliver a more consistent and higher quality user experience across their products and services.

About the Author:
Robert Grashuis is the Chief Experience Officer (CXO) at OneSpring. Robert plays a key role in the company's strategic direction and growth.