Liberty Mutual Responsive eSales App Design Analysis

New this week, Liberty Mutual's responsive policy quoting and bind website (currently available for Renters insurance on mobile devices 9" and smaller) boasts a clean and modern design, heavy reliance on native HTML5 functionality and a streamlined interview process. 

Now that this application is public, I've decided to post a short design analysis outlining key new features behind the new application, which has been designed with the customer in mind from the first page, to the last. 

Learning from the old application, the design, development and business teams focused on improving three key areas of the app: 

  • Design
  • Performance
  • Content

Design

From the very beginning, we knew we wanted the new app to be fully responsive and clean. The design team did an excellent job removing unnecessary elements, colors, and discrepancies. 

The app features a clean, gradient-free background with a well-defined color scheme. Important text is bolded, and help text is static on the page but grayed out to signal lesser importance in relation to other content. Action buttons are contrasting orange to help guide the user through the process. 

We have given the application a vertical content flow by removing the sidebar to help guide the user in a clear, linear fashion though the questions. 

The wayfinder navigation is now smaller and less intrusive, only there to provide context for the user and let them know where they are in their insurance shopping experience.

Some new, user-friendly features:

Collapsible Groups

For conditional groups of questions that are dependent on an answer to another question, new groups are now in place that make it visually clear for the user what the question dependencies are. 

Help Center

Few customers actually use the help center functionality so instead of having help center always on the screen, adding unnecessary noise, it is now hidden in a collapsible side menu that's easily accessible by tapping on a menu icon in the header. 

Error Messaging and Help Text

Error messaging is now easier to notice, but also less intrusive. The clean, streamlined design places the fields in error without cluttering the UI. Shifts in elements due to added messaging are carefully accounted for to ensure a pleasant and consistent user experience. 

Help text is no longer hidden behind a "?" icon, instead, it is honestly displayed below the relevant question. 

Error Messaging
Help Text

For questions with longer help available, informational modals provide a clean way to show the user relevant information, without loss of context. 

Dialogs

Radio Groups over Select Boxes

More questions are now radio groups rather than select boxes to make it easier for users to view all the options and make a selection.

Radio Groups

Wait Modal

Wait animation now features a simple, more standard spinner and clear, concise messaging. 

What Modal

Navigation Breadcrumbs / Wayfinder

The app no longer contains any bulky, high-contrast navigation buttons with images. As the goal is to draw the user to the main content on the page - the interview and quote premium summary, navigation has been reduced to elemental basics, just enough to provide the user with a sense of location.

Wayfinder

Quote Premium Summary

Perhaps the most important page of the quoting process is the final quote premium summary page which displays the rate and coverage information. The quote premium summary page has been fully overhauled with an honest description of the rate and policy duration, a clear way to continue to purchase, located at both the top and bottom of the page to make it easier for the user. 

Coverages are displayed in a collapsed view, with relevant descriptions and buttons to edit a coverage available in the expanded view. Clarity on demand for users that want custom options or further information. 

Quote Premium Summary

Previously, the process of editing coverages happened right on the quote premium summary page. This process has now been broken out into separate pages, cleaning up the display of coverages on the summary screen, while also providing space for coverage-specific information during the editing process. 

Edit Coverage

Performance and Content

Significant improvements have been done behind the scenes to optimize the page loading process, while also cutting back on the amount of data being transmitted to the client. These improvements have resulted in significantly improved transition times, and especially the initial app load time. 

Content has been fully analyzed and re-worked to ensure consistency and clarity. 

I'm proud to say that the new Liberty Mutual eSales app is the best-designed personal insurance website in existence today.