Reimagining 123.ie's Motor Quotation Flow

Insurance forms don't have to be a chore. I transformed 123.ie's quote process into a gamified, step-by-step experience. Through this innovative approach, users found the process more enjoyable and reduced customer frustration.

Role

UX/UI Designer

Company

ICAN working with 123

Date

2017

Project Overview

123.ie is now one of the leading direct insurers in Ireland. They are most associated with car insurance but its portfolio includes home, travel, health and life insurance.
One of the biggest challenges facing the insurance industry in Ireland currently is price inflation. Motor insurance has increased by an average of 38% and home by 10% compared in the past 12 months. This has led to customers feeling antipathy for all insurers.
Insurance is generally a grudge purchase as most people will never have to use it. They only see the benefit when an accident happens.

Challenge:

The challenge we faced on this project was, as part of 123.ie’s Digital Transformation Project, to redesign the quote form to identify the strengths and weaknesses of the 123.ie Motor quotation journey and for us to suggest new features and functionality which they could adopt to improve;

  • Customer experience
  • Improve click to quote
  • Improve usability
  • To drive less calls into the call centre
  • Best in class in the insurance industry

Goal

The goals of this project were to create a new visual design of their motor quote process and to construct a high-fidelity, interactive prototype to test with real users.
We needed to also;

  • Adopt a more approachable tone of voice which is reflective of a relationship that a customer would have with an agent
  • To incorporate a gamified style to the question set which makes the quote experience more enjoyable for the consumer
  • To work on a mobile first approach, providing mobile designs first followed by desktop designs

Research

Firstly identifying the client's needs and requirements for the project, we took notes and started to conduct our research.
We conducted competitor analysis and examined market standards and trends, identifying what works well and what doesn’t work. We looked at examples of intuitive forms and processes in other industries along with research into the target user’s needs and pain points when it came to purchasing car insurance. We conducted interviews with users to gain a better understanding of what they think and how they feel about the process of getting a car insurance quote.

Findings:

We discovered when it came to purchasing car insurance online there were a few hurdles and pain points users had. The overall consensus we discovered was that the process was an unpleasant experience which takes too long. Some of the main points we gathered were;

  • The process is difficult to use and people often abandoned the form and chose to call the insurance company, or even avoided the online form altogether from past bad experiences.
  • People just didn’t enjoy doing it, the process felt more like a chore and a hassle. Forms were long and it was a daunting task to undertake.
  • Questions were often confusing and some people opted to abandon the form online and call instead.
  • Some information wasn’t clear enough eg. the difference between third party and comprehensive in terms of what exactly is covered.
  • Other questions were confusing the users and they didn't fully understand how to answer some of the questions.

Solution:

The solution we provided was a step by step, one question at a time, approachable and gamified style form. Implementing easily digestible information in an easy to understand format.

The "one question at a time" approach we took, along with the distraction free and clean layout, made the form feel like a less daunting task to undertake.

Other aspects we added, from the gamified process and successful completion page to the simple and clean icons, improved the experience and brought a fresh approach to the car insurance quote form.

Screens one questions:

In order to improve the difficult questions and unclear information people encounter we improved on the language used in the questions turning it into a more conversational and approachable style of language, addressing the user by name after that information was entered.

We also streamlined some of the processes making it easier and more intuitive to enter your information, for example;  Having an auto complete forms for the value of your car, job title and even for your address.

Auto Complete:

Along with the improved, less formal style of language, we also incorporated an assistant who guided the user through the process in the form of a chat style speech bubble. This assistant gave a more personal touch and mimicked the experience the user would have if they were to come into any of the 123.ie branches across Ireland. The speech bubbles contained helpful messages explaining more information about the question, who it applies to and in what format they would like your to answer in.

Chat Bubbles with information:

One of the main sections that users found confusing was the "What's Covered" section. In order to improve the clarity of this section, we designed a simple and clean wheel which was colour coded, showing what was covered, what was partially cover and what was not covered. When the user hovered over these sections more information appeared about the level of cover over the particular items. This wheel could also easily be switched to show comprehensive cover and third party cover, making it clear and easy to understand the differences between the levels of cover.

