Building a Design System for a SaaS product
Building a Design System for a SaaS product
Unveiling the journey of building a robust design system for a SaaS product for Quantive.
Unveiling the journey of building a robust design system for a SaaS product for Quantive.
Role
Lead Product Designer
Timeline
20 weeks
(Jan '22 - Jun '22)
Project type
A live product of Quantive
Team
2 Product Designers & 2 Design Interns
Product Managers
Engineers & Developers
Overview
A brief intro to the project
A brief intro to the project
In my first role as a Product designer at Cliff.ai, I took up the responsibility to work on complex projects, and also the design team expanded from one to four designers, prompting the need for consistency. To address challenges, we introduced new tools, laying the foundation for our custom design system.
In my first role as a Product designer at Cliff.ai, I took up the responsibility to work on complex projects, and also the design team expanded from one to four designers, prompting the need for consistency. To address challenges, we introduced new tools, laying the foundation for our custom design system.
I took charge of the project, guiding and mentoring other designers to ensure its successful execution.
I took charge of the project, guiding and mentoring other designers to ensure its successful execution.
Goal & Impact
What was the objective, and how was the outcome?
What was the objective, and how was the outcome?
Our main goal was to create reusable components to:
Save us time
Have consistency across the entire product
Make our work easy
Facilitate easy collaboration of designers with developers as well as cross-functional teams.
The Impact:
The Impact:
I feel proud to say that “the redesigned product, utilizing our new design system, led to the company's acquisition.”
I feel proud to say that “the redesigned product, utilizing our new design system, led to the company's acquisition.”
Our main goal was to create reusable components to:
Our main goal was to create reusable components to:
Facilitate easy collaboration of designers with developers as well
as cross-functional teams.
Facilitate easy collaboration of designers with developers as well as cross-functional teams.
Have consistency across the entire product
Save us time
Have consistency across the entire product
Make our work easy
Make our work easy
Save us time
Problem & solution in a nutshell
A synopsis of the problem and its solution
A synopsis of the problem and its solution
The following challenges we encountered while designing the cliff.ai product
Inconsistency
Inconsistent Development
Difficulty in Collaborating
Limited Reusability
Frequent Product Iterations
Longer Hand-off Processes
Onboarding Challenges
As a solution, we created a brand new design system and revamped the entire product
As a solution, we created a brand new design system and revamped the entire product
The design components:
The screens using the new design system:
The following challenges we encountered while designing the cliff.ai product
Inconsistency
Inconsistent Development
Difficulty in Collaborating
Limited Reusability
Frequent Product Iterations
Longer Hand-off Processes
Onboarding Challenges
The following challenges we encountered while designing the cliff.ai product
The following challenges we encountered while designing the cliff.ai product
Inconsistency
Inconsistency
Inconsistent Development
Onboarding Challenges
Difficulty in Collaborating
Difficulty in Collaborating
Limited Reusability
Limited Reusability
Frequent Product Iterations
Frequent Product Iterations
Longer Hand-off Processes
Longer Hand-off Processes
Onboarding Challenges
Inconsistent Development
HMW statement
How might we encourage efficient communication and collaboration among team members while making our work faster and easier?
How might we encourage efficient communication and collaboration among team members while making our work faster and easier?
Research & Insights
Understanding the Design System inside and out
Understanding the Design System inside and out
To better understand the problem, we sought answers to these questions:
To better understand the problem, we sought answers to these questions:
What is a design system? How to understand the use and benefit of design system?
How is it helpful in design and development processes? How is it going to help us in our projects?
How to get started with creating a design system? How to add the guidelines?
How to identify relevant components, styles or common design patterns for our product?
How to document and maintain a design system?
To get the answer to these questions we followed the Atomic theory by Brad Frost, a few articles and YouTube videos and this was our understanding:
To get the answer to these questions we followed the Atomic theory by Brad Frost, a few articles and YouTube videos and this was our understanding:
"A design system is an investment in efficiency and consistency, leading to cost savings, higher quality, and more delightful user experiences." - Brad Frost
In simple words, a Design System is a systematic approach to product development complete with guidelines, processes, components, and code. It encompasses everything from typography and color schemes to UI components and interaction patterns.
Based on our understanding, we outlined how design systems help other companies in their work:
"Design systems are not just about aesthetics, they're about creating an ecosystem that fosters collaboration and innovation." - Jina Anne, Design Systems Handbook
"Design systems are not just about aesthetics, they're about creating an ecosystem that fosters collaboration and innovation." - Jina Anne, Design Systems Handbook
Efficiency: Design systems save time and reduce repetitive work.
Efficiency: Design systems save time and reduce repetitive work.
Consistency: They maintain a uniform look and feel.
Consistency: They maintain a uniform look and feel.
Collaboration & Hand-offs: Designers and developers work better together.
Collaboration & Hand-offs: Designers and developers work better together.
Speed: Faster design and development process.
Speed: Faster design and development process.
Brand Consistency: Ensures a unified visual identity.
Brand Consistency: Ensures a unified visual identity.
Onboarding: Eases new team member integration.
Onboarding: Eases new team member integration.
Ideation
The Design System Ideation
The Design System Ideation
Auditing the existing design: It formed the foundation of our design system, involving a detailed review to identify improvement areas and the need for a design system.
Auditing the existing design: It formed the foundation of our design system, involving a detailed review to identify improvement areas and the need for a design system.
Categorizing into Atoms and Molecules: An audit outcome that structured design elements and laid the groundwork for the design system's development phases.
Categorizing into Atoms and Molecules: An audit outcome that structured design elements and laid the groundwork for the design system's development phases.
Creating a screen inventory, mode, and interaction planning: Compiled versatile screens, introduced dark/light modes, and outlined interactions for a user-centric design system across mobile and web.
Creating a screen inventory, mode, and interaction planning: Compiled versatile screens, introduced dark/light modes, and outlined interactions for a user-centric design system across mobile and web.
Refining Flow and Architecture: It involved assessing user flow and application architecture to identify areas for improvements, ensuring the design system aligned with the desired user journey and product architecture.
Refining Flow and Architecture: It involved assessing user flow and application architecture to identify areas for improvements, ensuring the design system aligned with the desired user journey and product architecture.
This is the outcome of the audit:
This is the outcome of the audit:
At this step, we laid a foundation, clarified atoms and molecules, paving the way for subsequent phases to address inconsistencies, streamline development, and ensure a user-friendly product experience.
At this step, we laid a foundation, clarified atoms and molecules, paving the way for subsequent phases to address inconsistencies, streamline development, and ensure a user-friendly product experience.
Naming convention:
We emphasized naming conventions for consistency, clarity, and efficient communication, ensuring every team member easily understands and implements design components, fostering a seamless, cohesive product. This is how we implemented it:
Naming convention:
We emphasized naming conventions for consistency, clarity, and efficient communication, ensuring every team member easily understands and implements design components, fostering a seamless, cohesive product. This is how we implemented it:
Solution in detail
A Deep Dive into the Solution Phase of the Design System
A Deep Dive into the Solution Phase of the Design System
Styleguide:
The next step centered on creating a visual style guide, the foundation of our design system, and shaping brand principles and standards. A Unified Visual Language provided a clear, consistent framework, reinforcing our brand identity with harmonious visual elements.
Styleguide:
The next step centered on creating a visual style guide, the foundation of our design system, and shaping brand principles and standards. A Unified Visual Language provided a clear, consistent framework, reinforcing our brand identity with harmonious visual elements.
Atoms,Molecules and Organisms in Design System:
We began by strategically analyzing screens and selecting atoms, molecules, and organisms for each, enabling the crafting of tailored components to enhance the user experience on every screen.
Atoms,Molecules and Organisms in Design System:
We began by strategically analyzing screens and selecting atoms, molecules, and organisms for each, enabling the crafting of tailored components to enhance the user experience on every screen.
Atoms:
Molecules:
Organisms:
The hand-off process:
In the final design system step, we executed the essential "hand-off" to development, bridging design and implementation. This systematic transfer includes:
The hand-off process:
In the final design system step, we executed the essential "hand-off" to development, bridging design and implementation. This systematic transfer includes:
Detailed Documentation: We create comprehensive documentation with design specifications, asset libraries, and guidelines to provide developers with a clear roadmap.
Detailed Documentation: We create comprehensive documentation with design specifications, asset libraries, and guidelines to provide developers with a clear roadmap.
Open Communication: We maintain ongoing communication between design and development teams to address questions or clarifications promptly.
Open Communication: We maintain ongoing communication between design and development teams to address questions or clarifications promptly.
This phase marks the design-to-development transition, ensuring our well-defined elements become real, user-centric products aligned with brand identity and user experience standards.
This phase marks the design-to-development transition, ensuring our well-defined elements become real, user-centric products aligned with brand identity and user experience standards.
The Implementation
Executing the Design System
Executing the Design System
Web page designs:
Mobile screens:
Key learnings
My learnings after leading the project
My learnings after leading the project
The Power of Documentation: Meticulous documentation in our design system accelerated workflow and minimized errors, fostering collaboration.
Adaptability and Scalability: Our design system's adaptability accommodated growth and new features while maintaining efficiency and design integrity.
Importance of Collaboration: Collaboration has always been the driving force behind innovation, fostering creativity and cross-functional teamwork.
Continuous Learning: In the ever-evolving world of design systems, staying informed about emerging trends is vital for ongoing improvement.
The Power of Documentation: Meticulous documentation in our design system accelerated workflow and minimized errors, fostering collaboration.
Adaptability and Scalability: Our design system's adaptability accommodated growth and new features while maintaining efficiency and design integrity.
Importance of Collaboration: Collaboration has always been the driving force behind innovation, fostering creativity and cross-functional teamwork.
Continuous Learning: In the ever-evolving world of design systems, staying informed about emerging trends is vital for ongoing improvement.
That's a wrap! I hope you enjoyed it ✨
That's a wrap! I hope you enjoyed it ✨
More case studies
The Modern Data Stack
Product design case study • Research • 2021 • Technology
Curated repository of invaluable resources to empower individuals in mastering data stack best practices, and making informed choices for their specific use cases.
The Modern Data Stack
Product design case study • Research • 2021 • Technology
Curated repository of invaluable resources to empower individuals in mastering data stack best practices, and making informed choices for their specific use cases.
More case studies
Redesigning the alert system (IMS)
Product Design • Research • Redesign • SaaS
Revamped the entire product by redesigning the incident management system workflow, an integral core feature, & introducing a new onboarding process.
The Modern Data Stack
Product design case study • Research • 2021 • Technology
Curated repository of invaluable resources to empower individuals in mastering data stack best practices, and making informed choices for their specific use cases.
IMENCO
UX/UI Design case study • Research • 2022 • Sustainability
Encouraging and assisting individuals live a more sustainable life by consuming energy mindfully, saving on bills, and lowering their carbon footprint.
Like what you see? Let’s chat!
Like what you see? Let’s chat!
Find me on:
Find me on:
