My Contribution
When I joined, F5 had an initial design direction to integrate the visual language of the website app. I led the project and expanded it into a complete documented design system in Figma, while also collaborating with project managers and developers to implement the changes.
Improving a design system from a design foundation to let global sibling sites could share a common design language and documenting the interactive and responsive behaviors.
Lacking interactive and responsive behaviors for development
Inconsistency of design styles and interactive behaviors
Missing design guidelines and direction
Pressure for agile solutions without discovery and research
Imperfection on pixel level caused by immigration from XD to Figma
Accessible
With accessibility compliance laws varying from market to market, we wanted our system meets Web Content Accessibility Standards (WCAG 2.1).
Cooperative
With requirements from multiple teams and stakeholders, we need to fully communicate the needs and inform the updates smoothly.
Flexible
With the growing needs of sibling teams, we want the flexibility of the components support the patterned template.
Important as the core reference point for all design decisions and serves as a guide for designers, developers, and other stakeholders. Our foundations supported our brand logos, breakpoints & grid systems, semantic spacings, typography, theming, color systems, and elevation.
We introduced a typescale that was based on display headings, utility headings, paragraph styles, and supporting styles. Our color scale allowed for a branded palette that was flexible with light and dark color variations while we maintained a global interactive, neutral, and feedback palette across all the brands for maximum contrast accessibility.
We maintained a consistent design langauge between brands by ensuring a light and dark mode variation for any button, input, or interaction. This allowed for more flexibility in element placement on pages with a wider range of background options while maintaining optimial contrast.
In order to enhance the development and user acceptance testing (UAT) processes for the project and establish a consistent style for its components, we implemented the use of semantic spacers to designate margins and paddings.
Components library stores reusable interface components that shares the same interaction logic and reflects the comprehensive interactive behaviors and responsive behaviors across different breakpoints. I created components and documented for 23 components.
Every component received details into different breakpoints so that web producers would well understand the prospective look and feel across different devices. In addition, with full communications with sibling teams, components have a theming treatment to extend the capability of theming needs.
Each component received stepped interaction examples so that each interactive states are clearly communicated. These are paired with detailed specification around maximum text length across breakpoints, tab stops, keyboard control and spacings.d
Utility components are defined with size and thickness pairings in order to maintain consistency while allowing for flexibility.
Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.
With defined foundation elements and components, page templates were created as a pattern library to show web producers the prospective look and feel. Those template pages also enabled us to engage in conversation with internal stakeholders to push the project forward.
When thinking about accessibility for a design system, designers should consider factors such as color contrast, typography readiness, keyboard navigation, focus states, form elements input, alternative text for non-text content, and ensuring compatibility with assistive technologies.
Localization is important for a design system as it allows designers to consider longer text in different languages and the impact it may have on the design, such as font size, spacing, and layout, to ensure that the design remains visually consistent and accessible across different languages and cultures. This requires a careful consideration of typography and design elements to ensure that the design system is flexible enough to accommodate different languages without compromising its visual integrity.
