ALLSTATE

DURATION

SEPTEMBER 2020

ASK

CAMPAIGN
WEB DESIGN

ROLE

SENIOR DESIGNER

AGENCY

DROGA5

Our brand team created a new look and feel for Allstate alongside with new brand positioning of “the feeling of total protection”. I was tasked with interpreting the updated brand visuals to create a landing page that kicked off the new campaign for them, and as a declaration of the insurance company’s new tone of voice and direction.


This would be Some of the first work we’ve done for Allstate since winning the business and the first digital instance of the new branding.

ALL_IMG_Hero

Ultimately, this project was also utilized to help open a conversation for more digital work from the clients. While they have a strong, internal team for the website, we felt we could offer a fresh perspective with the agency's strength in narrative and storytelling as well as our UX team's desire to innovate and iterate.

UPDATED
BRANDING

The new brand identity was developed at Droga5 with Bruce Mau Design supporting. The design system uses a flexible, modular layout paired with photography and a new brand device called the "echo" that appears as concentric rings. The overall approach was to lean in the notion of complete protection, with the "echo" emulating a force field and the modular system spoke to the personalization of Allstate's policies.

ALL_IMG_WorkSummary

Brand applications

SINGLE PAGE
SCROLLING

The landing page is a scrolling experience with a brief introduction illustrating Allstate's heritage of innovation. The rest of the page was divided into different sections outlining the individual aspects of protection with Allstate: automobile, identity and home. A descriptive piece of copy accompanied each section stickied to the left column as the user scrolls through the content on the right that includes assets from the campaign.

ALL_IMG_Wireframe

Rough painted wireframes

COMPONENT
SYSTEM

Content for the campaign was still being worked on right up until launch. We took the approach of creating a component system so we may deliver files earlier for the client-side developers. Fortunately, the design system established by the brand team allowed us to build a modular library of components that all felt aligned with the new branding. 

ALL_IMG_Components

FIRST PASS

The clients were on board with our overall design, and we had opportunities to continously tweak spacing, language and finesse the brand device elements. We moved fast to have our first pass be as close to the end vision as possible so their development teams could receive our sketch files and prepare.

ALL_IMG_FirstPass_01
ALL_IMG_FirstPass_02
ALL_IMG_FirstPass_03
ALL_IMG_FirstPass_04
ALL_IMG_FirstPass_05

FINAL
OUTCOME

We've had to make some accommodations for additional copy and stripped down some of the imagery and modular content. Overall, the page still maintains the same format with more finalized photography and clarity on elements from the client. Internally, we appreciated how this was a test run for how the new brand flexed digitally.

ALL_IMG_Final_01
ALL_IMG_Final_02
ALL_IMG_Final_03
ALL_IMG_Final_04

CREDITS

LEADERSHIP

Jason Severs, Craig Wong, Jen Lally

VISUAL DESIGN

Albie Eloy, Sunny Lee

UX DESIGN

James Garvey, Paul Vogel

ACCOUNT

Ashley Diddel

Also Check Out

Harley-DavidsonWeb Design

IHOPBranding

J.P. MorganBranding

CBREWeb Design

Back to top Arrow