Internal DLS
I led the creation of a white-label Design Language System (DLS) to standardize and optimize processes for our product design team.
Timeframe:
2 months
Role:
Lead Product Designer
Team:
Design Director, Associate director & Senior Product designer
What's a DLS?
A Design Language System (DLS) is a set of design elements and guidelines that promotes brand consistency across products and platforms. It includes colors, typography, patterns and components (Design library), and can also include brand documents such as tone of voice, design rules, and principles.
However, in our case, we needed something different since we were going to use it as a starting point for all products within our design agency.
This brought up different design challenges, such as how effective a DLS could be for an experienced design team, how it will be adopted, and how it will be governed. These questions opened up new and exciting opportunities.
Who are we designing for?
We are designing for our internal experience team, which consists of senior researchers and product designers. Despite having different work styles, interests, and areas of strength, we are always collaborating to create designs that leverages our diverse perspectives
Research
We created a survey to get information from the Product Design team on their working practices, Figma use, experience with or creating a DLS, and roles. This helped us understand why and how our team needed a DLS, and how to create a useful starting guide and library for future projects.
Survey created by our Associate Director
In parallel, I started benchmarking to identify the best practices from top DLS available. I focused on specific areas such as structure, style, components, education, and onboarding, among others.
Benchmarking
Culture shift
Research showed the DLS could lead to a cultural shift in our design processes by standardizing and optimizing them. We identified different areas in which we could make an impact.
Collaboration
Researchers and designers collaborate to create cohesive designs.
Best practices
The DLS promotes efficient collaboration and communication.
Accessibility
The DLS prioritizes accessibility by implementing guidelines that comply with latest standards.
DLS adoption
The DLS ensures consistency and efficiency in design projects.
Education
Onboarding new team members is crucial for maintaining consistency and efficiency.
Building the library
Based on our research, we have identified various patterns and best practices for our Design Library (DL):
Structure
The structure consists of only two Figma pages: Foundations and Components. It was crucial to maintain a simple structure that can adapt to the complexities and growth of each different project.
Foundations
Several team members collaborated to enhance our foundational content.
We have decided to store all style-related content, such as typography, color, spacing, and visual assets, in Foundations. In addition, we have included design principles, motion, accessibility checklists, typography accessibility, keyboard behavior, and tokens.
Foundations
Components
Are the building blocks of any product, and ours are created using the latest practices in Figma. This guarantees a modular structure that can be updated quickly and easily using autolayouts, variants, and component properties. Making updates and edits is a straightforward process.
Components
Best practices
Our process utilized the latest best practices (2023) to create designs that are easily produced, maintained, and adapted, resulting in faster turnaround times.
Style
Apply foundational styles to all components.
Components
The reusable building blocks of every design library.
Autolayouts
Ensure the system is easily adjustable and expandable with minimal intervention.
Variants
Enables better organization of components and UX integration.
Properties
Facilitates fast and efficient use of the library.
Tokens
A design token is a style attribute that can be easily shared with developers.
Communication
Internal label system for asynchronous team communication
Design Principles
Principles that guide the design process.
Motion
Defines interactions, microinteractions, and transitions that support a product's UX and functionality.
Keyboard
Keyboard behavior describes how a user uses a keyboard to navigate a website or app.
Governance
We have developed a governance framework to ensure that the DLS remains current and relevant to the organization's long-term needs. First, we proposed a team and defined its responsibilities.
Governance Team Roles
Next, we created a draft outlining the structure of the governance team's responsibilities, how to manage feedback, facilitate team communication, and ultimately update the DLS.
Governance Decision tree diagram
Final thoughts
I love working with Design Languages (DLs), from conceptualization to implementation. As a bit of a nerd, I particularly enjoy working with autolayouts. So rewarding to see everything in the right place! :D
In the next phase of the DLS project, we will focus on educating and onboarding new team members. We will continue to improve and update the DLS, ensuring it remains current and relevant to our organization's long-term needs.
Design language systems (DLS) and design languages (DLs) are never-ending processes, and in a way, that's the beauty of it. A good foundation is critical to the lifecycle of any product, so it is crucial to get it right from the start. We hope this serves our team and positively impacts many projects in the future.
hello@dianapadron.com - 2023