A/B to Atomic: Migrating a legacy product to an atomic design system at Arbor

Design · 6 min read

Arbor's UI had diverged across teams—colors, button shapes, and spacing tokens varied between modules—creating maintenance headaches and inconsistent user experiences. The product and design leadership initiated a six-month migration to an atomic design system: tokens, atoms (buttons, inputs), molecules (search bar, list item), and templates. The plan emphasized incremental adoption through a component migration backlog prioritized by user-facing impact.

The team used a staging branch and a visual diffing tool to map UI changes and ran A/B tests on high-traffic pages to guard against regressions. Designers codified accessibility guidelines and published a pattern library with usage examples and edge-case notes. Engineers refactored components into a shared package and introduced design-token sync via a CI pipeline to keep the visual language stable across platforms.

Results: visual inconsistencies fell by 90% in audited screens, developer velocity on new features increased by 33%, and cross-team UI bugs dropped significantly. The migration required upfront cost—two sprints focused on refactors and governance—but it paid off in predictability and onboarding for new hires. Arbor's experience reiterates that an atomic system is as much organizational discipline as it is a repository of components.