Usability Tests:

In order to test our research and designs we conducted a number of in-house and remote usability tests and interviews with target audience members. 14 test in total (7 for mobile designs and 7 for desktop)

Participants were first asked about their current car insurance, how they found their current provider, why they choose them and if they had any thoughts on the process which they remembered from getting their last car insurance quote.

I observed them and how they reacted with the prototypes while tackling the task of getting a car insurance quote. They were asked to think out loud as they carried out the task, so that I could better understand their thought processes. They were also video recorded along with their screen movements through a tool called Lookback which helped us later to review the tests and make sure we didn't miss anything.

By conducting those tests we identified key problem areas in the process which were quickly rectified with some slight design adjustments and then re-tested with different test participants.

Findings:

Some of the stumbling blocks and areas of hesitation we discovered during the tests included;

1) The positioning of the "Don't Know my Registration Number" message.

2 out of 7 participants hesitated when presented with this first screen when they weren't given the registration number. It took them a moment to realise how to continue but eventually found the correct way.

“ it didn’t seem really clear ”

Solution

To highlight the help message more we decided to place it above the “find my car” button. After testing the new layout, the remaining participants had no hesitation and they clearly saw the help message.

2) Unclear "Select Payment" box

One participant didn’t realise that the “select payment” box was a clickable button, this stopped them from being able to complete their purchase.

“Didn’t realise I could click that, just looks like information not a button”

Solution

To highlight the ability to click on the payment box, a label “select this payment” was added.

After testing this new design it proved to fix the problem and the remaining tests had no uncompleted quotes.

3) No claims bonus check box not visible enough

A few participants did hesitated when tasked with adding no claims bonus to their quote. The check box was not visible enough and it took a while for participants to notice it.
The first solution was to add a white background and to increase the space between it and the items above. This worked well for mobile but was too small when tested on desktop.

“I didn’t even see that box ”

Solution

To increase the size and add in a Yes/No question.
This worked well and stuck with the familiar style of questioning throughout the prototype.

4) Confusing style of  "What's covered" check boxes (on Mobile)

Some users thought that the check boxes were clickable and didn’t realise it was just showing what's covered.

“I thought I could click those”

Solution

To avoid confusion and possible frustration we changed the check boxes to circles.
This also maintained the consistent style with the desktop version.

5) Scroll down to continue not clear (on Desktop)

2 participants became stuck after clicking on the “select payment box”, they didn’t realise that you could scroll down for more information, and expected the page to progress after selecting the payment method. This resulted in two lost quotes.

"quite often buttons that you select bring you on to the next section... nothing obvious that I had to scroll"

Solution

A restructure to the layout of the page. Showing the price at the top and the beginning of the “What’s Covered?” section, indicates that there is more information below the fold so that users know to scroll.
The “payment method” buttons, when clicked on, highlight and activate the continue button so that it is clear what to do next.

The new layout then had to be tested again on mobile and there was no difficulty for the participants to continue to payment with the new layout, on either mobile or desktop.

Results:

The results from our research, interviews and usability tests provided extremely valuable insights for the complete process a user goes through when purchasing car insurance.

The overall feedback was overwhelmingly positive. The tests showed that the new design of the motor quotation process proved to be very straightforward and easy to navigate. Some of the positive feedback we received;

  • The design was complimented on its simplicity and clear layout. The icons improved the experience and users noted how it seemed less serious and off-putting compared to other online motor quotation forms.
  • The single question at a time made the process easier to handle and was not as daunting to tackle.
  • The gamified elements of completing sections and showing a progress bar also improved on the user experience and participants commented on how they liked these additions.

The client was delighted with the results and felt it was exactly what they were looking for. They were glad that the tests had been carried out and the problems discovered were solved.
We created a more personal and enjoyable experience with the user's goals at the heart of the process while also aligning it with the business objectives of the client.

We adopted a more approachable tone of voice which was reflective of a relationship that a customer would have with an agent in the insurance company and incorporate a gamified style to the question set which made the quote experience more enjoyable for the consumer. This along with the clear layout and imagery we transformed the motor quotation processes into a more personal and pleasant experience.