D2iQ Design System

D2iQ Product Language is a design system to drive the design of D2iQ's Kubernete’s management platform.

Lead Product Designer
4 months
(Nov '22 - Feb '23)
Core Responsibilities
Design System, Visual Design


D2iQ's design system had not been updated in 3 years and they recently migrated from Sketch to Figma. At the time, D2iQ only had two designers who were already stretched thin with their day-to-day responsibilities, and as a result, they were unable to dedicate enough time to updating the design system. When I came onto the team, I took the lead to build out D2iQ's Design System from scratch.


Built over 400+ components and published D2iQ's Design System Library

Current Challenges

After conducting internal research with the design team, I knew I had to address the challenges associated with the existing design setup:
🚫 Non-existent Design System
UI Kit exists for Eng. Team on Storybook but no source of truth for the design team in Figma.
❓ Scattered components
Design components existed as separate entities with each designer creating their version of a component.
🐌 Slow Design process
Design team resorted to finding, copying, and pasting design elements = slowing down their design process
How can we create a Design System that is cohesive, scalable, and efficient?

⚛️ What's Atomic Design?

Prior to building out a Design System, I conducted additional desk research into established Design Systems by companies like Atlassian, Google, IBM, and Shopify. It became evident that many companies were benefiting from design systems based on Atomic Design Principles.

Upon discovering that numerous successful design systems were grounded in Atomic Design Principles, which provide scalability, modularity, and consistency, I recognized the potential for incorporating these principles to streamline our design process and enhance collaboration within the team.

I proposed a strategic plan to revamp the existing design system based on Atomic Design Principles.

  • Establishing a Unified Design Language: Implementing a system that ensures consistency across all products by defining a set of design principles, patterns, and component
  • Improving Collaboration: Streamlining the design process to enhance collaboration among team members and facilitate a more efficient workflow.
  • Building Reusable Components: Breaking down the design system into smaller, reusable components, aligning with the Atomic Design methodology.

🛠️ Building the Design System

Atoms: The Building Blocks

Examples of atoms include buttons, icons, and typography, colors. By defining these elemental components, I created a consistent and reusable foundation for constructing more complex structures.

Molecules: Combining Atoms for Functionality

Climbing one level above, we get molecules that are combinations of multiple atoms.  

Organisms: Building Functional Components

Organisms are groups of molecules joined together.

Templates: Structuring the Layout

Templates take the design abstraction one step further by combining multiple organisms to create page-level structures.

Design Guidelines

In the process of revamping the design system, it was imperative not only to incorporate Atomic Design Principles but also to align with broader design guidelines. These guidelines encompassed various aspects, including considerations for empty and interactive states, layout patterns, and other user experience elements. This approach aimed to create a comprehensive and user-centric design system that goes beyond individual components.


💨 Efficiency
The streamlined design process resulted in a more efficient workflow, reducing the time required for designing and iterating on new features by 50%.
♺ Reusability
The adoption of Atomic Design Principles led to the creation of reusable components, fostering a modular and scalable design system.
✅ Published Library
This centralized resource facilitated seamless collaboration, allowing designers to work cohesively on projects, share updates in real-time, and maintain consistency across various design assets.

💡 Learnings

  • Design systems are evergreen. They are living organisms in that they're complex and ever evolving.
  • I wasn't just designing components, I was thinking of ways to make it easier for my team to utilize these components to make their jobs easier.