Walk me through the design system of one of the products youve PMed.

Designing a Scalable and Modular Design System for a SaaS Product

The design system for our SaaS product is built on a component-based architecture, emphasizing modularity, reusability, and scalability. It incorporates atomic design principles, a robust theming system, and version-controlled documentation to ensure consistency across the product while enabling rapid iteration and customization.

Introduction

As the Technical Product Manager for our enterprise SaaS platform, I've been deeply involved in the development and evolution of our design system. This system is crucial for maintaining consistency, improving development efficiency, and ensuring a high-quality user experience across our complex application. I'll walk you through our approach, highlighting the technical considerations and strategic decisions we made along the way.

Step 1

Clarify the Technical Requirements (3-4 minutes)

Before diving into the details, I'd like to clarify a few key points about our product and technical environment:

• Looking at the scale of our SaaS platform, I'm assuming we're dealing with a large, multi-tenant application. Can you confirm the approximate number of concurrent users and tenants we need to support?

Why it matters: Determines the level of customization and performance optimizations needed in our design system. Expected answer: 100,000+ concurrent users across 1,000+ tenants. Impact on approach: Would need to ensure our design system supports efficient theming and component rendering at scale.

• Considering the product's technical stack, I'm thinking we're using a modern JavaScript framework like React or Vue. Could you specify which framework we're using and if there are any specific version constraints?

Why it matters: Influences the choice of component library and build tools for our design system. Expected answer: React 17+, with plans to upgrade to React 18 in the near future. Impact on approach: Would leverage React-specific tools and optimize for concurrent rendering.

• Given the enterprise nature of our product, I imagine we have strict accessibility and internationalization requirements. Can you outline our specific compliance needs?

Why it matters: Affects how we structure our components and theming system to support various languages and accessibility standards. Expected answer: WCAG 2.1 AA compliance required, with support for RTL languages. Impact on approach: Would need to build in robust accessibility features and bi-directional layout support from the ground up.

• Thinking about our development workflow, I'm curious about our current CI/CD setup. How frequently are we deploying changes to production, and what's our approach to versioning?

Why it matters: Influences how we structure our design system updates and documentation. Expected answer: Daily deployments with semantic versioning for the design system. Impact on approach: Would need to implement a robust versioning and deprecation strategy for design system components.

Based on these clarifications, I'll assume we're working with a large-scale React application with strict accessibility requirements and frequent deployments. Let's proceed with the design system walkthrough.