01
Project Context
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.
project Context
Challenges In this Project
Approaches
3 Core Approaches to Push the Project
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.
02
Foundations
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.
Type scale
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.
color ramp
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.
Semantic spacers
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.
Accessibility
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.
03
Localization
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.
04
Component Library
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.
05
accessibility check
Using Figma, we created variations for components with different states that passes WCAG 2.1 accessibility standard. In addition, we paired guideline to show internal designers and web producers how to adopt the design style.
for different breakpoints
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.
behavior documentation
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.
Semantic sizes
Utility components are defined with size and thickness pairings in order to maintain consistency while allowing for flexibility.
Template Library
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.
06
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.
