Phil Swan / Endsleigh

A mobile-first endsleigh.co.uk

A complete overhaul of Endsleigh’s online presence, rethinking everything from how content is structured to online transactions to a visual rebrand, and helping Endsleigh maintain their position as one of the leading UK insurers, and the only insurance provider recommended by NUS.

My role: Design lead
Interaction design, information architecture, visual design

2013 – 2014

Endsleigh approached Erskine Design with a brief to reimagine endsleigh.co.uk. The website at the time had become confusing and lacked focus. We were tasked with redesigning key areas of the site to improve usability and clarity, while facilitating the needs of the business. We produced a prototype that addressed product pages, quote processes, online user accounts and the price presentation page (what the user sees when coming from a price comparison site). The prototype was well received and, after a successful pitch, we were brought in as the design partner for the redesign.

The Endsleigh homepage shown at mobile, tablet and desktop sizes

Mobile-first

We started by focusing on the experience for small-screen users. This challenged us to strip back the content and consider how limited screen space could accommodate this information in conjunction with sales messaging and call to actions.

We needed to validate our initial designs with all the areas of the business, making sure that we were meeting their requirements. Endsleigh know their customers well and were able to provide valuable insight into customer goals and frustrations. We conducted a full content audit, identifying different content types and patterns. We could then define page types to accommodate this content. Examples include:

  • Product category group page (financial advice)
  • Product category page (motor insurance)
  • Product page (student motor insurance)
  • Product category explainer (about motor insurance)
  • Customer group page (insurance for students)

The content management system was set up to be purposefully constrained. Content authors didn’t have free reign as to what they could publish, we designed standardised content types and limited the formatting options. This was important to ensure the website codebase would be maintainable and future-friendly. It also meant that users could expect a consistent experience throughout the many pages.

Abstract images of 8 page layouts
Modular page layouts

A visual refresh

Endsleigh had a distinct brand identity which they were keen to maintain so we came at the visual design from a very functional standpoint. The brand colours - purple and green - are strong and can be overpowering if not used thoughtfully. We, therefore, used the colours to bring emphasis and contrast in the right places. Using grey-scale line drawings in conjunction with photography meant that banners and promotions wouldn't compete with the key sales messaging and allowed the call-to-actions to really stand out. We created versatile illustrations that Endsleigh could continue to use in the future.

Six line drawings of landscapes and rooms
Illustrations

Illustrations in conjunction with photography provided a consistent look to imagery. Photos of staff were commissioned to provide a personal touch in line with Endsleigh’s pride in excellent customer service.

Screenshots of the website navigation on small screens
Student car insurance project page at large and small widths

Quote journeys

The mobile-first approach also applied to forms. To improve usability, these were broken down into clear step-by-step layouts. These improved form styles have now been rolled out to the quote journey for some of the key home and content insurance groups. We worked with Mark Boulton Design who conducted user research and helped to shape the user experience for students and graduates.

An early iteration of the purchasing process for gadget insurance

Results

The new design was well-received and Endsleigh have seen an increase in both traffic and conversions. It was also great to hear that the website has made life easier for their staff.

Our redesign and the resulting improvements in legibility and performance led to:

  • a 20% drop in bounce rates for tablet users
  • a 40% increase in conversion rates for key products
  • a 15% drop in the number of calls to their customer service centre
  • further work adapting designs for the customer account for Endsleigh’s parent company ‘Zurich’
Photo of conference speaker with slide featuring the Endsleigh website
The site has since been used by Google at the 2014 [email protected] conference as an example of how to design an effective navigation system for responsive websites.

“I’ve worked with Phil for seven years across a range of challenging projects. He has never failed to deliver on time and budget. He’s not afraid to challenge where necessary and always adds a great deal to any project he’s working on.”

Iain Harper
Head of Digital & Brand, Endsleigh Insurance Services

More projects