Esurance Design System — Version 03
Visual Designer / Late 2019 – Early 2020
Context
Soon after completing Version 2, two major changes impacted the design system’s future:
Figma introduced Auto Layout, a game-changing feature for how components could be built, maintained, and scaled.
Esurance announced its planned merger with Allstate, signaling an upcoming rebrand.
Version 3 was created to bridge the gap between the current Esurance system and the potential Allstate brand direction, while also taking advantage of new Figma capabilities and improving accessibility across the board.
Role & Objectives
As the Visual Designer on a multi-disciplinary design team, my objectives were to:
Redesign components to fully leverage Figma’s Auto Layout for flexibility and scalability
Prepare the system to adapt smoothly to a potential Allstate rebrand
Improve component accessibility based on WCAG guidelines and usability feedback
Constraints
No Allstate brand assets were available yet, so flexibility and modularity were key
Migration to Auto Layout required rebuilding major components from scratch
Accessibility updates needed to work within the existing Esurance visual identity
Key Contributions
Created a new global color palette to support future brand adaptation
Developed new drop shadow styles for visual depth and hierarchy
Migrated the system to a new font and expanded the typographic scale
Designed additional typographic lockup components with usage rules
Simplified the main navigation bar based on user research findings
Introduced toast notifications for non-disruptive feedback
Reduced and clarified button hierarchy for simpler decision-making
Redesigned text fields, dropdowns, date pickers, and text areas for better accessibility
Impact
Version 3 created a more future-proof, accessible, and technically robust design system. The adoption of Auto Layout made components faster to update, easier to maintain, and better aligned with development workflows. The system also served as a flexible bridge during the brand transition, ready to pivot when Allstate’s visual identity became available.
