top of page

Sky Protect

- Flexible front end design

Sky protect homepage screens on a laptop device

Sky Protect wanted to ensure their website would have the flexibility and longevity to sell different types of insurance options.  They also wanted to use this as an opportunity to look at better product promotion and improvements to the sales journey in order to increase conversion.

Objective

As the UX lead on the project, my first step was to gather insight to help direct the experience and fill in gaps in our understanding of users. I did this by running an internal workshop with business stakeholders to gather more information on the business goals, the long term product vision and roadmap, and the possible opportunities for the new website. As part of this workshop, I led the group in an empathy mapping exercise in order to gain their combined expertise on user needs and likely behaviours. The outputs of this workshop gave me enough information to develop user personas and user journeys to help visualise the insight gained.

Approach

Sky Protect team workshop

I also conducted remote user testing of the existing Sky Protect site with the aim of highlighting any major usability issues with the current experience. One of the comments that often came up from respondents was that understanding plans and policies can be complicated and that they wanted to know cover information as soon as they arrived at the website. At the time, the only way to get to this information was by going through the existing cover builder journey first.

Sky Protect existing quote builder

I therefore decided to focus my attention on how to get users to the cover details as efficiently as possible, and present their options in an easy to understand way, whilst all the time ensuring we met our legal and compliance requirements around selling this type of financial services product.

To look for potential solutions I ran a competitor review, looking both within the warranty and insurance industries as well as outside the industry in order to look at any useful or innovative design ideas. I also spent time understanding the Sky.com site and how information was presented, in order to add the feeling of familiarity and trust for Sky Protect users.

Bulb quote builder example

The next step was to look at the information architecture of the new website. With the goal of trying to make the cover options clear and allow future product flexibility, I decided to break down each user decision making point into a single journey step in order to help make the information easier to digest and reduce cognitive load for the user.

Sky Protect quote builder user flows and information architecture

The new site experience quickly reached its business goals by helping increase click through rate for users starting the quote journey, as well as significantly increase sales conversion, particularly on mobile devices.

Results

I also explored ideas for how each journey step should be laid out. For this, I used basic sketches to help me visualise what would work best ahead of wireframing.

Sky Protect quote builder sketch step 1
Sky Protect quote builder wireframe step 1
Sky Protect quote builder sketch step 2
Sky Protect quote builder wireframe step 2
Sky Protect quote builder sketch step 3
Sky Protect quote builder wireframe step 3

Having reviewed the design direction with wider stakeholders, I moved onto producing detailed wireframes with a mobile first mindset using Axure. Through an iterative process of wireframing, prototyping and user testing, I was able to further improve the experience ahead of UI design and development. 

Sky Protect quote builder final design
Sky Mobile quote builder page
bottom of page