ashmita

ashmita

ashmita

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

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 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

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

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.

Results

160

day time frame

100+

Tokens and styles

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

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.

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.