How a fragmented suite of independent banking products at Tosan was brought together under one Atomic Design System — spanning eight teams, three hundred Figma files, and a process built to outlast any single release.
Tosan is a leading provider of electronic banking infrastructure in Iran, managing an ecosystem of more than fifteen banking products across eight independent teams. Before this initiative, each team operated in its own silo — leading to fragmented user experiences, mounting technical debt, and slow, inconsistent delivery. I was tasked with architecting and leading a scalable Atomic Design System to unify the product suite, close the gap between design and code, and bring one coherent visual language to the entire platform.
The lack of a shared design language showed up everywhere: over 150 UI variations existed for the same functional components — buttons, inputs, modals — across the product suite. Designers and developers were reinventing the wheel for every new feature, doubling time-to-market. Updating a single brand asset required manual changes across fifteen separate codebases. Users felt the difference too, encountering different interaction patterns every time they moved between Tosan products.
As Lead Product Designer, I owned the full strategy behind the Design System — from the initial audit through to the governance model that keeps it alive today.
The system was built as a modular, four-layer architecture — moving from foundational design tokens up through core components, product patterns, and finally the real product experiences that ship to users. This structure is what separates a true design platform from a static component library.
"In those environments, design has to do more than create polished screens. It has to create clarity."
A deep audit of existing products — categorizing components by usage frequency and complexity — revealed that 60% of design time was spent on repetitive UI tasks that could be standardized or automated entirely. That insight shaped everything that followed.
Categorized components across every product by usage frequency and complexity, surfacing where the real redundancy lived.
Built design tokens for color, typography, spacing, and elevation; core components that are flexible, accessible, and state-aware; and standardized complex patterns like multi-step transaction verification and multi-factor authentication.
A documentation portal covering usage guidelines, interaction specs, motion behaviors, code parity details, and accessibility standards for enterprise banking.
A shared component inventory helped teams stop rebuilding the same interface patterns — every button, input, and table now traces back to one governed source.
Tokens created a shared language between design and development — a single source of truth for color, type, spacing, and elevation that both Figma and code could read from.
Resistance from established teams who feared losing creative freedom.
SolutionConducted weekly System Syncs and demonstrated how the system frees up their time for high-level UX problem solving rather than pixel-pushing.
Technical diversity across React, Angular, and legacy frameworks.
SolutionFocused on framework-agnostic design tokens and clear CSS/HTML specs to ensure visual parity regardless of stack.
A contribution process ensured that the system could evolve without becoming fragmented again — every new component request follows the same path from need to adoption.
The design-to-development workflow reduced hand-off ambiguity and improved implementation consistency — every component travels the same path from Figma to production.
Gradual adoption reduced resistance and allowed teams to migrate without disrupting product delivery — the system earned trust phase by phase, not by mandate.
Mapped existing components and ranked them by impact and redundancy.
Established the foundational layer that every later layer would depend on.
Standardized the flows used most often across the suite, like authentication and transactions.
Tested adoption end-to-end with two teams before wider rollout.
Expanded adoption across the full organization with hands-on support.
Shifted from rollout to long-term maintenance through the contribution model.
Diagrams explain the thinking — but the system only proves itself once it's running across real banking surfaces. Due to confidentiality, these are reconstructed layouts rather than live product screens.
This project taught me that success wasn't just about the Figma library — it was about building a culture of collaboration across eight different teams. It reinforced the importance of DesignOps in large-scale enterprise environments, and how a well-structured system can become a genuine competitive advantage.
"A well-structured system can be a significant competitive advantage."