Zuora Design System

 
 

The Zuora Design System (ZDS) is a set of reusable components and patterns designed to scale the platform, reducing redundancy and ensuring a cohesive user experience across products. As Zuora grows, ZDS helps integrate acquired companies and enables decoupled products, creating a unified design language across the ecosystem.

Design System Users

  • Zuora application developers

  • Zuora product owners

  • Zuora designers

Goals

As Zuora aims to lead in design excellence and innovation, the ZDS empowers designers, product managers, and engineers with a self-service design system. This system accelerates design development, promotes visual consistency, fosters collaboration, unifies design language, and serves as an educational resource across the organization.

Leading Strategy and Execution

As the lead designer and manager of the design system, I drove its growth and adaptability, focusing on:

  • Scaling the Design System: I led a team to scale ZDS across the platform, aligning product, design, and engineering through cross-functional processes. I encouraged collaboration between designers and engineers to drive system adoption while managing project tasks via Jira to prioritize and track updates.

  • Adapting to Challenges: I adapted workflows to maintain progress by engaging the app engineering teams when we lost engineering support. I also led the team through a shift to a service-oriented model, collaborating with UX developers to enhance quality and efficiently distribute new patterns independently.

  • Platform Redesign Preparation: I work closely with design directors, designers, and UX developers to provide the right assets for new products and features. This ongoing effort involves documenting processes, reviewing components, implementing updates to align with redesign goals, ensuring accessibility compliance, and facilitating more accessible system updates once we finalize the new aesthetic language.

Defining the ZDS Framework: Scalability & Flexibility

ZDS is built upon four key pillars grounded in Zuora's Core Design Principles:

  1. User-First Approach: Prioritizing intuitive, user-centered experiences.

  2. Accessibility: Designing every component with inclusivity to ensure user usability while ensuring WCAG 2.1 Level AA standards compliance.

  3. Consistency & Configurability: Ensuring a unified look and feel across all products to reinforce the Zuora brand.

  4. Scalability & Collaboration: The system supports new features and products with minimal rework, allowing it to grow alongside Zuora's platform.

These pillars enable us to create new patterns and enhance existing components to support use cases unique to our users and their needs. Regular design sessions with cross-functional teams ensure alignment with design, product, and engineering requirements, enhancing collaboration and speeding up delivery through reusable components.

Artifacts and Best Practices

To ensure consistency and efficiency, we implemented:

  1. ZDS Design Portal: This is a centralized resource that offers UX guidelines, usage instructions, and links to Figma and Storybook resources. It empowers designers, product managers, and engineers to work independently when design resources are unavailable. It is accessible to anyone in the company interested in learning more about our design system.

  2. Design Best Practices: Guidelines for component design that provide essential information without overwhelming designers, streamlining the documentation process.

  3. Templates: Standardized working files that provide consistent information across all design specifications.

  4. Accessibility Checklists: Comprehensive lists and recommended tools to verify compliance with accessibility standards.

  5. Design Checklists: Comprehensive lists ensure all component design aspects are addressed.

Reflections and Looking Ahead

Leading the development of ZDS has transformed my leadership journey and our design teams. We fostered a collaborative culture that enhanced efficiency and strengthened cross-functional relationships, creating a living system that evolves with Zuora's needs to deliver an exceptional user experience.

A key takeaway has been recognizing the importance of flexibility in design systems. While consistency is essential, the ability to scale and adapt—especially in response to unexpected situations or factors outside one's control—is equally critical in a fast-growing company. As ZDS expands with new products and features, I take pride in our foundational work that has built a robust, flexible, and future-ready design system as we shape the next generation of Zuora.

Delivering Results: Efficiency, Consistency, and Impact

The implementation of ZDS had a significant impact. Within just a few months of the first release, we saw:

  • 40% reduction in the time needed to design and develop new features due to the reusability of components.

  • A 30% improvement in the consistency of the user experience across Zuora’s product suite, according to internal audits and stakeholder feedback.

  • Faster onboarding of new team members—both in design and development—who now had clear guidelines and resources to follow.

The ZDS didn’t just streamline our workflow; it elevated the quality of our work across the board. The scalability we built into the system allowed our design team to confidently handle the growing demands of Zuora’s product expansion without constantly reworking core elements.

Input Components encompasses text input and text area, selection controls, and Form Layout.

Prototypes:

Form Layout provided design, usage, and behavioral guidelines for consistency across forms in the application.

Prototypes/Specs:

Progressive Loading defines the loading of individual components as well as page loading patterns.

Prototypes:

Attachments which included the document upload workflow, five data collections that hold attachments across devices, and Image Viewers.

Prototypes:

Takeaways

  • For this multi-year initiative to succeed, executive sponsorship is required

  • Collaboration, coordination and communication are essential for the progression of a project this size