MeasamAtomic Design System
Built and governed a multi-team atomic design system at MSA that unified interface patterns across data-intensive enterprise dashboards — improving consistency, handoff quality, and feature delivery speed.
.jpg)
Problem Statement
MSA's engineering teams were building data-heavy applications with overlapping but inconsistent UI patterns. Without a shared system, designers and developers worked in parallel rather than together — producing interfaces that looked different across products and were expensive to maintain.
Methodology
Defined atoms (color, typography, spacing, iconography, interactive states) and composed them into molecules, organisms, and page templates used directly in production.
Built the system in Pattern Lab so engineers could reference living, coded components alongside Figma designs — reducing ambiguity during implementation.
Led workshops to introduce Atomic Design methodology to engineering teams, and delivered major data visualization improvements using D3.js for dashboard and reporting contexts.
Results and Impact
Reduced design-to-development handoff time by 30% across product teams.
Unified brand and interface language across three major internal platforms.
Enabled engineering teams to build new features using existing components rather than designing from scratch — accelerating sprint velocity.
.jpg)
.jpg)
.jpg)
.jpg)