Safeco Insurance

Bringing a new brand to life

Leveraging our design system

Screen Shot 2021-01-27 at 12.48.23 PM

Building off of the work we completed on Liberty Mutual’s customer-facing website, my Product Design partner Dan Roge and I were tasked with redesigning and building a website for our sister company, Safeco.com — and quickly. We had less than a quarter to research, design, and get approvals of the new website.

For context, the old website incorporated an obsolete brand, had a ton of duplicate and confusing pages, and — as we heard from the independent agents that sold Safeco Insurance — was not an experience they encouraged their customers to visit. (See below)

safeco-old-home

However, we now had one distinct advantage — a highly-evolved design system with fully-built components available for us to leverage. This allowed us to focus our efforts on the top half of the page — the hero — and create something unique to Safeco that would allow customers to perform their two most common actions quickly: Log in, or search for a local independent agent near them.

Aggressive content audit

As I noted earlier, the old Safeco website included several duplicative or overlapping pages without a clear audience; was the website for customers, agents, or both? The old website wasn’t sure, and the result was a bloated experience that needed to be paired down considerably. Not only that, data traffic painted a clear picture that nearly 90% of traffic was going to less than 12 pages. An aggressive audit was in order, and luckily Leadership was on board with an extended “kill” list.

safeco-tracker

Removing the unnecessary proved to be both easy and satisfying. Detail pages with less than 100 views? Axe’d. Multiple agent pages? Let’s consolidate to one and drive to our application form. In the end we were able to sunset more than a third of the website while creating a simple navigation clearly defined by user types: “For customers” and “For agents”. Easy enough.

Another total re-write

Finally, as Dan and I jammed on initial content outlines and sketches it became clear that we would once again need to tear down the content strategy as we knew it and start from scratch (we realized the same — quickly — while redesigning Liberty Mutual). Once again, we lucked out with stakeholders that were on the same page and put their trust in us.

Using learnings from a dozen interviews and lean research completed through Validately, I began the arduous process of piecing together marketing materials, brand guidelines, and our voice and tone best practices to create an all new voice for Safeco. One of the biggest opportunities was to highlight the independent agent service — considered the major business differentiator of the brand — while also driving customers to create warm leads by quoting online. This inspired some of my sneaky favorite copy I’ve ever written for UX:

safeco-copy-2

The end result

In the end, Dan’s design and my content strategy perfectly complimented one another. We were also able to make great strides on our new CMS, which allowed us to build these pages quickly using YAML (Yet Another Markup Language – check out the visual below to see how a true headless CMS works). As with the new Liberty website, we were once again able to complete our launch ahead of schedule in December, 2020.

Our new website:

safeco-mobile

safeco-auto

safeco-baa

Old website:

safeco-old-auto

safeco-old-baa