To tackle design inconsistencies and slow handoffs across Axon’s warehouse products, my teammate and I built a scalable design system from scratch. It brought visual consistency, faster development, and improved usability—turning weeks of rework into days. This system became the foundation for shipping high-quality, modular solutions at scale.
The Problem – Why We Needed a Design System
Before implementing a design system, our product suffered from UI inconsistencies, totally different color system in dark/light modes, accessibility issues, and inefficiencies (1)in design and development. The absence of standardized components led to:
Developers recreating similar components multiple times.
Frequent back-and-forth between designers and developers to clarify colors and component states.
Increased debugging efforts due to inconsistent implementation.
We performed a heuristic analysis that highlighted these inconsistencies and shared our findings with stakeholders. This analysis, combined with before-and-after visual comparisons, demonstrated the need for a unified design system.
Convincing Stakeholders – Business Impact
Initially, stakeholders were hesitant to invest in a design system because there was no drastic visual change. To shift the conversation, we focused on efficiency gains and measurable impact:
Upfront Component Creation – Developers now build reusable components first, rather than designing screens individually, streamlining the development process.
Standardized Colors – Eliminated the need to manually check and reassign colors for each screen.
Time Savings – Screen development time was reduced by 50%, and when factoring in the effort to create reusable components, we estimated an overall 20% reduction in development time by minimizing context switching.
Simplified Debugging – Components and colors can now be edited from a single source, reducing errors and rework.