Atomic Design System

Scalable Atomic Design System for MSA Inc.

30% reduction in design-to-development handoff time, unifying three major internal platforms.

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.

ClientMSA Inc.

Role / ServicesDesign system lead, UX architecture, front-end collaboration

Category & YearDesign systems, enterprise data applications / 2016 – 2019

ToolsFigma, Pattern Lab, D3.js

RoleDesign system lead, UX architecture, front-end collaboration

Timeline2016 – 2019

Team[NEEDS INPUT: team size and composition]

Platform[NEEDS INPUT: platform]

What I owned[NEEDS INPUT: what I personally owned]

Scalable Atomic Design System for MSA Inc. cover screenshot

Problem Statement

The challenge

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

How the work moved

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.

Key Decisions

Decisions and tradeoffs

Built the system in Pattern Lab so engineers could reference living, coded components alongside the Figma designs.

Alternatives considered: [NEEDS INPUT: alternatives considered]
Why I chose this: To reduce ambiguity during implementation, where designers and engineers had been working in parallel rather than together.
What I would do differently: [NEEDS INPUT: what I would do differently]

Introduced Atomic Design methodology to engineering teams through workshops rather than documentation alone.

Alternatives considered: [NEEDS INPUT: alternatives considered]
Why I chose this: [NEEDS INPUT: why Atomic Design over another compositional model]
What I would do differently: [NEEDS INPUT: what I would do differently]

Results and Impact

What changed

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.

Scalable Atomic Design System for MSA Inc. screen 1

Scalable Atomic Design System for MSA Inc. screen 2

Scalable Atomic Design System for MSA Inc. screen 3

Scalable Atomic Design System for MSA Inc. screen 4

Next Case Study

Redesigning Data Equivalization Workflows for Brand Management

Get in touch

Working on something complex?

Book a call Email me