Led creation of Shelter design system, reducing dev task times by 50% due to fewer lines of code written.
Project Goals: Develop a centralized design system to maintain consistent branding across all platforms..
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.
Notable differences between print and digital branding: Shelter Insurance’s print materials and digital assets followed different styles, leading to some inconsistencies in the overall brand experience.
Extra time spent recreating assets (approx. 9–10 hours per week): Without a centralized design system, development and design teams often needed to rebuild components, which added to their workload.
Users experienced confusion when navigating the site: Interviews indicated that varying styles across pages made the site feel less cohesive, which impacted user confidence.
Solution: Build a design system
Building Shelter’s design system restored user confidence and cut design and development task times by 50%.
Before
After
Shelter's print and digital assets followed one consistent brand and style guidelines: 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 sets 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.
Laying the Foundation - Competitive Research & Analysis
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 design system on Material Design for its familiar, user-friendly interface and strong multi-framework support (React, Angular, Web Components). This ensured consistent UI patterns across all digital touch points and streamlined collaboration with developers.
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.
Accessibility Enhancements
Applied WCAG-compliant color contrast for optimal visibility.
Optimized touch targets and typography for readability and ease of interaction.
Implemented semantic HTML and ARIA attributes to ensure full screen reader compatibility.
Usability Improvements
Streamlined navigation to create a seamless flow between tasks.
Prioritized content hierarchy for each page, form, and tile to support user goals efficiently.
Basic wireframes
Real-life application
DS components prototype
The redesigned dashboard uses new design system components to deliver a true dashboard 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-actions
Strong content hierarchy that enhances usability and clarity.
The policy pages use new design system components to deliver a cleaner, more intuitive experience:
Organized policy detail information, billing, and contact information
Consistent visual patterns and contextual actions,
Improved accessibility across both the landing and inquiry views.
Before: policy list/policy details page
After: policy list/policy details page
The Claims landing and inquiry pages were built entirely with the new design system.
They now use standardized lists for claim summaries, cards to highlight contact details, and responsive drop-downs for viewing claim history. Alerts make claim status clear at a glance, and buttons follow the updated hierarchy and spacing rules—keeping everything consistent and easy to use across the product.
Before: claims landing page/claims details page
After: claims landing page/claims details 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