Scalable Atomic Design System
Role
Product Experience Designer
Team
Lead UX Designer
Senior Software Engineer
Senior Quality Test Engineer
Company
Annexus Health
Problem
Design Debt
Slower Development Cycles
Lack of Consistency
Goal
Establish a single source of truth to eliminate UI discrepancies and streamline the dev handoff process, thus automating the implementation of standardized components.
Research & Collaboration
Solution
I designed a modular component system organized and structured in such a way where it focused on the main functional requirements to reduce back-and-forth clarification conversations.
To ensure a seamless handoff from design to code, we adopted the Atomic Design Methodology. We organized the reusable components into categories of Atoms, Molecules, and Organisms to provide a clear roadmap of how components are nested. This allowed for code reusability, reduced technical debt, and ensured that an update to the base atom circulated across the component suite.
Final Designs
The Feedback
Decreased cognitive load for engineers by reducing friction and CSS guesswork, allowing developers to implement with functional accuracy.
Achieved unified brand experience. Internal stakeholders and users noted marked improvement in visual consistency, which built brand trust.
Established a single source of truth that bridged the gap between Design and Engineering. The shared language fostered joint collaboration and contribution to the design system library.
More Works
arrow-down
