GoCompare Redesign
Role: UI/UX Designer
Tools: Figma
Year: 2020
GoCompare is a British site that compares pricing of various different services from car insurance. Established in 2006, GoCompare strives to save people money by giving them the data necessary to make informed decisions. After seeing many poor reviews of their website, I decided to tackle redesigning their site.
The problem:
Based on user interviews, people are unsure what GoCompare does by looking at the home page. Many believe it to be a car rental company at first.
The solution:
Redesigning the GoCompare website to better encompass all the services that it offers. I also altered the site architecture to reduce redundancy and make navigation easier.
Redesigning, not rebuilding
My goal was not to remove any of the information that GoCompare currently has on their home page from the site entirely, but rather to restructure it. I also kept the current color scheme and font.
First, I scrolled through the home page and made note of information they currently had. I found that they essentially repeated a couple key points, such as their 4.6/5 star rating and how they are “always impartial”, over and over again in different formats.
What I removed:
Information about free £250 excess cover. This led many users to believe that the site was only for car-related topics, which is incorrect. Instead, the information could be placed on the page specifically for car insurance.
*This decision was made from a user standpoint. From a business perspective, it may be better to leave the ad on the home page.
The fine print related to the free excess cover.
A list of the primary and secondary navigation at the bottom. This was redundant and visually unappealing.
A “preview” gallery of some of their products. With the primary and secondary navigation right at the top, this “preview” was unnecessary.
Ultimately, I decided to keep the following information on the home page:
The layout of the section above the fold
The section on “When it matters, GoCompare”
“Trusted by you and always impartial”
A graphic showing the 4.6/5 star rating
Links to their blog articles
The footer
A scroll-through of the current home page. Note that the image above the fold has changed since this project’s completion. At the time of the project, the image was the one on the right.
This was the layout and image of the home page at the time I worked on this project.
Keeping it concise
In my redesign, the home page is much shorter after removing the unnecessary and redundant information.
The section above the fold on my redesign.
The main text above the fold was edited to emphasize more of the money-saving aspect of GoCompare rather than car-insurance. The graphic on the right was also changed so that instead of just cars, which led users to believe the site was for a car-related topic, many different items are displayed that cover the different services GoCompare compares. The images were all taken from pages within the GoCompare site, save for the image of the balance that replaced the fuzzy dice.
No more Mr. Ambiguous
The redesigned blog section.
A new header for the blog articles explains more clearly that they are articles, while on the current website the header is a bit ambiguous. The side-scrolling functionality was kept the same.
Intuitive site architecture, please!
The top navigation was rearranged to reduce redundancy. For example, on the current website, everything that appears under Motoring also appears under Insurance. Rewards was removed from the top navigation since again, it was simply an ad for the free excess cover. In the drop-down menu, instead of the icons on the left-hand side serving as “quick-links”, I placed blog articles related to the topic of the drop-down. I saw the “quick-links” as unnecessary since users could simply click on the appropriate topic they want from the drop-down.
The drop-downs are responsive, darkening the background when opened, darkening a specific topic when hovered over, and popping out the articles when hovered over.
A scroll-through of my final redesign.