Learn How Design Systems Support Design at Scale
Learning Objectives
After completing this unit, you’ll be able to:
- Define what a design system is.
- Explain how design systems support scalability.
- Build accessibility into a design system.
- Use an inclusive approach when building out a design system.
Building Blocks for Scale
A design system is another important tool in helping organizations scale relationships. Design systems allow organizations to effectively scale the use of common elements within a user experience. It’s a collection of repeatable design patterns and reusable code—essentially, building blocks that help organizations start building right away using predesigned components. These components allow organizations to create efficiencies in development and a consistent experience across tasks within a single product or suite. For example, instead of coding a form from scratch to collect information, such as a customer's shipping address, a design system has a built-in shipping address component used everywhere that information is collected.
When designing a component for a design system, it’s key for organizations to consider all the different places that component might appear and the required elements in all those different contexts. For instance, an organization wants a phone number or country field in the shipping address component available for certain use cases. So it builds that element into the component, even if it isn’t needed every time, so developers can easily toggle required fields on and off.
By coding elements as components, organizations gain efficiency by using them again and again, freeing teams up to solve new problems. Organizations also achieve consistency, which improves the user experience by setting users’ expectations once and living up to them repeatedly. This consistency also reduces a user’s cognitive load—think of how a task becomes automatic after you've done it a few times—and increases trust in the organization.
Organizations use design systems to manage design at scale through a library of these components, rules, and templates that help maintain consistency across their designers, developers, teams, and products. What’s more, rigorous design systems can evolve as organizational needs change, enabling designers and developers to quickly and easily update interfaces and tools across a platform.
Design Systems and Relationships
Design systems, and interfaces in general, signal an organization’s brand and values. But it’s more than just colors and typography. Organizations embed their brand and values in the behaviors and content of their digital experiences, and design systems codify and reinforce how these digital experiences behave.
When users interact with these experiences, they associate emotions with them, such as excitement or contentment, which influences how users relate to a brand. For example, think of the whimsical way some smartphones signal that a user is editing the placement of icons on their home screen by making the icons wiggle. Or the way a project management app may trigger a celebration graphic when you've completed a task. Imagine how these interfaces would be different if the organizations valued efficiency over creativity (no wiggles or confetti!).
Build in Accessibility
You learned earlier that it’s key to use best practices when using technology to scale relationships. The same also applies when building out a design system. To make sure a design system is accessible for all, including people with disabilities, it's key to follow Web Content Accessibility Guidelines.
These guidelines ensure that people with disabilities can perceive, understand, navigate, interact with, and contribute to the applications you create. This means that interfaces within the design system are:
- Perceivable: Information and user interface components must be presentable to users in ways they can perceive, including providing text-based alternatives for things like images and videos.
- Operable: User interface components and navigation must be operable, including keyboard interaction alternatives for all mouse-based actions.
- Understandable: Information and the operation of the user interface must be understandable, including ensuring web pages appear and operate in predictable ways.
- Robust: Content must be robust enough to be interpreted reliably by a wide variety of users, including assistive technologies.
Another key best practice when building a design system is to be inclusive. Let’s explore this next.
Use an Inclusive Approach
When building out a design system, it's equally important to use an inclusive approach during the design process and to embed inclusivity into components. For example, at Salesforce, we:
- Include accessibility experts in the early stages of our design process as well as later, in the quality assurance stage.
- Ensure that text combinations and background colors do not fall below the WCAG recommended threshold for standard, small, or large on-screen text.
- Create interactive components per the latest Accessible Rich Internet Applications (ARIA) Authoring Practices, with attributes that are understandable by screen reader users on key page elements.
- Offer text-based alternatives for all images, icons, and Scalable vector graphics (SVGs).
- Make sure that color is not the only means of providing information or requesting action, such as using green checkmarks and green text to indicate success and a red X and red text to indicate failure.
Assemble a diverse team for the design process to ensure that marginalized voices, such as people with disabilities and people of color, are heard, and their feedback is valued and actively considered. Externally, organizations should also test with diverse populations during the prototyping phase of a product or service to learn how different populations will interact with and experience products and services.
When we use technology to scale relationships, it’s vital to do it responsibly to ensure we do more good than harm and make it accessible for all.