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 trough the design and performing usability tests I discovered that the desktop view performed very good but the mobile view had a lot of problems.
Problems in mobile view
- Hard to see that there was several coverages to choose from.
- Did not reveal what the cover in focus did not contain. Some users thought it then contained everything there is to offer which, most of the time, is not the case.
- Hard to compare the coverages.
Problems in desktop with over 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 still present 5 coverage without it being overwhelming for the user.
The work included
- Usability test of 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 implemented solution
The most liked design is not always the best
During the usability test of the two design variations for desktop 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 we focus on displaying the 3 coverage that the user should be most likely to be interested in; a coverage higher than and one lower than the chosen coverage. The default is based on recommendation logic, for example the age of the car. The other coverages are also visible but in a “minimised”-mood. The user are still able to choose which cover she wants and see what all the coverages are containing as well as the price. To choose the right coverage is hard and the user really like 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 was several coverage to choose from as well as in the choosing process. Comparing prises as well as coverage are the biggest task is the web shops. 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 was several coverages to choose from. They also noticed the sweepable feature to change coverage, not only pressing the arrow buttons. They really appreciated to be able to see what is not included in the choose coverage. The users have an overall feeling that the insurance industry are not going to cover when something happens to them do to some small texts in the fine print or something. This transparency brings a secure feeling and enhances the ability of making 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 are 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.