Design
System
Aa
Problem To Solve
Designing a system for a B2B SaaS product that is simple, scalable, and seamlessly bridges the gap between designers and developers.
Highlights
Just a glimpse of what we’ve accomplished! For the full journey, scroll down for the whole journey :)
Background
When I joined, the company was in the middle of expanding its product but had no complete design system to rely on.
My first challenge?
Building a design system from scratch to boost quality, improve efficiency, and eliminate any inconsistencies across products and development.
Hats worn :
Design System Creation/Curation
UX/UI Design
UX Research
Timeline :
Jan - March 2023
( 3 months )
Team :
2 Designers
Tools :
Figma
Alot of tea :)
Discovery
Before diving straight into designing the new DS, we started by discovering what already existed: what was working, what wasn’t, and what opportunities lay ahead.
->
With two seasoned designers on board who had previously worked on these products, we made it a point to understand their struggles and listen to their stories.
They had lived through the challenges of the old system, and their insights gave us a head start in building something better.
->
->
We conducted a comprehensive audit of both the designs and the live product, documenting the visual and functional shortcomings.
Problem: Inconsistencies and Lack of Scalability
1.
Through the audit we realized the product was riddled with inconsistencies and inefficiencies.
Multiple variants with different styles of the same components—like buttons, badges, and other UI elements—were scattered across designs and developed products.
->
->
2.
I discovered that not only were the assets visually and functionally inconsistent, but designers also spent a significant amount of time hunting through files to locate components.
More often than not, they had to customize or recreate elements to meet specific requirements.
Research
When I joined, I had little knowledge about how to create and maintain a design system. But thanks to the internet and its wealth of resources, I quickly understood its importance, how to implement it effectively, and how to ensure it could scale. This learning phase introduced me to concepts like auto-layouts, variants, properties, and components—the building blocks of a scalable and efficient design system.
Fortunately, many renowned companies like Shopify, Atlassian, and Google have made their design systems public, which became invaluable learning resources. These served more as sources of inspiration than strict guidelines, helping me visualize the potential of a well-structured design system.
My journey ultimately led me to the Atomic Design System
a methodology that felt like a perfect fit. Just as the physical world is built from core atoms forming molecules and then organisms, the atomic design system mirrors this approach in design.
Drawing inspiration from nature, I saw it as the ideal foundation for creating a scalable and systematic design system for our products.
Define & Ideations & Process
With limited time and manpower, we had to ensure every resource was optimized and that our efforts were focused on what truly mattered.
Before diving into the design system, we analyzed the most critical and frequently used components required for our product lineup. We created an extensive list of these components, prioritizing both current and future needs.
This approach allowed us to focus on building the most impactful elements first, ensuring efficiency and scalability from the start.
For every component in the design system, we followed a thorough process to ensure quality and scalability:
This step-by-step approach helped us build a robust and efficient design system.
End Game. Keeping it simple, scalable and future proof
By following atomic design principles, we nested atoms into components to create molecules with varied variants and multiple properties, ensuring they could cater to all possible requirements while remaining simple, scalable, and future-proof. This approach allowed the system to adapt easily as the product and team evolved.
Demonstrating the functionality of components with their various variants and configurable properties in action.
To further support future growth, we created comprehensive documentation covering definitions, anatomy, properties, use cases, and best practices—making it easy for new team members and designs to integrate seamlessly.
Impact
" The new design system has been a game-changer for our workflow. It eliminated the need to repeatedly create or tweak components, allowing us to focus more on solving user problems and delivering polished designs faster. " - Senior UX Designer
Unified Design Language
We now have a cohesive design language that eliminates inefficiencies, inaccuracies, and irregularities across the product lineup.
Scalability
Built on atomic design principles, the system is scalable to accommodate future products and services, ensuring long-term consistency and adaptability.
Efficient and Effective Designs
With a comprehensive library of components and variants, designing has become faster and more precise, significantly reducing design handover time and improving collaboration.
Improved Developer Workflow
Developers now work with a unified design system, resulting in more consistent coded designs and faster implementation.