Built Shelter's design system, cutting development time by 50% with reusable components.
Project Goals: Develop a centralized design system to maintain consistent branding.
My role: Led design system architecture and component design.
Collaborated with: Development teams, UX teams, marketing teams, and project managers.
Deliverables: Refreshed Shelter Insurance’s design system based on Material’s design system, collaborating with developers to create design system resources for React, Angular, and web components.
Shelter Insurance didn't have a design system. Designers recreated the same components for every project, engineers built duplicate code, and Shelter’s customers navigated inconsistent interfaces.
Big discrepancies between the print and digital brands: Shelter Insurance had different styles for print materials in comparison to their limited digital assets, creating inconsistencies in the overall brand.
Development and design teams wasted time (approx 5-10 hours per week) recreating assets: Due to a lack of a centralized design system, both our development and design teams had to recreate assets repeatedly.
Users were frustrated when navigating through Shelter’s site pages: User interviews revealed that site visitors lacked trust in the website due to different styles used, which felt like they were navigating multiple, distinct brands.
Solution: Creating Shelter’s design system helped rebuild trust with users and reduced design and development task times by 50%.
Shelter’s print and digital assets followed one consistent brand and style guideline: Our style and brand guidelines across print, mobile, desktop, and tablet platforms were more aligned, while considering nuances for each particular experience.
Development and design team task times were reduced by 50% because we created a design library and code library so that teams would not have to recreate assets daily.
Users regained trust in Shelter’s brand because of the consistency of the site experience. This consistency reassured users that the brand experience was reliable and predictable. We also considered accessibility when creating our design system.
Before
After design system
Three major challenges shaped our design approach: the site's broken information architecture made content hard to find, existing content confused rather than helped customers, and we needed to integrate external technology for document uploads.
Competitive Research & Analysis: I analyzed design systems from IBM, Material, Clarity, Dell, and Adobe to identify essential components for Shelter's internal tools and customer portals. This research informed strategic decisions about which patterns would best serve our diverse user base.
Material-Based System Architecture: I built Shelter's first comprehensive design system using Material Design as the foundation, working directly with developers to create resources for React, Angular, and web components. This established consistent UI patterns across all digital touch points.
Brand Modernization & Accessibility: I collaborated with UX designers to refresh Shelter's visual identity and style guide for digital applications. Designed accessible components in Figma that brought the insurance brand into the modern digital landscape.
Cross-Platform Implementation: Delivered a scalable design system that unified previously inconsistent interfaces across websites and applications. This foundation enabled faster development cycles and consistent user experiences across all Shelter's digital products.
We created digital components and assets to improve usability and accessibility, from low-fidelity to high-fidelity components.
We focused on components like: tiles for claims, insurance form fields, email pamphlets, notification UI, search functionality, and landing page components and assets.
We improved accessibility by: ensuring color choices had proper contrasts for visibility, ensuring touch points and text/fonts were visible and appropriately sized, and creating tags for site text to ensure screen readers could access our content.
We improved usability by:
Creating seamless navigation between tasks
Prioritizing the appropriate content for each page, form, or tile.
Wireframes
Real-life application
DS components prototypes
The redesigned dashboard uses new design system components to deliver a true dashboard experience — featuring card-based messaging, improved top navigation, clear call-to-actions, and a stronger content hierarchy that enhances usability and clarity.
Before Shelter Design System - Dashboard
After Shelter Design System - Dashboard
The policy pages use new design system components to deliver a cleaner, more intuitive experience—organizing policy details, billing, and contact information with consistent visual patterns, contextual actions, and improved accessibility across both the landing and inquiry views.
Before Shelter Design System - Policy list
After Shelter Design System - Policy list
After Shelter Design System - Policy inquiry page
Before Shelter Design System - Policy inquiry page
The Claims landing and inquiry pages were built entirely with the new design system. It uses standardized lists to display claim summaries, cards for contact information, responsive drop-downs to show claims history, and alert components to communicate claim status. Buttons follow the new hierarchy and spacing rules, ensuring consistency across the product.
Before Shelter Design System - Claims landing page
Before Shelter Design System - Claims inquiry page
After Shelter Design System - Claims landing page
After Shelter Design System - Claims inquiry page
Assets we created for v.1 of Shelter’s design system could then be expanded upon to consider experiences across products, such as:
Claims policies and landing page
Internal reporting tools
Home office cash
Shelter insurance homepage