Building design system for scale
Building design system for scale
Building design system for scale
Building design system for scale
Building design system for scale
The project focused on building a scalable, robust design system that supports multiple markets and users seamlessly. The design system was developed with scalability at its core, using localised design tokens and components that maintain consistency while allowing flexibility for market-specific needs. The result is a future-ready system designed to empower teams.
The project focused on building a scalable, robust design system that supports multiple markets and users seamlessly. The design system was developed with scalability at its core, using localised design tokens and components that maintain consistency while allowing flexibility for market-specific needs. The result is a future-ready system designed to empower teams.
Company x Client
Fintech (Insurance) Company X frog X Capgemini Financial Services
Ongoing (Release 2027)
Role + Responsibilities
Design System + Product Designer, UX Researcher (understanding design localisation)
User + Market
Hong Kong
Story Highlight
Different markets uses different fonts. Ensuring that the market switch doesn’t impact the visual hierarchy - the details with which the design system is built, is the highlight of this story.
Impact
This project initiated the built of a DLS that is not only designed for Hong Kong, but is scalable for other markets as well. Projected to reduce workload and to ensure a consistent visual language.
Learning
Leading up to this project, I learnt a lot about design localisation. From how we layout information to what colour would get the most clicks on a CTA - this taught me more about users and impact of culture on design.
Role + Responsibilities
Design System + Product Designer, UX Researcher (understanding design localisation)
Company x Client
Fintech (Insurance) Company X frog X Capgemini Financial Services
Ongoing (Release 2027)
User + Market
Hong Kong
Story Highlight
Different markets uses different fonts. Matching the x height and font weight to ensure that the system switch from one market to another doesn’t impact the visual hierarchy - the details with which the design system is built, is the highlight of this story.
Learning
Leading up to this project, I learnt a lot about design localisation. From how we layout information to what colour would get the most clicks on a CTA - this taught me more about users and how the culture and history impacts their experience.
Impact
This project initiated the built of a DLS that is not only designed for Hong Kong, but is scalable for other markets as well. This is projected to reduce workload as the product scales up further and to ensure a consistent visual experience throughout products.
Role + Responsibilities
Design System + Product Designer, UX Researcher (understanding design localisation)
Company x Client
Fintech (Insurance) Company X frog X Capgemini Financial Services
Ongoing (Release 2027)
User + Market
Hong Kong
Story Highlight
Different markets uses different fonts. Ensuring that the market switch doesn’t impact the visual hierarchy - the details with which the design system is built, is the highlight of this story.
Learning
Leading up to this project, I learnt a lot about design localisation. From how we layout information to what colour would get the most clicks on a CTA - this taught me more about users and impact of culture on design.
Impact
This project initiated the built of a DLS that is not only designed for Hong Kong, but is scalable for other markets as well. Projected to reduce workload and to ensure a consistent visual language.
Company x Client
Fintech (Insurance) Company X frog X Capgemini Financial Services
Ongoing (Release 2027)
Role + Responsibilities
Design System + Product Designer, UX Researcher (understanding design localisation)
User + Market
Hong Kong
Story Highlight
Different markets uses different fonts. Ensuring that the market switch doesn’t impact the visual hierarchy - the details with which the design system is built, is the highlight of this story.
Impact
This project initiated the built of a DLS that is not only designed for Hong Kong, but is scalable for other markets as well. Projected to reduce workload and to ensure a consistent visual language.
Learning
Leading up to this project, I learnt a lot about design localisation. From how we layout information to what colour would get the most clicks on a CTA - this taught me more about users and impact of culture on design.
“There is no clear process, we make designs as the requirement comes up.”
~ Developer
“There is no clear process, we make designs and screens as the requirement comes up.”
~ Developer
In a fast pace environment, where new requirements come up every other sprint and design treatment is based on market localisation, it is difficult to manage consistency without a design system.
In a fast pace environment, where new requirements come up every other sprint and design treatment is based on market localisation, it is difficult to manage consistency without a design system.
“...only if a design system could change font treatment, colours, button radius.”
~ Program Manager
“...only if a design system could change font treatment, colours, button radius.”
~ Program Manager
Since the founding of this product, the team has been changing, and because of lack of documentation, every phase and feature tells a different brand story.
Since the founding of this product, the team has been changing, and because of lack of documentation, every phase and feature tells a different brand story.
Where it all
Where it all
started…
started…
“During our recent collaboration, simple colour changes resulted in two months of design effort.”
~ Designer
“There is no clear process, we make designs and screens as the requirement comes up.”
~ Developer
“During our recent collaboration, simple colour changes resulted in two months of design effort.”
~ Designer
Product scaling up - not only in existing and new markets, but also collaborating with other organisations (co-branded screens) - we have to duplicate screens and do everything from scratch - manually.
In a fast pace environment, where new requirements come up every other sprint and design treatment is based on market localisation, it is difficult to manage consistency without a design system.
Product scaling up - not only in existing and new markets, but also collaborating with other organisations (co-branded screens) - we have to duplicate screens and do everything from scratch - manually.
“During our recent collaboration, simple colour changes resulted in two months of design effort.”
~ Designer
Product scaling up - not only in existing and new markets, but also collaborating with other organisations (co-branded screens) - we have to duplicate screens and do everything from scratch - manually.
Building design system for scale
Where it all started…
“With the new market, we have an opportunity to start from scratch, the best time.”
~ Product Owner
“With the new market, we have an opportunity to start from scratch, the best time.”
~ Product Owner
Introduction to new market and changes in business structure, ways of working, resources and product roadmap gave way to building a robust design system that is scalable and localised for different markets.
Introduction to new market and changes in business structure, ways of working, resources and product roadmap gave way to building a robust design system that is scalable and localised for different markets.
“...only if a design system could change font treatment, colours, button radius.”
~ Program Manager
Since the founding of this product, the team has been changing, and because of lack of documentation, every phase and feature tells a different brand story.
“With the new market, we have an opportunity to start from scratch, the best time.”
~ Product Owner
Introduction to new market and changes in business structure, ways of working, resources and product roadmap gave way to building a robust design system that is scalable and localised for different markets.
Where it all started…
“There is no clear process, we make designs and screens as the requirement comes up.”
~ Developer
In a fast pace environment, where new requirements come up every other sprint and design treatment is based on market localisation, it is difficult to manage consistency without a design system.
Where it all started…
“There is no clear process, we make designs and screens as the requirement comes up.”
~ Developer
In a fast pace environment, where new requirements come up every other sprint and design treatment is based on market localisation, it is difficult to manage consistency without a design system.
Brand and design language
Brand and design language
Documentation
Documentation
Workflows and processes
Workflows and processes
Behind the Curve
Behind the Curve
Not delivering infrastructure to support the business today and not able to support future needs
Not delivering infrastructure to support the business today and not able to support future needs
Meeting Basic Needs
Meeting Basic Needs
Supporting the business needs today, but not able to scale for future requirements
Supporting the business needs today, but not able to scale for future requirements
We want to be here
We want to be here
Doing Well
Doing Well
Executing well for current needs with potential for future growth, but could use improvement
Executing well for current needs with potential for future growth, but could use improvement
Brand and design language
Documentation
Process & workflow
Behind the Curve
Not delivering infrastructure to support the business today and not able to support future needs
Meeting Basic Needs
Supporting the business needs today, but not able to scale for future requirements
We are here
Industry Leader
Industry Leader
Doing great today and driving the business forward for the future
Doing great today and driving the business forward for the future
A widely-adopted design system that includes workflows, documentation and tools facilitating rapid cross-market product development.
A widely-adopted design system that includes workflows, documentation and tools facilitating rapid cross-market product development.
Doing Well
Executing well for current needs with potential for future growth, but could use improvement
Industry Leader
Doing great today and driving the business forward for the future
We want to be here
A widely-adopted design system that includes workflows, documentation and tools facilitating rapid cross-market product development.
Brand and design language
Documentation
Process & workflow
Behind the Curve
Not delivering infrastructure to support the business today and not able to support future needs
Meeting Basic Needs
Supporting the business needs today, but not able to scale for future requirements
We are here
We are here
We are here
Brand
Sub brands and
brand collaboration
Mode
Dark mode and light
mode
Markets
Thailand, Japan,
Philippines, Vietnam,
Cambodia, Indonesia,
Hong Kong
Responsive
Small, Medium, Large
Brand
Sub brands and
brand collaboration
Mode
Dark mode and light
mode
Markets
Thailand, Japan,
Philippines, Vietnam,
Cambodia, Indonesia,
Hong Kong
Responsive
Small, Medium, Large
Approach to new
Approach to new
design system
design system
Approach to new design system
Brand
Sub brands and
brand collaboration
Responsive
Small, Medium, Large
Mode
Dark mode and light
mode
Markets
Thailand, Japan,
Philippines, Vietnam,
Cambodia, Indonesia,
Hong Kong
A multi-tiered design system approach accounts for all the platforms and links back to a single source of truth leveraging design tokens.
A multi-tiered design system approach accounts for all the platforms and links back to a single source of truth leveraging design tokens.
A multi-tiered design system approach accounts for all the platforms and links back to a single source of truth leveraging design tokens.
Approach to new design system
A multi-tiered design system approach accounts for all the platforms and links back to a single source of truth leveraging design tokens.
Brand
Sub brands and
brand collaboration
Responsive
Small, Medium, Large
Mode
Dark mode and light
mode
Markets
Thailand, Japan,
Philippines, Vietnam,
Cambodia, Indonesia,
Hong Kong
1
week
1
week
Successfully designed a POC for an internal data management dashboard with the design system and Figma Make within a week.
Successfully designed a POC for an internal data management dashboard with the design system and Figma Make within a week.
1
DLS
1
DLS
Replacing 4 existing design systems with 1 scalable design system, building single source of truth.
Replacing 4 existing design systems with 1 scalable design system, building single source of truth.
Small wins
Small wins
big impacts
big impacts
-150%
workload
-150%
workload
-150%
workload
Projected manual workload reduction by 150% due to creation of design tokens and ability to market switch.
Projected manual workload reduction by 150% due to creation of design tokens and ability to market switch.
Projected manual workload reduction by 150% due to creation of design tokens and ability to market switch.
1
week
Successfully designed a POC for an internal data management dashboard with the design system and Figma Make within a week.
Small wins,
big impacts…
5
markets
5
markets
5
markets
Revamp of 5 markets with over 57 unique flows completed in 1.5 sprints, made possible due to the design system.
Revamp of 5 markets with over 57 unique flows completed in 1.5 sprints, made possible due to the design system.
Revamp of 5 markets with over 57 unique flows completed in 1.5 sprints, made possible due to the design system.
1
DLS
Replacing 4 existing design systems with 1 scalable design system, building single source of truth.
Small wins,
big impacts…
1
week
Successfully designed a POC for an internal data management dashboard with the design system and Figma Make within a week.
let's
build together
let's
build together
let's
build
together
let's
build
together