F5 Design System

F5DS

Overview

My Role | Principal UX Designer & Operations Director

UX Team | Sr. UX Designer,
Principal Software Engineers (2)

Go To Website

Tools | Figma, FigJam, TypeScript, React, Web Components, Angular, Node.JS, Jira, Confluence


Goal

F5's Journey to a Unified Multi-branded Design System
A "Systems of Systems" approach to integrating 9+ product acquisitions into a single source of truth and cohesive UX by consolidating multiple Figma design assets and UI code libraries to deliver design at platform scale.

Problem:
The existence of fragmented assets, code libraries, and app frameworks led to inefficiencies in both design and development processes at F5. To address this, I spearheaded the creation of a unified Design System Team. Our goal was to consolidate these disparate elements into a cohesive system that would streamline development, reduce redundancy, and enhance the user experience for a platform supporting over 400 million web applications. This initiative aimed to improve collaboration between teams and accelerate product development, ensuring consistency and scalability across the platform.

Success:
We unified three product families within a year, using a System of Systems approach to streamline development and reinforce our brand identity by standardizing components, icons, themes, and UX patterns. Testing, feedback, and training ensured widespread adoption, resulting in increased user satisfaction and improved workflows, showcasing our commitment to exceptional experiences driving business growth.

  • Saved F5 1000+ of hours in UX Design and UI Engineering by supporting production teams in building and delivering a common UX/UI platform toolset.
  • Delivered a versatile UI component & Foundations library enabling code to be written once and utilized across all F5 products, regardless of tech stack.
  • Unified F5's UX with standardized design tooling, reducing F5’s operational expenses.
  • Centralized a single-source-of-truth for brand definitions with Design Token Architecture that can be shared with any F5 app.
  • Delivered a unified multi-brand toolset for F5 Product Design to ship white label products.

The Challenge to Unify

Acquisition Logos

Acquisition Screens

> 1. Assembling a Hybrid, Federated Team

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.

Core and Federated Teams


> 2. Assessing the Situation & Leveraging Quality Work

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.

Figma Asset Library (Volterra)

F5DS Figma Asset

Volterra Asset

Web Components Code Library (NGINX Emerald)

Emerald Home

NGINX


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.

Taxonomy

Variations & Structure Examples

Variations


> 3. Establishing the Vision

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.

System of Systems Approach

> 4. Library Unification & Integration

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.

F5 Consolidated Products

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

F5 Consolidated Products

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.
F5 Code Libraries Consolidated

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.

Design Tokens

Design Tokens

Design Tokens


> 5. Product Design Outcomes

We formed specialized, cross-functional squads within the Federated Team to proactively address the most critical design challenges across product groups. By prioritizing these needs, we empowered the squads to take the lead, conducting breakout Design Studio sessions where we thoroughly analyzed use cases and brainstormed solutions. This approach allowed us to dive into key design elements such as component variations, color, typography, spacing, and UX patterns, effectively resolving significant design issues and driving impactful results.

Design Principles

Design principles serve as our guiding light, steering decision-making and shaping how we tackle challenges. They not only influence the approach of product designers and UI engineers but also define our outputs. We started by reimagining F5's company principles to suit our user-centric needs, fostering alignment across the product organization to scale and boost velocity. While we draw inspiration from other companies, our principles are crafted by introspection, ensuring they are actionable and impactful. Continuously refining, we strive for improvement, as outlined below in our collaborative principle-building efforts.

FLEXIBLE
A flexible design system can scale up or down as needed, is adaptive, not restrictive, allows for reuse, and maintainability. The design system is flexible enough to cover simple use cases and scale up when needed. Components, patterns, and processes are modular, generic and adaptable, allowing them to be reused in many contexts.

DEPENDABLE
A dependable design system is a self-service system users and contributors from multiple teams can use and have a federated collaboration without outside help. The system raises confidence by providing the necessary resources, guidance, and context to help users and builders make decisions. Product designers and UX engineers across multiple teams work together to both consume and help establish the patterns, components, and the overall design system relying on provided resources.

DATA-DRIVEN
User-centered data and research, not individual opinions, inform a data-driven design system. The data is validated and iteratively updated. The steps to gather and analyze the data follow industry best practices and are checked for bias. The system uses a data-driven and user-centered approach to build for real people. We listen to our customers, test and validate our designs, and iterate as needed. The products we design and develop help customers succeed.

COHESIVE
A cohesive design system feels familiar and matches users' mental models. The system is predictable, transparent, and, consequently, trustworthy. The design system creates something that looks like it all belongs together, feels natural, and matches expectations. Things work as intended and users won’t be surprised with unexpected and undesired behavior.

ACCESSIBLE
The system is accessible and inclusive, allowing creators to build products for customers' diverse abilities. The system itself is discoverable, understandable and concise. The system is accessible in the first place. It is tested with available tools and audited from time to time to ensure it fits the standards. The system is discoverable, approachable, and learnable for everyone regardless of background, experience level, or training. All assets, guidelines, and operational entities are widely available and easy to use.


Component Examples

Components


Foundation Examples

Foundations

Pattern Examples

Patterns

Icons

A specialized squad within our Design System team was tasked with crafting a comprehensive set of system and application icons to be deployed across our entire product suite, including branding and marketing materials. Collaborating closely with product groups and marketing, we meticulously developed a collection of 181 icons tailored to various functionalities. Given F5's multi-platform nature, we ensured uniformity across all platforms to guarantee seamless user experiences. Our icon set, consisting of variable icon fonts available in seven weights and across three distinct styles, embodies versatility and consistency, enhancing user engagement and accessibility across F5's diverse product landscape.

F5DS Icons


Navigation & Layout

To ensure a cohesive user experience, we prioritized consistent navigation and layout implementation. After evaluating various approaches and user needs, we found that the Volterra implementation best suited all products. Leveraging a tiered architecture, we accommodated variations for specific product needs, ensuring cohesion while meeting diverse user requirements.



Dashboard Convergence

Dashboards hold paramount significance for F5 clients, serving as the primary interface for navigating cybersecurity and load balancing server data. In the realm of F5's extensive machine learning endeavors, these dashboards play a pivotal role in presenting rapidly evolving information. Ensuring their flexibility to accommodate burgeoning data volumes is imperative. Equally critical is standardizing data visualizations to enhance user clarity and consistency across the suite of products, ensuring uniformity in color schemes and widget presentation.

F5DS Dashboards
F5DS Dashboards

> 6. Focus on Accessibility

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.

Accessibility


> 7. Maintenance & Strategy

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.

Doc Site


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.

Progressive Adoption


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.


Progressive Adoption

Let's Work Together!

I am currently based in Seattle.
I love to travel and can meet you anywhere in the world.