Robert Half - Design Language System

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

An abstracted mini-view of the proposed DLS Hierarchy.

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.

Example: Mondrian card anatomy

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.

Condensed design language system 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)

Example of typography and color foundations.

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.

Example: Final state component. This contains nested instances following atomic design principles.

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.

Stress tested for responsiveness + IZ and any errors that can occur (ex. user input).

💡

In addition, I proposed a slotting strategy to allow designers to explore designs without the need to break instances and maintain parity with the system.

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.

Storybook components and properties.

Reflection

Sheet of components and foundation properties.

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.