Several of If’s insurances have different coverages to choose from. For the user to easy understand; what the coverage contains, the difference between the coverages and decide which one to choose, they are displayed in a comparison table.
When I started at If a digital firm had delivered a design for the comparison table containing 3 coverages to choose from and I took over the task to take the design further out to our web shops. After going through the design and performing usability tests I discovered that the desktop view performed good but the mobile view had a lot of problems.
Problems in mobile view
- Hard to see that there were several coverages to choose from.
- Only showed what was included in the cover in focus. Not what you missed out of. Some users thought it contained everything there is to offer which, most of the time, is not the case.
- Hard to compare the coverages.
Problems in desktop with insurances offering more than 3 coverages
Some of our products at If have more than 3 coverages. The worst have 5 coverages to choose from. After challenging the reason for having 5 coverages on meetings with our Product and Price department the decision was to still offer this to our customers. I then took on the task to present 5 coverage without it being overwhelming for the user.
The work included
- Usability test of an existing design for desktop and mobile
- Brainstorming and sketching potential solutions
- Concretise design proposals in Photoshop
- Two design proposals for desktop and one for mobile
- Usability tests of paper prototypes of the designs
- Prototype iterations and high fidelity prototyping
- Usability tests of high fidelity prototypes
- Prototype iterations and handover for implementation
- Hallway-testing of the implemented solution
The most liked design is not always the best
During the usability test of the two design variations for the desktop version we performed the test on one variant and after the test was finished we showed the other variation just to get a little sense of feeling for that one too. It was very interesting to see that the design proposal that was most liked by the test persons was not the one that performed the best on the tests. Of course, we let the test results decide which one to move forward with, not what the users thought looked the best.
The final design
Desktop
To not overwhelm the user with choices the main focus is on the three coverages that the user should be most likely to be interested in. The selected coverage and the two closest to that one. The other coverages are also visible but in a “minimised”-mood. The user is still able to choose which cover she wants and see what all the coverages are containing as well as the price. The video below shows how the states of the coverages change when the user selects a different coverage.
The default coverage is based on recommendation logic. For example, the age of the car. The black speech bubble above describes why we recommend that one. To choose the right coverage is hard and the user really likes the recommendations but want to take an informed decision themselves on what to get.
The minimised price played a big role in the user seeing that there were several coverages to choose from as well as in the choosing process. Comparing prices as well as coverage are the biggest task in the webshop. Being able to see all that at the same time made the user feel secure in the choosing process meanwhile not being overwhelmed by all the information being valued as of the same importance.
Mobile
The new mobile design made it much clearer for the user that there were several coverages to choose from. They also noticed the sweepable feature to change coverage, not only pressing the arrow buttons. They really appreciated being able to see the things that were not included in the chosen coverage. The users have an overall feeling that the insurance industry is not going to cover the incident when something happens to them due to some small texts in the fine print. This transparency brings a secure feeling and enhances the ability to make an informed decision.
To compare the different coverages on the small screen are still a problem. Although though the new design made it possible for, the ones who noticed, to slightly compare the coverages of the closest coverages on the screen. The comparison feature in the mobile view is continued to be worked on in a separate project.
Program
Axure RP
Adobe Photoshop
Collaborative partners
Conversion Manager – Ronny Blossborn
Online Sales Manager – John Thydén
Nordic Design Manager – Mathias Brandt
Want to know more?
Feel free to contact me and I will tell you more about the project.