A mobile-first redesign of Endsleigh

Endsleigh are an insurance & financial products provider who specialise in providing services to students and graduates. They asked us to completely overhaul endsleigh.co.uk, creating a modern, mobile-friendly experience that presented the full range of Endsleigh’s product offering in a clear and engaging way.

The results

  • Our redesign and the resultant improvements in legibility and performance lead to a 20% drop in bounce rates for tablet users.
  • On some products there was as much as a 40% increase in conversion rates.
  • This led to a sharp 15% drop in the volume of calls to their customer service centre.
Endsleigh homepage at different widths
The new, responsive endsleigh.co.uk

What they said

We’ve worked with Erskine on several projects. What we love about them is their ability to respond quickly and balance expertise with the common touch.

Iain Harper, Head of Digital & Brand, Endsleigh Insurance Services

The brief

Endsleigh’s previous website wasn’t working well for them or their customers: the fixed-width site was hard to use on mobile devices, poorly structured and highly limited in the types of content it could contain. This was translating to lost sales and frustrated customers.

Our primary goal was to create a fast, mobile-friendly experience which presented the full range of Endsleigh’s services in a clear and engaging manner. Alongside the redesign of endsleigh.co.uk, Erskine was also tasked with the development of a maintainable design system to be used across a refresh of all of Endsleigh’s online products and services.

A mobile first, user-centered approach

Our discovery phase showed a large proportion of Endsleigh’s customers accessed the site from their mobiles and other devices with small screens. This tallied with our experience working on other similar projects and we knew a mobile-first, responsive approach would pay immediate dividends. When starting with the mobile experience, the focus has to be on two things: clear, structured content and optimal performance.

Student motor insurance landing page
Student motor insurance landing page

Forming a plan and backing it up with data

Endsleigh have a broad, fairly complex product offering. The former site failed to present that offering in a way that customers could understand quickly, resulting in reduced conversion rates. The success of the new site would depend on concise, structured content.

Our Information Architecture (IA) team audited each of the many hundreds of existing pages, drawing out parallels and similarities, and rationalising and condensing where possible. From this we created an IA framwork that described and structured Endsleigh’s offer in a way that was clear and meaningful to its customers.

We then conducted extensive testing with real Endsleigh customers, iterating on our ideas and testing again until we were confident in the IA’s real world performance.

From this work we created both the sitemap that informed the rest of the design process and a content taxonomy that the internal team used to review and rewrite the site content.

Mobile navigation on endsleigh.co.uk
Mobile navigation on endsleigh.co.uk

A modular design system and front end architecture

We planned this project as a series of flexible components that can be assembled together as required to build up more complex layouts. This modular approach increases the speed with which new features can be built out, and decreases time spent on testing and QA.

It also formed the backbone of a system that allows design and front-end code to be shared accross Endsleigh’s online properties, improving the consistency of the user’s experience and reducing maintenance overhead.

A lightning fast website

A critical goal for the new endsleigh.co.uk was to create a site that was both extremely fast to load and highly responsive to use.

We combined leading-edge technical practises with project strategies such as setting a website performance budget and our modular approach to design & development to create a finished site that works well across devices and keeps bandwidth usage to a minimum (of particular concern for mobile/3G users).

That works beautifully across devices

As always, we used progressive enhancement to create a consistent and accessible experience for as many users as possible. Throughout the build we tested every component of the site using our in-house device lab, ensuring compatability across a broad range of mobile, tablet and desktop devices.