Overview
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.
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.
