How to Manage Complex Design Systems

This video provides an in-depth exploration of how Veeva, a major player in the life sciences technology space, successfully overhauled and scaled its complex design system. Louis Dorman, Lead Product Designer, and Robert Burton, Design Operations Manager at Veeva, share practical tips and lessons learned from their journey to achieve widespread adoption and efficiency in a collaborative design environment. The discussion highlights the evolution from a UX-department-owned system with scattered efforts to a formalized, transparent, and highly integrated design system that supports 1200 customers across 165 countries, including 47 out of the top 50 pharmaceutical companies.

The presentation details the critical steps Veeva took to transform its design system. Initially, the company faced challenges such as duplication of effort, lack of transparency, and inconsistent adoption across product squads. The turning point involved embracing atomic design principles, which helped standardize the language used across design, build, and QA phases. This standardization was further supported by tools like Zeplin for documenting component definitions and fostering cross-team collaboration. A key innovation was the introduction of "design system previews," which opened communication channels between UX and engineering, streamlining the build process by providing early visibility into design decisions.

Further enhancements included formalizing the handoff process by clearly defining roles and responsibilities and documenting communications within Zeplin to ensure accountability and facilitate revisiting decisions. Veeva also tackled the complex issue of regressions and explicit changes by involving QA resources early in "dev discoveries" to identify all impacted areas of a component before changes were implemented. This proactive approach significantly reduced downstream work and prevented breaking existing functionalities. The speakers also emphasized standardizing the design workflow, choosing the right tools (e.g., migrating from Sketch to Figma), and establishing comprehensive guidelines and templates, including a detailed checklist for designers to ensure consistency and completeness. The success of these efforts culminated in 100% adoption of the design system for Android development and the integration of over 450 iOS components across hundreds of thousands of locations, alongside large-scale audits to replace legacy assets like PNG icons with vector SVGs and inconsistent hex colors with a defined palette of semantic colors.

Key Takeaways:

• Dedicated Design Operations (DesignOps) Role is Crucial: Hiring a dedicated DesignOps manager significantly improves design system management, prioritization, and execution by acting as a bridge between UX, engineering, QA, product squads, and leadership. This role brings structure and accountability that a purely UX-owned system often lacks.
• Embrace Atomic Design Principles Across the Entire Workflow: Adopting atomic design not just for UX but for the entire design-to-build-to-QA process helps standardize language, define component scope (atoms, molecules), and improve collaboration and communication across all teams.
• Implement Design System Previews for Enhanced Transparency: Regular previews of design system updates or new components for engineering and QA teams foster early engagement, provide a "bigger picture" understanding, and streamline the build process by aligning expectations upstream.
• Formalize the Handoff Process with Clear Roles and Documentation: Establishing clear roles, responsibilities, and a documented handoff process (e.g., using Zeplin to record communications and component definitions) minimizes miscommunication, allows for revisiting decisions, and ensures consistent implementation.
• Involve QA Early in "Dev Discoveries" for Regression Management: Proactively engaging QA and dev teams in "dev discoveries" for legacy or complex components helps identify all potential impacted areas before design changes are made, preventing regressions and significant rework later in the development cycle.
• Standardize Design Workflow and Tooling: Defining a clear design workflow and choosing intuitive tools (e.g., migrating from Sketch to Figma with organized files) is essential for efficiency, consistency, and future scalability. Proper naming conventions and folder structures are vital for smooth transitions between tools.
• Establish Comprehensive Guidelines and Templates: Creating and continuously updating guidelines, templates, and checklists for designers (e.g., for interactive layers, light/dark mode properties) ensures consistency, serves as a reminder for best practices, and empowers designers to contribute effectively.
• Achieve High Adoption Rates for Significant Impact: Veeva's success in achieving 100% design system adoption for Android and integrating hundreds of iOS components demonstrates the profound impact of a well-managed system on consistency, efficiency, and scalability across multiple applications and organizations.
• Conduct Large-Scale Audits for Technical Debt Reduction: Proactive audits, such as replacing hundreds of PNG icons with vector SVGs and standardizing hex colors into a semantic palette, significantly reduce technical debt, improve performance, and provide engineers with clear, consistent resources.
• Build Trust Through Transparency in the Design Workflow: Communicating the status of design work (e.g., "waiting on peer review") to product managers and other stakeholders builds trust in the design process and provides clarity on project progression.
• Document Everything: Maintaining a Design System Manager (DSM) or CMS for components, along with documenting decisions and properties within design tools like Zeplin, ensures that all definitions, guidelines, and historical context are easily accessible to all teams.
• Prioritize Peer Review: Implementing a peer review process for design system components ensures quality, consistency, and adherence to established guidelines before components are finalized and adopted.

Tools/Resources Mentioned:

• Zeplin: Used for documenting component definitions, fostering collaboration, and recording handoff communications.
• Sketch: Previous primary design tool for Veeva's design system.
• Figma: Current primary design tool, Veeva migrated from Sketch to Figma.
• DSM (Design System Manager): Described as a CMS (Content Management System) for defining and documenting components.

Key Concepts:

• Design System: A comprehensive set of standards, components, and guidelines used to manage design at scale, ensuring consistency and efficiency across products.
• DesignOps (Design Operations): The practice of optimizing and streamlining design processes, workflows, and tools to enable design teams to work more effectively and deliver higher quality outcomes.
• Atomic Design: A methodology for creating design systems by breaking interfaces down into their fundamental building blocks (atoms) and progressively combining them into molecules, organisms, templates, and pages.
• Regressions (Explicit Changes): Unintended negative impacts or broken functionalities that occur in existing software when new changes or updates are introduced, particularly within a design system.
• Dev Discovery: A collaborative process involving design, development, and QA teams to thoroughly investigate existing components or features, outline their states, labels, and definitions, to inform new design system component builds and prevent issues.
• Handoff Process: The formal transfer of design specifications, assets, and documentation from the design team to the development team for implementation.
• Semantic Colors: A system of naming colors based on their purpose or meaning within the UI (e.g., "primary-button-background," "error-text") rather than their literal hue (e.g., "blue-500"), improving consistency and maintainability.
• Vector SVG Icons: Scalable Vector Graphics (SVG) are XML-based vector image formats for two-dimensional graphics, offering scalability without loss of quality, preferred over raster images like PNGs for icons in design systems.

Examples/Case Studies:

• Veeva's Design System Overhaul: The core case study of the video, detailing the company's journey from a fragmented design approach to a highly integrated and adopted design system.
• 100% Android Adoption: Veeva achieved complete adoption of its design system for all new Android development, demonstrating the effectiveness of their processes.
• 450+ iOS Components Integration: Over 450 iOS components were integrated across hundreds of thousands of different locations within Veeva's applications.
• PNG to SVG Icon Audit: A large-scale audit replaced hundreds of legacy PNG icons with modern, scalable vector SVG icons.
• Hex to Semantic Color Audit: Hundreds of inconsistent hex colors were replaced with a defined palette of about 60 primary, secondary, and alert semantic colors, improving consistency and maintainability.