Ship enterprise-grade
experiences consistently
In 2024, after various acquisitions, the organization found itself with a product suite with 7 different tools.
The original experience was disjointed and expensive to maintain. Developers were shipping pages that looked different from one another, users felt lost, and support tickets kept coming in.
We needed a unified design system to reduce rework and create a consistent, trustworthy experience.
I'm super proud of what we created.
One system.
Many brands.
Faster delivery.
CPM and Finbox were the first products to ship on the new design system. I led design on CPM and used it to harden patterns, starting with the dashboard template. The templates and color system now anchor delivery and improve UX across teams.
Shaping the design system
I led the creation of a design system that serves multiple business units. We kicked off by auditing existing products, identifying common components, and defining a shared language for colors, type, and interaction.
Laying the groundwork
I studied top design systems (Material 3, Carbon, Fluent, Apple) to find patterns that worked for enterprise data. We needed a system that was dense enough for complex tables but spacious enough for readability.
WHY MATERIAL DESIGN?
Material Design familiarity reduces learning curve
Accelerated scope of flexibility a common language across teams
The rules that made decisions faster
To guide our component choices, we established three core principles. Whenever we had a debate, we returned to these:
Don't Make Me Think
Help the User to Get It Done
One click away
Micro reusable decisions (Tokens & Components)
Tokens are the atoms. We standardized the spacing scale (4px baseline), typography (Inter), and semantic colors for risk levels (critical, warning, safe). These tokens feed into our atomic components.
Building the system backbone
I defined the architecture starting from Tokens (colors, spacing, elevation) up to Templates. We used Figma Variables to manage themes (Light/Dark) and density.
The token system is organized as Figma variable collections for implementation and review. Figma variable collections cover color roles and states, spacing, typography, radius, elevation, borders and opacity, motion, breakpoints and grid, and icon sizes. One token change cascades through components, modes, and brands in minutes.
Token-driven building blocks
Components are the UI’s building blocks. To make them read the same in light and dark, we tuned not just color but elevation, shadows, strokes, and focus states. Shadows are crisper in light and softer in dark to keep hierarchy without glare. Tokens drive these rules, so components stay consistent across modes without per-component overrides.
Atomic Components
Templates that get the work done
Templates serve as specialized layouts for different user tasks. They include various formats such as the archive template for presenting multiple content types and the entity layout for detailed presentations of single items. These templates standardize the presentation of information, ensuring clarity and consistency across different products and scenarios.
Powerbix
REFLECTION AND FUTURE DIRECTIONS
This project had a profound impact on my professional skills, expanding my strategic thinking and ability to design scalable solutions. As the design lead, I developed a broader perspective, moving beyond immediate problem-solving to a more strategic approach to design.
The design system itself has become a critical strategic asset, especially during a transformative period for the company. Its implementation has enabled rapid product development, allowing the company to quickly adapt and evolve its business model to meet the challenge of transforming from a service-based company to a product-service company.
Aligning the new product vision with the broader company strategy was critical. We worked to ensure that the redesign went beyond usability improvements to become a strategic asset that supported the bank's long-term goals and compliance requirements.