F5 Design System
Scalable Figma Design System
I collaborated with a cross-functional team to evolve F5’s design system in support of its corporate website and growing network of subsites. This project was also a strategic opportunity to migrate from Adobe XD to Figma, bringing our team into alignment with F5’s product organization and enabling a more unified, scalable design workflow.
My contributions for this first phase of work focused on defining accessible, reusable UI components; refining the visual language; and improving collaboration between design, brand, and engineering. The resulting system enhanced design consistency, accelerated development, and laid the foundation for a cohesive and inclusive digital experience across F5.com.
F5
Design system
Challenge
F5 needed a clear, scalable design system that would unify the look and feel across its corporate website and expanding network of subsites. The existing design assets were fragmented, making it difficult for designers and developers to work efficiently and consistently. Additionally, the team was transitioning from Adobe XD to Figma. This shift required establishing new workflows and collaboration practices.
This project also aligned with the evolution and refresh of F5’s “SaaS Forward” website, with a strong emphasis on improving accessibility compliance and delivering a better overall user experience for a diverse audience.
Role & Process
I worked as a lead UI/UX designer, collaborating with brand, engineering, and content teams to evolve the system with future phases in mind. My process included:
-
Auditing existing design assets and identifying accessibility gaps
-
Establishing core UI patterns and design principles aligned with brand and user needs
-
Creating and iterating on foundational components in Figma
-
Collaborating with engineers to ensure feasibility and smooth implementation
-
Participating in team workshops and contributing to shared documentation that supported alignment and adoption
Design Solution
We approached the system design with scalability, accessibility, and alignment in mind. This laid a strong foundation while planning for future growth.
Brand Icons
To support storytelling and clarity across the site, I helped develop a categorized library of brand icons designed by the brand team to illustrate technical concepts, industries, product features, and benefits. The icon system was organized by product family and solution type, making it easier for teams to find and apply assets consistently.
Brand Logo
I established usage guidelines for the F5 logo in digital environments, aligning with updated brand standards. This included clear rules for spacing, sizing, and logo lockups, especially for co-branded instances with partners, internal teams, and product identities, ensuring consistent brand application across web experiences.
Button
As high-visibility UI elements, call-to-action buttons received special attention. I enhanced the contrast of the primary CTA for accessibility and defined clear, consistent visual cues for different interaction states. This ensured better usability and brand cohesion.
Color System
When the brand team rolled out updates to the company’s color palette, we quickly aligned the web platform to reflect these changes. I implemented the new system using Figma Variable Panes, enabling consistency across components and simplifying future updates throughout the design library.
Typography
We refreshed the desktop and mobile typography systems to improve clarity, consistency, and accessibility across F5.com. Updates included switching headline fonts to Neusa Next Wide, adjusting headline sizes, increasing body text size to 18px, and refining spacing and hierarchy. These changes enhanced legibility while supporting F5’s evolving brand direction.
Impact & Outcomes
The F5 Design System brought immediate clarity and visual consistency across the corporate website and its growing network of subsites. By standardizing interactions, components, and styles, the system enhanced the user experience and accelerated future web development through reusable assets.
Serving as a single source of truth, the system fostered stronger collaboration among writers, designers, developers, and agency partners, streamlining design decisions and ensuring brand integrity. It also simplified accessibility compliance and global updates, enabling scalable growth while maintaining consistency.
This foundational phase laid the groundwork for future expansion into complex layouts, interactive components, and comprehensive content systems that support F5’s evolving digital brand.
All Projects
