Building Design Systems that Work for Design and Dev

“Consistency isn’t something you enforce; it’s the natural byproduct of a well-structured system.” Parisa Bazl’s approach to design systems goes beyond aesthetics. In her talk at UXDX USA 2024, the Head of UX at Commvault shared a blueprint for creating scalable, modular systems that empower teams to focus on what truly matters: solving user problems.

The Challenge: Scaling Design Across a Complex Ecosystem

When Parisa Bazl joined Commvault in 2019, she was met with a daunting challenge. The enterprise-scale application lacked a unified design approach, leaving teams to navigate a fragmented system with inconsistent workflows. For a company specializing in data protection and cybersecurity, such disjointed experiences threatened not only efficiency but also the user trust that is critical in B2B SaaS environments.

With 700 developers and a disproportionately small design team, Bazl needed to find a way to align stakeholders, establish scalable workflows, and build trust across teams. The solution? A design system that worked seamlessly for both design and development.

Key Lessons from the Transformation

1. Aligning Stakeholders with Shared Goals

Bazl’s first step was securing buy-in from stakeholders at all levels of the organization. She approached this by tailoring her messaging to resonate with each group:

• Business stakeholders: Bazl framed UX improvements in terms of measurable outcomes, such as increased efficiency, reduced error rates, and lower training costs. By connecting UX to business impact, she secured leadership support for her initiatives.
• Development teams: For engineers, the focus was on scalability. Bazl emphasized how design systems could streamline workflows and reduce redundant efforts, allowing them to "do more with less."

This alignment paved the way for collaborative partnerships, ensuring that design was seen not as a bottleneck but as a critical enabler of innovation.

2. Embracing Modularity: The Key to Consistency

One of the most intriguing insights Bazl shared was the importance of modularity in design systems. Striking the right balance between flexibility and standardization was critical:

• Too granular: If components are overly specific, teams end up mixing and matching them in unintended ways, creating inconsistent experiences.
• Too rigid: Overly broad components force teams to "break the system" to accommodate unique use cases.

Bazl’s approach focused on finding the “just right” level of modularity, allowing the system to generate consistency naturally. “If you’re spending more time enforcing consistency than creating value,” she noted, “something is wrong with your system.”

3. Building Patterns Through Object-Oriented Design

Bazl introduced a groundbreaking concept to organize design patterns: object-oriented design, inspired by object-oriented programming.

• Data objects: She identified reusable “nouns” within the application, such as workloads, which could be standardized across use cases.
• CRUD workflows: Using the Create, Retrieve, Update, and Delete framework, Bazl categorized workflows into manageable patterns.

This method allowed the design team to abstract specific use cases into reusable templates, streamlining development across Commvault’s vast application ecosystem.

For instance, a "create workflow" for Kubernetes backups could also be applied to Salesforce integrations, saving time and ensuring consistency. Developers were able to adapt these patterns without reinventing the wheel for each new feature.

4. Partnering Strategically Within the Organization

With a small team of designers, Bazl knew she couldn’t provide hands-on support to every development team. Instead, she focused on finding key partners—teams with the motivation, resources, and cultural openness to embrace the design system.

These partnerships became pilot projects, demonstrating the value of the design system to other teams and creating momentum for wider adoption.

5. Facing Realities: Scaling Takes Time

Transformation doesn’t happen overnight. Bazl emphasized that building a robust design system took years of effort:

• Observation: Her first year at Commvault was spent understanding the organization and its pain points.
• Iteration: Patterns and components were refined iteratively, starting with high-impact workflows.
• Phased rollout: Teams adopted the system at their own pace, with guidance and support from the UX team.

Along the way, there were battles won and lost. For example, Bazl recalled a debate over including page titles in designs. Initially vetoed by leadership, the absence of titles later failed an accessibility audit, proving her point in hindsight.

The Benefits: Elevating UX Across the Organization

By 2024, Commvault’s design system was delivering measurable benefits:

• Efficiency: With a single source of truth for components and patterns, teams could implement changes faster and more accurately.
• Consistency: The system naturally enforced standards, reducing the need for manual intervention.
• Scalability: Developers were empowered to create complex workflows independently, freeing the UX team to focus on innovation.
• Accessibility: The design system made it easier to meet compliance standards, improving the experience for all users.

Perhaps most inspiring, Bazl’s team partnered with a nonprofit to offer internships to underrepresented groups, leveraging the design system’s accessibility to lower the barriers to entry into the UX field.

Key Takeaways for Your Organization

• Tailor your pitch: Speak the language of your stakeholders—business impact for leadership, scalability for developers.
• Embrace modularity: Aim for components that are flexible enough to adapt but consistent enough to create cohesion.
• Abstract patterns: Use frameworks like CRUD workflows to standardize processes across teams.
• Find key partners: Start with motivated teams to build momentum for system-wide adoption.
• Be patient: Real transformation takes time, and perfection shouldn’t be the enemy of progress.

Final Thoughts

Parisa Bazl’s journey at Commvault highlights the power of thoughtful design and collaboration. By creating a system that worked for both design and development, she not only transformed a complex application but also built a culture of innovation and inclusivity.

Ready to transform your design systems? Dive into Parisa’s full talk for more insights: https://uxdx.com/session/building-design-systems-that-work-for-design-and-dev1/