As GoCompare products and visual identity were evolving, its homepage needed an update. I got on the case.
The problem
One of the main role of a homepage for a company like GoCompare is to offer the flexibility required to support commercial strategy adjustments, as often as needed.
As new product lines were going to be introduced, and some of the existing products pushed forward, it became apparent that the existing homepage template was reaching its limits.
This homepage was great for promoting marketing campaigns but offered little flexibility to feature new products. Also it started to look dated, and didn’t work so well on mobile devices, especially since the mobile optimised redesign of the core product journeys.
Several unfortunate attempts to patch the page by adding up missing functionalities confirmed that a complete redesign was necessary.
My approach
I first explored a ambitious reshuffle of the entire homepage content, but quickly understood that a targeted optimisation of its main function – featuring products – was what mattered.
Also, the brief was for the homepage only, there were no plans for changing anything else on the website at the time, and time was limited. So my focus shifted to the page hero.
The current homepage was featuring two main products as hero, followed by six other products as secondary features. The main goal was to provide equal prominence to all eight featured products.
I chose to integrate a manual carousel within the hero to allow the user to switch between up to eight products features. Each product would have its own promotional background image, messaging and call(s) to action.
To reinforce the visual language and get continuity through the product journeys I designed a set of iconography for each of the featured product. These icons would be featured from the homepage all the way to the end of the related product journeys.
While the hero was the main focus, introducing the only new functionality of this redesign, I developed the aesthetic introduced with the product journey redesign to support the other elements of the page. Page header, main navigation, content cards, news feeds, page footer, every element benefited from the refreshed visual language, while keeping the exact same content as the original.
As mobile optimisation was one of the other priority, I designed the page layout and all its elements to be fully responsive. Using the style guide environment I coded a fully working front-end prototype of the homepage, allowing me to demonstrate the responsive breakpoints and different interactions – main navigation drop-downs, mobile hamburger menu, hero carousel transitions, etc.
The prototype code got used for production during the CMS integration. As I designed the page to be fully modular and editable, I worked closely with the CMS engineering team to make sure the website editors will be able to edit all the page content from the CMS back-end and easily swap featured products without the need for a code change.
Next
The first version of the new GoCompare homepage launched towards the end of 2015. With minimal functionality changes it has enabled much more flexibility for featuring GoCompare products than what the original could do, and dramatically improved the overall experience, especially on mobile.
Since its launch, this same homepage template has been stress-tested to support new marketing campaigns, the launch of several new products, a bespoke set of product photographies, and the launch of a new brand identity for GoCompare.
The views expressed in this article are my own and are not intended to reflect those of GoCompare. The content used within this article is exclusively used to illustrate my key career achievements so far.