Fusion Design System
Building a scalable, token-based design system with reusable Figma components, accessibility compliance, and dev-ready handoff powering enterprise finance products across multiple cross-functional teams.
about.
Project Overview
The problem. Multiple product teams were building the same components independently, resulting in visual inconsistency, duplicated effort, and slow delivery cycles. There was no single source of truth for design or code, and each new feature meant rebuilding patterns that already existed elsewhere.
The goal. Build a unified, scalable design system that could serve diverse enterprise products, from analytics dashboards to data management tools, without becoming a bottleneck. The system needed to support complex data-dense interfaces while maintaining consistency, accessibility, and cross-team collaboration.
My Role
As Product Designer on the core design team, I drove the visual identity, component architecture, and accessibility standards for the system. Working with a UX designer and product owner across cross-functional teams, I built the pattern library in Figma on the Salt Design System foundation. A significant part of the role was translating complex data requirements into reusable, consistent interaction patterns that scaled across products.
Design Process
Requirements gathering. I collaborated with the product owner to define requirements and align on goals, then worked closely with UX designers to iterate on mockups. Designs were reviewed with the product and development teams, incorporating feedback and ensuring accessibility with an ADA specialist.
Component architecture. I built the system using design tokens, auto layout, and variants in Figma, creating a comprehensive pattern library including Studio Header, Dataviz (HighCharts), Ag-Grid, Progress Tracker, Vertical Nav, Side Drawer, Full Screen Form Panel, Field Selection Rules, Toolbar, Attributes Drawer, Content Details, Year/Week Picker, Nav Bar, App Header, Tabs, Horizontal Cards, and more.
Accessibility. Every component was validated against WCAG 2.1 AA standards using Colour Contrast Analyser and axe DevTools. Accessibility was not an afterthought but embedded at each step of the design process.
Developer handoff. Once designs were finalised, I partnered with developers to ensure pixel-perfect implementation, maintaining daily standups to keep the team aligned throughout the process. Components were delivered dev-ready with clear documentation and specifications.
