Lead Product Designer
Go to LinkedIn
A major insurer in the United Kingdom wanted to upgrade their online self service offering. I was hired by their creative agency to produce personas, scenarios and wireframes.
On this page car insurance holders could make changes (mid-term adjustments, MTA) to their policy. The current cover is summarized in the box at the top. For each option there's also an indication by the relevant radio button. The registration number, P317 PWX, leads back to the detailed policy page.
In the left hand column I've pointed out and explained key design decisions. The last paragraph there explains the association between Foreign Cover and European Breakdown Cover: Policy holders need to select foreign insurance cover to be eligible for European breakdown cover.
Car insurance self service wireframe
This wireframe explains how the yellow fade technique is used to make the link between Foreign Cover and European Breakdown Cover obvious to the user. The primary client representatives were usability specialists, so the text goes into detail about where the technique comes from.
Basically, if you make a change that necessitates another change, the system will make it for you and alert you by highlighting the change. The initial proposal from the client was to prevent the user from preceding unless they themselves clicked on the right radio button. The only way they would know to make the correct selection was through static text at the top of the page. To make matters worse, there were several other options between the foreign insurance and European breakdown cover in their proposal. Making users jump through hoops and forcing them to read every word on the page is a sure recipe for cart abandonment.
Yellow fade technique
Yellow fade technique for system-initiated actions
MADE IN PIXEL TOGETHER