Esurance brand and design system

Esurance repositioning defined its mission as an insurer that delivers a simple, transparent and affordable product. We redefined the visual brand to reflect the new values and documented it in a sharable style guidelines resource. Based on the evolving product design needs we built a design system that ensured visual and functional consistency across products.

 
brand-site-top.png
 
 

Challenge

New branding needed to be established and reflected consistently in digital customer touch points. An audit spanning marketing and product revealed a missed opportunity to meet customer expectations of consistency.

Objective

Define brand visual standards, style guidelines and design system and document it a shared resource. Implement it in the website, apps, emails and LPs and increase purchase ratio through improved interactions and visual continuity. 

My role

Design direction: mentored a team of 5 designers through basic elements and assets evolution.

Finessed color palette, typography and layout templates and created a brand documentation website. 

Collaborated cross-functionally to build a design system and integrate the guidelines in all customer touch points.

 

The new brand

The design team started an exploration by creating several rounds of mood boards and putting them in front of marketing and product stakeholders who provided us with the consumer research and business goals perspective.

 

Mood board exploration

moodboard-1.png
moodboard-2.png
moodboard-3.png

We applied A/B and moderated user testing to determine which photography and messaging style customers responded to best. We proceeded with user testing color combinations, fonts and icons though web and mobile interface components and layouts. Based on the feedback, we identified the direction closest to the brand character, that stood out in the competitive landscape and that had the strongest emotional appeal. 

 
 

Brand and style guidelines documentation

To facilitate the proper use of the assets by in-house teams and vendor agencies we created creative.esurance.com, a style guide portal that includes the main brand elements and examples of use cases.  

 

Design system foundations before rebranding

2017-brand-1.png
2017-brand-2.png
 

Design system foundations after rebranding

2019-brand-1.png
2019-brand-2-icono.png
2019-brand-3-colors.png
2019-brand-4-typogra.png
 

Design system documentation

 

Adoption and results

Launched through Esurance.com, a purchase app, a claims app and a digital campaign a consistent implementation of the new brand guidelines and the new design system had a positive impact on marketing and product KPIs, especially the unaided awareness (+4%), and quote completion rate (+3). Users found the homepage, the quote rate pages UI and interactions to be more clear and intuitive. 

 

Purchase app rating page

1-Quoting App.png
 

Landing pages, emails and newsletters

2-LP.png
3-email-MB.png
4-newsletter-MB.png

Digital banners

digital-1.png
digital-2.png
digital-3.png