For Go.Compare, an insurance and financial products comparison website, the task was to review, identify and make improvements to the key landing pages that allow users to start their comparison of insurance and other financial products. My role was to create, test and review different designs and concepts through multi-variant and A/B testing
Review
The first thing I looked at was how the current pages were performing and gather the data. The majority of data came from quantitative sources such as Google Analytics and reviewing heatmaps from SessionCam. It was clear that the majority of users did not scroll down the page but instead focused on the top 25% of the page and then either bounced or clicked on the main call to action (CTA).
For qualitative feedback I review direct site feedback from Qualitrics as well as working with customer services data to see any feedback that has been received for either the landing page or as part of the journey comparing insurance or financial products. Mark Phelps who was my manager at Go.Compare had the following to say about my approach to data and analytics:
I worked with Mike over the last couple of years in both a direct and in-direct capacity. Mike is intelligent, hard-working and has an incredible thirst for knowledge. There wasn’t a project in progress that we didn’t involve Mike in, as his breadth of understanding delivered improvements in all aspects of the projects successful delivery. If I had to categorise Mike, I would say that he a UX/UI expert with a scientific approach to testing and optimisation. Whether it was a new website design, a new data capture/validation webpage or a robust approach to testing user engagement in Optimizely, Mike was able to measurable improve the commercial success of every project he was involved with.
Mike was a fantastic colleague at GoCompare and I look forward to working again with him in the future. He would be a real asset to any company who take testing, optimisation and user experience seriously.
Wireframes
Using Sketch I created a series of wireframes and pinned them onto a board where stakeholders and other colleagues could see the potential designs. As well as paper copies, the designs were shared on InVision, a service that allows you to upload designs and share them to gather feedback.
After a few iterations, the wireframes went from low-fidelity to high-fidelity, working with different colleagues to make sure it met business needs, including branding, product teams and marketing, as well as compliance, as it was for a regulated financial company.
The design
In the end, 4 totally different designs were created, some of the themes that were focused on were:
- a focus on the brand mascot by showing them in the top 25%. The brand character is a very familiar figure through TV advertising so it made sense to bring them into the landing pages
- customer reviews and star ratings. The company at the time had around 4.5 out of 5 ratings but this was not being featured in the hero, this was added to the design to highlight the positive customer experience
- consistency in the branding and design
Testing
With the 4 designs wireframed and prototyped, it was now time to see which one worked. In total there were 5 variants, the fifth was the control which was the existing design. The tests were set up using Optimizely, a well-known platform that provides multi-variant testing.
I built and linked up the metrics to measure clicks on the call to action (the primary metric). The secondary metrics were the bounce rate and the click out to the provider to purchase the product.
Conclusion
The result was an increase in the primary metric as more users began clicking on the main call to action button. This sent more traffic down the funnel which led to an increase in people clicking out to the provider to buy. By using prompts like the customer reviews, the brand character and making the design more consistent with the wider brand this helped more customers recognise the brand and trust they would get good quotes.