The Challenge

To redesign existing Liberty Mutual landing pages to make them more personalized and actionable to increase conversions. We were also asked to add more interactivity to the pages so they felt more contemporary.

The pages before being redesigned.

The Research

Liberty previously observed that users are more likely to convert when presented with a personalized experience, so I used those findings as a baseline, and started looking at personalized features that could encourage a user to convert.

 

Competitor Analysis

I looked at several competing insurance websites to see:

1. how they treated quote information
2. what differentiated Liberty’s offerings

One of Liberty’s key points of differentiation is the amount the user can save by bundling insurance services together. Many competitors did not place heavy emphasis on the amount of money saved by bundling, so this quickly became a focus for the redesign.

 

The Wireframes

The research phase gave me a great baseline for how to structure the content in the wireframes.

I established that the page should place strong emphasis on the savings a user would achieve by bundling different insurance services. This is a key differentiator for Liberty Mutual, and an aspect of getting a quote that other insurance companies didn’t focus on, so it made sense for that to be the focus of the page.

Because users land on this page via retargeting ads, I also knew I didn’t need to spend time educating users on Liberty Mutual as a company, which allowed for the page to have a singular focus on money the user can save when bundling.

The client initially wanted this page to function almost as a microsite, with the ability to do multiple things outside of getting a quote. To that end, I created several options showing variations on a simple landing page or a more complex approach.

I created all layout options in Axure RP and was able to take advantage of Axure’s prototyping features to generate interactive wireframes. These wireframes were able to showcase the interactive elements I wanted to add to the page early in the process, so the client immediately had something to react to. I was also able to annotate the wireframes so to better describe the interactivity we wanted to add to the page.

We discussed the advantages and disadvantages of each layout with the client, and narrowed down the options to a simple page where the prospective customers could quickly get a quote or retrieve a saved quote.

I also developed a customer page for any existing customers that may encounter the retargeting ads as well; this page functions more as a user dashboard from which the user can quickly access different areas of their account.

I revised the wireframes per our decisions with the client and used them as a reference when designing the high-fidelity prototypes. The interactive wireframes for desktop and mobile are still available to view.

 

The Design & Prototyping

Once the wireframes were approved, we moved into the design phase of the project. The landing pages had to conform to Liberty Mutual’s style guide which led most of the design decisions, but we were able to incorporate the microinteractions from the wireframing phase that really brought the page to life.

The high-fidelity prototypes were designed in Photoshop then brought into InVision to add interactivity.

We presented the prototypes to the client, who appreciated the continued interactivity from the wireframe stage, and approved the final design with minimal rounds of revision.

 

The Results

These retargeting landing pages were not developed in house, and some of the interactive elements were cut due to a shortened timeline.

Liberty A/B tested this page against the original design in January, and saw a 15% increase in conversions with the new template. This redesign was rolled out to all customers in February and continues to perform well.