ADT Solar Design System
Creation of a scalable design system used across ADT Solar, Energy Pro, Aurora, and other energy platforms, ensuring consistency, faster delivery, and improved UX quality across teams.
Overview
The ADT Solar Design System was created to support multiple B2C and internal energy products, including ADT Solar, Energy Pro, Aurora, and other related platforms.
The goal was to establish a single source of truth that enabled design consistency, faster development, and scalable UX patterns across teams and products.
The Challenge
As ADT expanded its digital energy offerings, teams faced several issues:
- Inconsistent UI patterns across products
- Design decisions recreated from scratch in each project
- Friction between design and development teams
- Difficulty maintaining UX quality at scale
A centralized design system was needed to support multiple products, audiences, and workflows.
Design System Scope
The system was designed to support both customer-facing and internal tools.
Foundations
- Color system
- Typography
- Spacing & layout
- Grid and responsive behavior
- Accessibility standards (WCAG)
Core Components
- Buttons, inputs, selectors
- Cards, modals, tooltips
- Navigation patterns
- Data display components
Complex Patterns
- Pricing & quote modules
- Calculators
- Multi-step forms
- Comparison tables
Cross-Product Usage
The design system was successfully adopted across:
- ADT Solar – B2C sales and onboarding experience
- Energy Pro – Internal energy management tools
- Aurora – Solar planning and configuration workflows
- Additional energy-related platforms and experiments
This ensured visual and behavioral consistency while allowing product-specific flexibility.
Collaboration with Development
- Components designed to align with React-based implementation
- Shared component logic and design tokens
- Clear documentation and usage guidelines
- Reduced friction between design and engineering teams
Impact
- Faster design and development cycles across products
- Improved UX consistency across multiple platforms
- Reduced design debt over time
- Enabled scalable experimentation and A/B testing
- Created a foundation for future product growth
Key Learnings
This project reinforced the importance of systems thinking in product design. By investing in a shared design language and reusable components, teams were able to move faster, maintain quality, and scale UX across multiple energy products.