SaaS Design System

Scaling and adapting design patterns for complex SaaS product experiences

Scaling and adapting design patterns for complex SaaS product experiences

We extended Dell’s existing design foundations to create a more comprehensive SaaS design library—tailored to support advanced, complex product use cases. This helped designers and engineers work more efficiently with scalable, consistent components across teams.

The Problem

Dell’s existing design system didn’t fully support the complexity of SaaS product workflows.

  • Many components weren’t built out in code

  • Key UI patterns needed for tables, filters, and configuration flows were missing

  • Designers were piecing together solutions from different sources, leading to inconsistencies and slowdowns

  • Designers had to mix-match components from various libraries

  • This caused inconsistent experiences, slower development, and misalignment between design and implementation

My Role

UX Designer

  • Collaborated with a small design team to build the SaaS design library from the ground up

  • Contributed to component exploration, pattern testing, and Figma implementation

  • Built Figma components and documentation in alignment with dev and design teams

  • Ensured the system was flexible, reusable, and scalable across multiple product

Process

1. Identify Gaps

  • Audited existing APEX and SaaS product design patterns

  • Documented pain points around reusability, scalability, and dev alignment

  • Flagged components no longer supported in code

2. Define Core Needs

  • Outlined requirements for core components (buttons, forms, tables, filters, tabs, etc.)

  • Focused on scalability across multiple teams and product types

3. Design Exploration

  • Co-designed modular, flexible components

  • Focused on state coverage, accessibility, responsiveness

  • Created Figma variants and design tokens for easy reuse

4. System Testing & Collaboration

  • Partnered with engineers to test feasibility and CSS alignment

  • Ran feedback cycles with design peers across orgs

  • Iterated and refined based on implementation feedback

5. Delivery & Adoption

  • Finalized a usable, documented Figma component library

  • Supported onboarding and answered usage questions during rollout

Impact

  • Enabled faster prototyping and design handoff for multiple product teams

  • Reduced inconsistencies in UI across Dell SaaS products

  • Improved collaboration and alignment with developers

  • Supported by designers across several high-level teams

Content

Content