- Context
- A global brand change needed to work across products, markets, and agency teams.
- My responsibility
- I audited legacy patterns and designed reusable components, tokens, and motion rules.
- Main decision
- Consolidate repeated patterns into flexible components with controlled variants and overrides.
- What changed
- A shared library connected reusable components, tokens, and motion rules across design and code.
Auditing and consolidating patterns
I audited existing pages to identify repeated text styles, colours, interface elements, and patterns that could be consolidated.
The refreshed identity replaced inconsistent legacy styles.
The shared visual language supports consistent experiences across products and markets.
The audit mapped legacy patterns to the new system.
I used an atomic structure to build larger patterns from smaller, reusable parts.
Smaller input parts combine into reusable field patterns.
I combined component types and states through Figma variants. Designers could find one component, then select the state they needed instead of searching through separate assets.
One component contains the available input states.
Designers could add one input component, then choose the state they needed through variants.
Designers change states without replacing or detaching the component.
For expandable patterns such as tables, I defined cell variants that designers could combine into the rows and columns they needed.
Cell variants support different table structures from the same foundation.
Some components were difficult to customise without detaching them. I designed non-destructive overrides so teams could adapt content while preserving the system connection.
Overrides adapt content without breaking the component instance.
I combined the supported image ratios into one placeholder component.
Variants cover the approved image ratios.
Figma did not preserve the image ratio when designers resized the component. I tested its constraints and created a workaround that kept the ratio stable.
The workaround preserves image proportions during resizing.
As the design evolved from atoms to molecules to organisms, complex components required a thorough audit of similar patterns across the existing site. One example is the product card component.
An example showcasing the inconsistencies of product card components across the existing digital landscape.
I gathered the content used across product cards into one master component. Designers could then show or hide information to fit each journey.
The master component supports different journey and content needs.
Adding motion to the system
I defined a branded motion principle that teams could apply consistently.
The motion principle connects brand expression with interaction behaviour.
The Move Beyond principle applied to calls to action.
The same principle provides feedback in a multi-selection control.
How I worked with the team
I worked with developers to establish shared token names and connect design decisions to implementation. A custom repository pulled design tokens from Figma into code, reducing manual updates between the two libraries.
Shared token names connect design decisions in Figma with implementation in code.
We stored core decisions as base variables and added semantic names at component level. This made each token’s purpose clearer and made future changes easier to manage.
Semantic names connect foundation decisions to component intent.
As the library expanded, naming component-level tokens presented challenges. This highlighted the need for a logical naming framework to facilitate the naming of new tokens and components in the future.
The naming framework gives teams a repeatable way to add tokens.