Project
Design Language System
Read time: 8 min
Role: Sr. Product Designer
Tools used:
What is a design language system?
A Design Language System (DLS) is a set of guidelines and standards for designs that are used to create a cohesive and consistent look and feel across an organization's various touchpoints, such as its websites, apps, and physical products. It is intended to help increase efficiency and improve the user experience by providing a clear and consistent framework for design.
Business Goals
The goals of the DLS are intended to provide the right level of detail and guidance to different audiences, such as developers and designers, in order to facilitate its adoption and use.
Overall the DLS aims to be a single source of truth for the organization.
Teams Involved
- Design system designers
- Business solutions analysts
- Development architects
- UX Architects
- Business transformation leadership
Current Problems
- Inconsistency in design guidelines and documentation
- Orphan components across multiple files
- Variations in design and functionality across different web properties
- Lack of coordination and design <> dev communication
Background
This project was initially kicked off by a third-party consultancy but was later handed off to the respective teams to continue building out the design system. With a total of 4 DLS designers, I was designated to represent the product design team as the go-to for design systems. Developers and designers had a handful of components that were inspired by using Material Design for their web application UI and structure. As this system was taking shape, designers would build and hand off specs by working with developers, business solutions analysts, and documentation architects to ensure a smooth release process and cadence of components.
Process
This process was continually being refined and consisted of working together with multiple teams to align on how to triage, plan, build, and document the design language process.
Impact
Our teams have experienced multiple benefits by formalizing our practice and culture of systems thinking.
- Stronger foundations: Design tokens have reduced inconsistent styles and established a clear way to add or update foundations across the org.
- Extensible, robust components: Flexible components have increased in value, resulting in over 800 components that are responsive and consistent across design and code.
- Increased collaboration: Silos between teams have been broken down, enabling consumers to start dialogues and take tangible actions toward improvements.
- Efficient, quality product deliveries: Reusable foundations and components have accelerated design iteration and product delivery.
- Scalable maintenance: Components that connect to multiple Figma libraries. (base style, themes, components, and block templates)
Atomic Principles
As a point of contact, understanding the design system and its components is essential to ensure new components align with existing ones and maintain quality over time. Maintaining quality meant that components that I’d built followed atomic principles for consistency and usability purposes. By building modular components I was able to create different designs with any combination of elements in the system.
Exposed Properties
When building components, it's important to keep responsiveness and international use in mind. Components should be designed to work well on different devices and support different languages and cultures. Stress testing helped ensure that components can handle heavy usage and maintain their quality over time. Additionally, considering potential errors, such as user input errors, is essential to ensure that components provide a good user experience. By keeping these factors in mind, designers and developers can build high-quality, reliable, and scalable components that meet the needs of their users.
Documentation
Once components were finalized I worked with the development team to create consistent interactions and documentation of components in Storybook. This UI library is connected to Figma and serves as a place to manipulate designs as represented in a real-world environment.
In addition to design documentation in Storybook, design foundations are provided in Zeroheight and would serve as a hub for designers, developers, and others interested in learning about the design system and how to use it.
Reflection
Design systems are an essential aspect of any organization, as they are ever-evolving and require a dedicated team to actively nurture and maintain them. The key to success lies in facilitating adoption and gaining buy-in from all teams, ensuring a common design language that is both familiar and consistent for all users.