Core Team:
I led a dedicated Core Team for the Design System, which included a Senior UX Designer and two Principal UI Engineers. This team reported to me, showing unwavering dedication to advancing the initiative.
Federated Community:
Additionally, we established an empowered Federated round table involving designers and engineers from each product group. These individuals were dotted line resources that committed to dedicating 25% of their work hours to the initiative. This structure ensured collaborative decision-making and representation from various teams, fostering a cohesive approach to design system development across the organization.
Design Asset Audit
Upon reviewing the Figma asset libraries of the acquired companies, as well as our existing F5 Cloud Solutions Team, it became apparent that each possessed varying levels of robustness and maturity. Following careful consideration, the Volterra Design System emerged as the most comprehensive. It was thus decided that leveraging this design systems "look and feel" would serve as an optimal starting point for initiating the consolidation process of the other systems.
Code Library Audit
Each company exhibited diverse levels of completion and detail within their respective design system code libraries. Additionally, a variety of frameworks, such as Angular, React, Vue, and Web Components, were employed across the different companies. Following meticulous evaluation and analysis, it was determined that NGINX's TypeScript-based framework for the front-end design system stood out as the most comprehensive. Consequently, it was deemed suitable for extension to integrate the disparate libraries most effectively.
Taxonomy Alignment
Taxonomy
During our audit, it became evident that the chosen code library and design asset library employed notably different taxonomies. Component names varied significantly, presenting a challenge to alignment. To address this, we assembled a squad to review and ensure that Core Components adhered to industry standards. Following thorough examination, we established consensus on the most appropriate naming conventions for these components.
Variations & Structure Examples
A Systems of Systems Approach for F5
Our goal was to maximize the reuse of common components while giving teams the flexibility to experiment and move at their own pace. We believed a Tiered Design System, tailored for F5, would ensure consistency, quality, and efficiency across the platform while providing the necessary agility for individual products.
After launching the F5DS MVP, which included product themes, an icon set, and initial components, we expanded to a Systems of Systems approach as the optimal solution for our product suite. This approach involved creating a Core library with essential elements for all products, a Community library for patterns shared across multiple products, and product-level libraries for unique, customized elements.
Code & Asset Libraries
Throughout our strategic planning phase, we collaborated extensively with the Product Management Team as they orchestrated the consolidation of over nine product companies into three distinct entities, now known as F5 Big-IP, F5 Distributed Cloud, and F5 NGINX. Our subsequent challenge involved devising a comprehensive strategy to consolidate all Figma Asset Libraries into a singular Team Project and outlining a roadmap for the development of a new, unified Figma Asset library and graduate elements that meet the bar from existing libraries. Concurrently, we formulated a strategy for converging the code libraries.
Figma Asset Library Unificiation
Phase 1: Consolidate all Figma Asset Library Projects under one new Team
Phase 2: Build a new headless Core Figma Asset Library following best practices
Phase 3: Graduate and publish existing Components & Foundations from other libraries into new Core
Phase 4: Build out new Community library and graduate assets
Phase 5: Build out Proudct Libraries For each of the new Product familes
Code Library Unification
F5DS was architected to support an ecosystem of hybrid code libraries across F5. F5DS UI components implemented in a framework-agnostic code library, built in vanilla JavaScript/TypeScript that generated framework-native UI component.
F5DS could be used in any modern UI framework this way, such as React, Angular, and event native JavaScript Web Components, from a single component definition.
Introducing Design Tokens
Design Tokens serve as the cornerstone of Design System implementation, defining crucial visual properties such as colors, typography, and spacing. By encapsulating design decisions into reusable variables, they ensure uniformity across platforms and assets, fostering scalability and consistency throughout an organization's design elements.
At F5, we introduced a multi-product, multi-brand Design Token architecture, attaining UX/UI code parity in both Figma and code. This pioneering approach unlocked new revenue streams by enabling white-label platform capabilities. Leveraging cutting-edge technologies like Node.js, TypeScript, React, Style Dictionary, Tokens Studio, HTML5, CSS3, and SCSS, we spearheaded innovation and elevated our design infrastructure to new heights.
Design Tokens Studio makes it easy to keep designs consistent across all platforms by integrating Figma with code libraries through a simple JSON adapter. This tool streamlines the design process, enhancing collaboration and speeding up iterations, ultimately making design systems more efficient and easier to maintain.
At F5, accessibility is a cornerstone of our design system, ensuring adherence to the highest standards such as WCAG Sec. 508. Our libraries undergo rigorous audits and integration into development and testing processes, ensuring compliance with WCAG AA standards for a superior user experience.
Accessible design not only benefits users with disabilities but also enriches the overall user experience. Essential features like ARIA controls, screen reader compatibility, and keyboard navigation are seamlessly integrated into our products. We prioritize keyboard navigation accessibility at the component level, facilitating expected tab-through focus of elements and enabling interaction via the spacebar and enter/return key. Additionally, we ensure proper support for screen reader ARIA roles and maintain consistent visible focus and selection states.
At the system level, we implement high contrast themes and automated readability validation to address potential issues like dark text on a dark background. Our approach to forms includes leveraging fieldset elements where recommended by WCAG, ensuring label-input alignment with for/id attributes, and upholding consistent spacing and sizing for text and elements.
Self-service Documentation & Evangelization
A well-documented design system is key to clear communication and driving adoption across the organization. It acts as a central hub for accessing guidelines, components, and resources. At F5, we extended this by utilizing self-service tools like a Slack community, Confluence, and a Jira intake system for feature requests and issue reporting. We also adopted an open contribution model, enabling cross-functional collaboration to continuously improve the system, fostering scalability and alignment across the platform.
Adoption & Governance
Recognizing the importance of Design System governance, we established a comprehensive process involving contributions from across the company. Through GitLab, check-ins, and testing were conducted rigorously, ensuring the integrity of our design assets. Similarly, a parallel process was set up for Figma, ensuring consistency and quality across platforms. Additionally, we formed a Design System Champions group to aid in tracking and monitoring implementation. Leveraging our Federated team structure, integration of contributions from various sources was seamless, enabling efficient testing and tracking throughout the implementation process.
A Dynamic, Rolling Roadmap
Design Systems, much like product entities, require regular assessment for successful evolution. My strategic role involved maintaining a comprehensive Design System Roadmap. I arranged yearly and quarterly reviews to continually refine our direction. Quarterly meetings were essential, enabling my team to synchronize our Roadmap with major themes, initiatives, objectives, and key results aligned with company goals. Our flexibility allowed swift pivoting when required. Additionally, I coordinated an annual Design System Summit, bringing together stakeholders to brainstorm and enhance the progress of the F5 Design System.