CLIENT
Credit Suisse
ROLE
Senior Product Designer
CONTRIBUTION
Design Systems
Tokens
User Interface Design
INDUSTRY
Financial Services
YEAR
2022
Montage Design System
OVERVIEW
More than a UI refresh, this was a strategic effort to establish a new design system—starting with design tokens.
Credit Suisse, a leading global financial services company, had recently formed a UX practice within its Sales and Trading division in London. As the team took shape, a new strategic initiative was launched to modernise its legacy internal tools.
In financial services, internal software is critical to day-to-day operations. Yet with business and technology deeply embedded in the culture, design first had to earn its place.
By integrating design tokens into the foundation of legacy software, we proved that upgrades could be seamless and non-disruptive. Our approach—subtle, incremental UX improvements—gave us room to evolve the experience while quietly building the new design system in parallel.
MY ROLE
My priority was to build a token-based design system—later named Montage—from the ground up. At the same time, I was also tasked with supporting UX designers across multiple platforms with visual design.
While this meant juggling multiple product streams and a potentially heavy workload, it ultimately worked to my advantage. It gave me deeper insight into platform needs and helped shape a more strategic, informed approach to the system. Collaborating closely with other designers also allowed us to define core UX principles and establish a unified design direction. My overall goal was to modernise the UI and enhance the user experience across the suite of products. I aimed to create visual harmony across the workspace by establishing a clear and consistent design direction. Since the product builds were a hybrid of AG Grid and custom-built tools, it was essential to define a scalable and adaptable design framework. I also worked closely with developers to ensure that the technical implementation aligned with the design vision. Balancing system-building with day-to-day product design gave me a unique perspective—I was able to approach design from both ends. Using atomic design principles, I defined the structure of Montage and mapped out the necessary guidelines. On the product side, I analysed design files down to the atomic level (tokens), audited existing designs, and identified recurring patterns—from page layouts and templates to functional components and global styles. My strategy also focused on gradually integrating the new guidelines into the team’s workflow. I evaluated the current state of the interface design to identify global styles—such as typography, spacing, and colour—that could be implemented incrementally during product release cycles. By distilling components down to the atomic level, I was able to map and assign core design tokens. These tokens were created in Figma using the Tokens Studio plugin. From there, I developed a naming system while reviewing the base code to ensure proper mapping between design and development.
Design Challenges
Tokens
While I had worked on several design systems before, this was my first deep dive into the technical side of tokens. Since tokens sit at the foundational level, it was essential to carefully plan and test their structure. I also had to get up to speed with the JavaScript implementation and understand how to integrate it into my workflow in a scalable way—all while preparing to onboard other designers to the process.
Managing Workstreams
As a newly established UX function, the priority was to quickly get up to speed with product development and integrate seamlessly with multiple teams. There was strong ambition behind creating Montage, but managing the various workstreams—and clearly defining goals—was challenging, especially as demands shifted from week to week.
Low Level UX Maturity
The approach to UX within product development had previously been limited, often relying on product owners to advocate for "what users want." While there was some awareness of UX at the business level—occasionally engaging in user discussions—this work was informal, irregular, and lacked structure. It was neither consistently well-executed nor meaningfully incorporated into strategy or planning.
User Adoption
UX ambition needed to align with business and technology. Selling our real value would take time and although we had direct access to users their relationship with technology seemed jaded given how they were previously engaged. Although talking to users was insightful we needed to structure when and how best to engage with them to really understand their workflow in a non disruptive way.
OUTCOMES
Our time as a UX team came to an end after a year due to challenges within the wider organisation—yet we achieved a great deal in that time.
We wrapped up with the first release of Montage, along with significant improvements in usability and consistency across the entire product suite.
Montage Libraries v1 & Migration
I began by assembling the foundation of the design system through its various libraries and style sheets. I established a set of global tokens, which formed the basis for both light and dark themes. Each was designed to be easy to understand, access, and maintain.
Dark & Light Themes
With tokens in place, creating themes should have been straightforward in theory. Now that properties were assigned to tokens, we could swap out values to generate new JSON files and style sheets for the development team. Our approach began with exploring the UI and effectively reskinning the page designs—this process then translated into updated property values for each token. The legacy design was reworked into a new dark theme, and in contrast, I developed a corresponding light theme.
Coherent Suite of Products
I took a systems approach to the visual design of the products, focusing on understanding how users composed and customised their setups. Their workflows were complex, often involving constant switching between tools, so the suite needed to function in harmony. Each product had to complement the others while retaining its own distinguishing features—without the overall experience feeling fragmented.
Efficiency
Design tokens bridged the gap between designers and developers by enabling methodical, modular workflows—making design changes and updates faster and easier to manage.
Scalability
Tokens helped automate governance, allowing designers to work more independently. This increased efficiency and consistency, empowering teams to build products faster and scale more effectively.