home
home
ABOUT
ABOUT
WORK
work
contact
contact
SAINSBURY'S BANK
UX/UI Design
The goal of the project was to increase conversion of car insurance on the Sainsbury’s Bank website by identifying key issues with the quote and buy section of the journey and finding design solutions to improve the experience.
As the only UX Designer for the bank, all the research and subsequent design work was carried out by myself. I used Userzoom to understand what users liked and disliked about the existing screen design. Then I was able to move to online unmoderated usability tests to enable me to iterate and test multiple versions of the design.
This project is currently still ongoing hence the designs have not been handed off to the developers and iterations are still being created.
Worked with: Insurances Product Manager - Car, CX Manager & 3rd party hosting developers
Tools used: Figma, Adobe Xd, Userzoom
Through usability tests on the original design, I was able to discover that the journey had several key issues:
• Too much content without a page-break leading to a single long screen
• Old design language that did not match the Sainsbury’s Bank website
• Badly executed visual hierarchy and white space
• Poor process of purchasing add-ons through the use of 2 clicks rather than 1 - Process was as follows - "Add" CTA followed by an "Update price" CTA. User's often missed the "Update price" leading to the add-ons not being added to the purchase.
Scroll through the screen below to see the original design to be improved upon.
Research was gathered and formatted in a presentation style to distribute to key stakeholders involved in the project. Research was conducted on the original design of the screen and then usability testing was conducted on every iteration of the design to understand the points of the journey a user might stumble or stop and whether there were any pain points.
During the initial stages of the design process I kept the iterations in the old design language of Sainsbury’s Bank (plum coloured CTA’s and beige background with thin fonts) to keep development costs down and avoid a full redesign. Throughout the user testing however, participants commented on the old style of design and how it didn’t match the bank’s website. After consideration with the relevant stakeholders, we agreed the best way forward was to update the design language and in doing so, many of the old components could be updated or swapped out with more appropriate components that existed in the newer design kit.
Another flaw of the original journey was the length of the content. User’s were struggling to navigate through the long, single page design and found the number of questions too high. The solution here was to split the page in to two more managable pages - quote (plus important information) on the first, and buy (add-ons) on the second. The order of some of the content was switched around to conform with regulations set by the Compliance and Information Security teams in the bank.
Below is the initial redesign in the old design language, split into quote and buy screens respectively.
Later iterations of the journey in the updated design language gave better results in user testing and had a significant rise in task completion through the prototype.
Below is the latest iteration both split over two pages and in the new design language.
Switch components have been tested as a method of upgrading the policy with add-ons. This is to combat the issue in the original design where the user had 2 clicks to add an extra on their policy - "Add" followed by "Update price".
