Abbiswaran – Product Designer & No-Code Developer

Design System 2.0

Our company, a fast-growing SaaS startup, faced challenges in maintaining consistency across its rapidly evolving product suite. With multiple designers and developers working on different features, inconsistencies in UI components, patterns, and branding began to impact the user experience and development efficiency.

Objective: To create a scalable design system that would:

Standardize the visual and functional components.
Improve cross-team collaboration between design and development.
Accelerate product development and reduce rework.

Role:

Lead Designer

Industry:

B2B SaaS

Duration:

3 Months (Sep 2022 - Nov 2022)

Challenges

Inconsistent UI Patterns: Designers often recreated components from scratch, leading to varied styles.
Slow Development Cycles: Developers lacked reusable components, causing delays in implementation.
Scalability Issues: As the team grew, onboarding new designers and developers became cumbersome without a unified framework.

My Approach

Discovery & Research

Stakeholder Interviews: Conducted sessions with designers, developers, and product managers to identify pain points and requirements.
Audit: Performed a comprehensive UI audit to identify commonly used patterns, redundant components, and gaps in consistency.
Competitor Analysis: Studied how similar companies approached design systems.

Defining the Foundation

Discovery & Research

Stakeholder Interviews: Conducted sessions with designers, developers, and product managers to identify pain points and requirements.
Audit: Performed a comprehensive UI audit to identify commonly used patterns, redundant components, and gaps in consistency.
Competitor Analysis: Studied how similar companies approached design systems.

Defining the Foundation

Discovery & Research

Stakeholder Interviews: Conducted sessions with designers, developers, and product managers to identify pain points and requirements.
Audit: Performed a comprehensive UI audit to identify commonly used patterns, redundant components, and gaps in consistency.
Competitor Analysis: Studied how similar companies approached design systems.

Defining the Foundation

Atomic Design Principles: Components were organized into Atoms, Molecules, and Organisms for modularity.
Design Tokens: Created reusable tokens for colors, font sizes, and spacing for flexibility and scalability.
Component Library: Identified 20 core components (e.g., buttons, modals, inputs) that could cover 80% of the product needs. Testing and Iteration

Collaboration with Development

Partnered with developers to create a coded component library using React. Ensured components were accessible (WCAG 2.1 compliant) and responsive.
Integrated Figma design files with the Storybook component library, enabling developers to access fully aligned, ready-to-use components and ensuring consistent implementation across the product.

Collaboration with Development

Partnered with developers to create a coded component library using React. Ensured components were accessible (WCAG 2.1 compliant) and responsive.
Integrated Figma design files with the Storybook component library, enabling developers to access fully aligned, ready-to-use components and ensuring consistent implementation across the product.

Collaboration with Development

Partnered with developers to create a coded component library using React. Ensured components were accessible (WCAG 2.1 compliant) and responsive.
Integrated Figma design files with the Storybook component library, enabling developers to access fully aligned, ready-to-use components and ensuring consistent implementation across the product.

Rollout & Adoption

Hosted workshops and training sessions for designers and developers to demonstrate how to use the system effectively.
Established a governance model to handle updates and new additions.

Rollout & Adoption

Hosted workshops and training sessions for designers and developers to demonstrate how to use the system effectively.
Established a governance model to handle updates and new additions.

Rollout & Adoption

Hosted workshops and training sessions for designers and developers to demonstrate how to use the system effectively.
Established a governance model to handle updates and new additions.

Results

Faster Development Cycles: Reduced the average time to ship a feature by 30%.
Consistency Achieved: 95% of the UI across all products aligned with the design system within six months.
Improved Collaboration: Design-to-development handoffs became seamless, reducing rework by 40%.
Enhanced Onboarding: New hires could ramp up 50% faster due to clear guidelines and reusable components.

Faster Development Cycles: Reduced the average time to ship a feature by 30%.
Consistency Achieved: 95% of the UI across all products aligned with the design system within six months.
Improved Collaboration: Design-to-development handoffs became seamless, reducing rework by 40%.
Enhanced Onboarding: New hires could ramp up 50% faster due to clear guidelines and reusable components.

Before vs After

Future Plans

Expand Component Coverage: Add more reusable components and patterns based on feedback from teams, focusing on commonly requested elements to increase adoption and efficiency.
Multi-Brand Theming: Introduce multi-brand support to easily switch between themes for different products or clients, improving scalability for brand-specific customizations.
Accessibility as a Priority: Conduct regular accessibility audits to ensure compliance with WCAG standards and make the system fully inclusive for all users.
Analytics and Feedback System: Create a feedback mechanism to collect insights from designers and developers about component usage, challenges, and areas for improvement.
Use analytics to track component adoption rates and refine the system accordingly.
Design System Governance: Establish a formal governance process for maintaining and evolving the system, including version control and team ownership to ensure scalability and consistency.

Conclusion

The design system not only improved efficiency but also set a strong foundation for future growth. It enabled the company to scale its product suite without compromising on quality or brand consistency.

Request for Access

This project is protected by a Confidentiality Agreement, please contact me for additional information related to it.

More Projects