Built Shelter’s design system, cutting development time by 50%
Every team was recreating inconsistent components. Designers and developers across Shelter were recreating identical components for every project. No shared standards, no reusable code—just wasted time and inconsistent interfaces.
I researched the best systems and adapted them for Shelter. Studied IBM, Material, Clarity, and Adobe's design systems to find patterns that fit our needs. I partnered with engineering to design and build reusable components across React, Angular, and vanilla web.
Impact:
50% reduction in dev task time
First unified design system at Shelter
Now used across all internal and customer-facing products
Shelter Insurance didn't have a design system.
Designers recreated the same components for every project, engineers built duplicate code, and insurance customers navigated inconsistent interfaces.
Visual inconsistencies across Shelter's digital products:
Brand inconsistency across channels: Shelter Insurance's print materials and digital assets followed different styles, varying in color palette, typography, and logo treatments, resulting in inconsistencies in the overall brand experience.
Development inefficiency: Each team spent 9-10 hours per week recreating buttons, forms, and navigation components that already existed elsewhere—time that could have been invested in building new customer-facing features.
Fragmented customer experience: Varying button styles, typography, and layouts across pages created a disjointed digital ecosystem that didn't reflect Shelter's strong brand standards.
These inconsistencies slowed product development, fragmented Shelter's brand identity, and created a digital experience that didn't match the quality of Shelter's insurance products.
Design System Foundations for Shelter
Before building Shelter’s design system, I audited mature enterprise systems to identify proven patterns for scale, governance, and accessibility.
IBM Carbon: Enterprise governance and documentation; proven in finance and insurance.
Material Design (Google): Comprehensive, multi‑platform component ecosystem.
Clarity (VMware): Data‑dense enterprise application patterns.
Dell Design System: Multi‑brand consistency across diverse product lines.
Adobe Spectrum: Accessibility‑first approach with robust token architecture.
Why these five systems:
Design system foundation: Material Design
Multi‑framework support across React, Angular, and vanilla web, reducing long‑term engineering risk
Familiarity with Google’s component patterns reduces cognitive load and accelerates onboarding
Extensive documentation and examples, enabling faster adoption and consistent implementation
Broad base component coverage (50+ components), allowing teams to build without reinventing core patterns
Material Design served as a foundation—not a final solution. Defaults were adapted to Shelter’s brand through custom color, typography, and component styling, with accessibility built into each component from the start. The system now scales across multiple product areas and serves as the default foundation for new Shelter features, reducing risk while accelerating delivery.
Component architecture and accessibility
With Material Design as our foundation, I partnered with developers to design and build a comprehensive component library that would work across React, Angular, and vanilla web.
From wireframes to production-ready components
I began with low-fidelity wireframes to establish component hierarchy and patterns, working closely with developers to validate technical feasibility and identify which components would deliver the most value.
Hand drawn sketches
Low-fidelity component library
High-fidelity style guide
These hand-drawn wireframes evolved into digital components through close collaboration with engineering teams. The low-fidelity component library (center) translated sketches into basic patterns—establishing button hierarchy, form structures, navigation systems, and layout grids—allowing developers to validate technical feasibility before adding visual polish.
These basic components were then refined into the final style guide, which established Shelter's brand palette, typography (Libre Franklin Bold), and standardized form patterns—all refined through developer feedback, accessibility testing, and brand alignment.
Before:
Key improvements included:
System consolidation and pattern standardization
The design system transformed Shelter's fragmented digital experience into a cohesive, accessible system.
After:
Clear branding:
Added "My Shelter" text to the header for immediate brand recognition and user orientation
Refined color palette:
Updated red from
#CC0000to#E8352Afor better accessibility and brand consistencyMaintained Shelter Blue (
#024393) and white as the core palette
Semantic button hierarchy:
Replaced vague labels (Small, Default) with clear semantic naming (Primary, Secondary, Tertiary)
Established visual hierarchy through filled buttons for primary actions, outlined for secondary, text-only for tertiary
Standardized components:
Created a reusable modal pattern with a consistent header, close button, and action placement
Unified icon system with consistent sizing and visual weight
Established component naming conventions for easier implementation
Design system in action
The design system was applied across Shelter's digital products, transforming fragmented experiences into cohesive, accessible tools for insurance customers. Here's how it improved three critical customer touchpoints
From prototype to production: validating the system
Real-life application
DS components prototype
Interactive prototypes built with design system components allowed us to validate patterns with stakeholders and policyholders before development began. This prototype-to-production approach ensured the system worked in real-world scenarios while accelerating development
Customer dashboard: Improving navigation and clarity
The dashboard redesign demonstrates how the design system's standardized components created a more intuitive customer experience.
Before:
After:
Previous features:
Relied on page-level alerts
Red buttons created friction
Poor hierarchy
New features:
Card-based messaging
Improved top navigation
clear call-to-action
Strong content hierarchy that enhances usability and clarity
These examples demonstrate how the design system transformed both new and existing products—creating consistency, improving usability, and accelerating development across Shelter's digital ecosystem.
Impacts and outcomes
50% reduction in development time
5 products launched using the design system
Streamlined design-to-development handoff through standardized documentation and reusable components
Established a consistent brand experience across customer-facing products and internal tools