Design Systems
Cohesion for a suite of trade finance tools
Design Systems
Cohesion for a suite of trade finance tools
Design Systems
Cohesion for a suite of trade finance tools
Design Leadership
Tokenisation
Design System
Product in partnership with
Overview
Launched a new flexible live design library For Contour Engineers, Designers, and Product Owners to consolidate the multiple brand offerings and set up cohesive design growth
Problem Statement
How can we establish a scalable design system for multiple financial tools under a singular umbrella with structure?
Deliverables
100+ styles & tokens 84 main components 400+ component variants
Overview
Launched a new flexible live design library For Contour Engineers, Designers, and Product Owners to consolidate the multiple brand offerings and set up cohesive design growth
Problem Statement
How can we establish a scalable design system for multiple financial tools under a singular umbrella with structure?
Deliverables
100+ styles & tokens 84 main components 400+ component variants
Overview
Launched a new flexible live design library For Contour Engineers, Designers, and Product Owners to consolidate the multiple brand offerings and set up cohesive design growth
Problem Statement
How can we establish a scalable design system for multiple financial tools under a singular umbrella with structure?
Deliverables
100+ styles & tokens 84 main components 400+ component variants
TL;DR
Launched a new live design library for Engineers, Designers, and Product Managers to consolidate the multiple brand offerings and set up consistent design growth
🔒
My work has been recreated with NDA-protected data removed, identifiable content masked. The situational descriptions, qualitative impact and processes are canonical.
🔒
My work has been recreated with NDA-protected data removed, identifiable content masked. The situational descriptions, qualitative impact and processes are canonical.
🔒
My work has been recreated with NDA-protected data removed, identifiable content masked. The situational descriptions, qualitative impact and processes are canonical.
MY ROLE
Making a mark
As the Lead Product Designer, one of the biggest initiatives I worked on during this time was developing a comprehensive design system for multiple B2B financial tools, which previously lacked a documented design language.
MY ROLE
Making a mark
As the Lead Product Designer, one of the biggest initiatives I worked on during this time was developing a comprehensive design system for multiple B2B financial tools, which previously lacked a documented design language.
MY ROLE
Making a mark
As the Lead Product Designer, one of the biggest initiatives I worked on during this time was developing a comprehensive design system for multiple B2B financial tools, which previously lacked a documented design language.
DISCOVERY
The great audit
We began reviewing the existing systems, annotating each component, and organising them by function and design. This helped us identify areas for improvement. We documented these findings in a Figma file and a supporting spreadsheet and shared them with stakeholders to emphasise the need for a revamped design system.
DISCOVERY
The great audit
We began reviewing the existing systems, annotating each component, and organising them by function and design. This helped us identify areas for improvement. We documented these findings in a Figma file and a supporting spreadsheet and shared them with stakeholders to emphasise the need for a revamped design system.
DISCOVERY
The great audit
We began reviewing the existing systems, annotating each component, and organising them by function and design. This helped us identify areas for improvement. We documented these findings in a Figma file and a supporting spreadsheet and shared them with stakeholders to emphasise the need for a revamped design system.
DISCOVERY
Cross functional
We built our design system team with multiple voices. We included a frontend engineer to share insights on how Storybook worked, and we involved QA to suggest methods for evaluating deltas. Additionally, we collaborated with Product, Interaction Design, Visual Design, and a Content Writer, among others.
DISCOVERY
Cross functional
We built our design system team with multiple voices. We included a frontend engineer to share insights on how Storybook worked, and we involved QA to suggest methods for evaluating deltas. Additionally, we collaborated with Product, Interaction Design, Visual Design, and a Content Writer, among others.
DISCOVERY
Cross functional
We built our design system team with multiple voices. We included a frontend engineer to share insights on how Storybook worked, and we involved QA to suggest methods for evaluating deltas. Additionally, we collaborated with Product, Interaction Design, Visual Design, and a Content Writer, among others.
Legacy design systems and files that were still referenced by multiple products
CHALLENGES
Token structures
Once we had a good idea of where the inconsistencies lay, we started ideating on how this would be a sustainable system for us long term. We tested several new token structures to create a hierarchy that maintained consistency, while allowing flexibility and specific scenarios across different tools.
CHALLENGES
Token structures
Once we had a good idea of where the inconsistencies lay, we started ideating on how this would be a sustainable system for us long term. We tested several new token structures to create a hierarchy that maintained consistency, while allowing flexibility and specific scenarios across different tools.
CHALLENGES
Token structures
Once we had a good idea of where the inconsistencies lay, we started ideating on how this would be a sustainable system for us long term. We tested several new token structures to create a hierarchy that maintained consistency, while allowing flexibility and specific scenarios across different tools.
CHALLENGES
Monolithic or federated
Our goal was to prioritise clarity, reliability, and cross-functional understanding over endless refactoring. While monolithic models have been the bedrock of many systems, we leaned towards more modular and flexible structure.
CHALLENGES
Monolithic or federated
Our goal was to prioritise clarity, reliability, and cross-functional understanding over endless refactoring. While monolithic models have been the bedrock of many systems, we leaned towards more modular and flexible structure.
CHALLENGES
Monolithic or federated
Our goal was to prioritise clarity, reliability, and cross-functional understanding over endless refactoring. While monolithic models have been the bedrock of many systems, we leaned towards more modular and flexible structure.
CHALLENGES
Priorities and timelines
This project was a side project alongside other ongoing work. With limited time each sprint, we had to be very strategic about creating a completely new structure while balancing other active projects. We also tried to set an an achievable timeline, aiming for baby steps over perfection.
CHALLENGES
Priorities and timelines
This project was a side project alongside other ongoing work. With limited time each sprint, we had to be very strategic about creating a completely new structure while balancing other active projects. We also tried to set an an achievable timeline, aiming for baby steps over perfection.
CHALLENGES
Priorities and timelines
This project was a side project alongside other ongoing work. With limited time each sprint, we had to be very strategic about creating a completely new structure while balancing other active projects. We also tried to set an an achievable timeline, aiming for baby steps over perfection.
Results
160
day time frame
160
day time frame
160
day time frame
100+
Tokens and styles
100+
Tokens and styles
100+
Tokens and styles
4
cross functional teams
4
cross functional teams
4
cross functional teams
Learnings
To establish good naming conventions: Token names must be predictable, unique, and understandable across languages and disciplines. One must alias back to foundations, never hard code or duplicate values across themes.
To avoid complicated documentation: The most perfect token system is useless if nobody understands how to use it. With a growing team, it is much harder to keep UI components in code synced with designs.
IMPACT
Governance
As a growing team, we opted for a federated model, with no dedicated design system team; instead, feature teams handle building and maintaining the system. Changes and requests need to be documented in a version-controlled system for transparency. Contribution guidelines allowed new submissions, with a feedback loop.
IMPACT
Governance
As a growing team, we opted for a federated model, with no dedicated design system team; instead, feature teams handle building and maintaining the system. Changes and requests need to be documented in a version-controlled system for transparency. Contribution guidelines allowed new submissions, with a feedback loop.
IMPACT
Governance
As a growing team, we opted for a federated model, with no dedicated design system team; instead, feature teams handle building and maintaining the system. Changes and requests need to be documented in a version-controlled system for transparency. Contribution guidelines allowed new submissions, with a feedback loop.
IMPACT
A family of systems
In the end we established and maintained a global Salt Digital Design Language (SDDL) as a foundation of a family of design systems with documentation, designed and coded components
IMPACT
A family of systems
In the end we established and maintained a global Salt Digital Design Language (SDDL) as a foundation of a family of design systems with documentation, designed and coded components
IMPACT
A family of systems
In the end we established and maintained a global Salt Digital Design Language (SDDL) as a foundation of a family of design systems with documentation, designed and coded components
IMPACT
A live library
I also multi-hatted the setup of a live Storybook UI library with well defined guidelines and following atomic design principles. This improved the scalability of product verticals and simplified the process of designing, sharing, and collaborating on UI components.
IMPACT
A live library
I also multi-hatted the setup of a live Storybook UI library with well defined guidelines and following atomic design principles. This improved the scalability of product verticals and simplified the process of designing, sharing, and collaborating on UI components.
IMPACT
A live library
I also multi-hatted the setup of a live Storybook UI library with well defined guidelines and following atomic design principles. This improved the scalability of product verticals and simplified the process of designing, sharing, and collaborating on UI components.
CONCLUSION
Time to put it to the test
To ensure our decisions held up, we stress-tested components in two upcoming projects, a new vertical Orbit and a feature redesign of Contour. By integrating our new library into these redesigns, we saw improvements in legibility and visual hierarchy, while also speeding up the development handoff process.
CONCLUSION
Time to put it to the test
To ensure our decisions held up, we stress-tested components in two upcoming projects, a new vertical Orbit and a feature redesign of Contour. By integrating our new library into these redesigns, we saw improvements in legibility and visual hierarchy, while also speeding up the development handoff process.
CONCLUSION
Time to put it to the test
To ensure our decisions held up, we stress-tested components in two upcoming projects, a new vertical Orbit and a feature redesign of Contour. By integrating our new library into these redesigns, we saw improvements in legibility and visual hierarchy, while also speeding up the development handoff process.
