My Role
Sr UXUI(Product) designer/
Spec team lead /
Design system member
Time Frame
My participation
09/2022 - 06/2023
(This design system is still growing)
Target User
Herbalife Customers
Category
Design System
This design system is meant to build a unified design language for Herbalife's new global core-commerce experience, which includes touch points - the brand site Herbalife.com & Distributor's individual storefront, GoHerbalife.com.
• The design system is collaboratively maintained by us, a global team with members from the U.S., Brazil, and India.
• Our initial steps involved conducting competitor research & existing design system research, and analyzing existing brand guidelines to establish a master library.
• In our agile work environment, we continuously iterate our components, guided by feedback and needs from users, stakeholders, and clients
• After several rounds of testing and iterations, our ways of working also evolved into a streamlined process that accounts for the varied expertise of designers in the design system and promotes global team collaboration
In this project, I had the opportunity to wear multiple hats. I functioned not only as a product designer but also played key roles as a member of the design system team and as the lead for specifications (Spec Lead).
• I set up global library structure and ways of working that streamline the working flow and avoid back and forth interactions between designers and design system team
• I proactively set and advocated design system principles and standards to secure the quality of component creation.
• I constantly contributed to 10+ components libraries that consists of atomic level elements with new branding by creating 30+ components.
• I advocated accessibility and align our deliverables with AA compliance.
• I supported and mentored 3+ designers in other 3 teams to create pixel-perfect components.
• I secured and advocated consistency of components across all teams by adapting components to be flexible and suitable for various use cases.
In an International team involving designers from USA, Brazil, India,....
The need for a design system in Herbalife's project arises for two main reasons.
First, Herbalife updated the brand's visual language, website redesign needs to adopt the new visuals.
Second, the design system enables our team to deliver a cohesive design language and boost work efficiency. This is critical for this extensive Herbalife project, which encompasses 30+ features and 50+ design pages in 3 different breakpoints.
1 Flexibility
For the large-scale Herbalife project, with its 50+ webpages, 30+ features, and 3 breakpoints, a flexible design system is essential to cater to varied user needs across multiple devices/platforms effectively, while maintaining manageable workloads.
2 Consistency
We are a team includes designers from different timezone, who has various levels of detailed design expertise. This diversity can often lead to inconsistencies in design system components during collaboration.
3 Accessible and dynamic color usage
The brand's color palette is limited, necessitating strategic use to avoid poster-like visuals and address accessibility concerns effectively.
3 Effective communication & documentation
This design system, serving as a source of truth, will be utilized by designers, developers, product owners, managers, and leadership. It's essential to make it self-explanatory and well-documented for these varied roles.
Atomic design breaks down interfaces into fundamental building blocks (atoms, molecules, organisms, templates, and pages). This modular approach allows for the reuse of these components across different parts of a project, promoting flexibility and expediting design process.
I constantly contributed and helped team iterate the design system principles, defining what rules designers should follow to build components and the criteria of final deliverables.
I constantly contributed and helped team iterate the design system principles, defining what rules designers should follow to build components and the criteria of final deliverables.
Compared to leveraging colors only in the design system to diversify the visual, we also engage animation and various texture patterns and build library to standardize the usage.
We constantly aligned the components and design system guidelines with AA compliance to secure the accessibility.
To make the design system self-explanatory, we set up design system guidelines to explain the use case and rules of each set of components. Meanwhile, we annotated all 200+ screens to make sure developers understand how the design is structured by components.
