Mercury Kiss Oil Goodbye

Mercury’s brand promise—Energy made Wonderful—sets a high bar for the Company’s products, services and customer experience. It’s an ambitious pledge that helps separate the brand from the price-led sea of sameness across the industry.

For a business like Mercury, operating in a sector with no physical retail footprint, the website is incredibly important. It’s a shop window for the brand and what it stands for. It sets the tone for the experience you’re likely to have if you choose to become a customer, and it’s where many existing customers go to complete important actions.

After we carried out extensive information architecture testing on the website in late 2019, it was clear that customers were struggling to find the most important pieces of content—offers, rewards, Mercury’s sustainability story, even how to join. For a brand operating in such a competitive industry, where digital is the primary customer touchpoint, this wasn’t good.

The website we tested was originally designed in 2016 as part of Mercury’s award winning rebrand. At the time it was an awesome site, but while content had been regularly updated since then, the design hadn’t been touched. It looked like a four year old website. The digital world had moved on, consumer expectations had lifted, and it was time for Mercury to catch up.

In late 2019, the Mercury marketing team were working on a major new brand campaign, and this was the perfect catalyst to give the website design and IA a major overhaul.

The brief was to redesign the website to hero the new campaign story but at the same time modernise it, make it stand out from other similar sites in the sector, and solve the IA problems that were so evident in our testing results.

Our new design was informed by data and insight—from Treejack testing to site analytics, heat-mapping, and competitor research.

Our starting point was to fix the information architecture and navigation. Mercury had created a lot of content that you could only reach through CTA buttons because the old nav structure didn’t give them room to add direct links. This was where most of the good stuff lived so we had to make it easier to find.

Our solution was a mega nav—a pop-up menu that had clear sections and plenty of room to add multiple secondary links. This effectively doubled as a site map, and was fully customisable by the Mercury content team to make ongoing optimisation easier.

Our next step was to ditch the checkerboard homepage, and replace it with a full-bleed, looping video derived from the new brand campaign. This immediately modernised the homepage, introduced motion, and provided digital support for the new campaign. It also focused all of the action where the user was—above the fold.

But the design element we’re most proud of are the quick links that seamlessly transition the user from the homepage to a series of animated content pages. These links currently tell the story of how Mercury are supporting the Electric Revolution in NZ, but the structure was designed to support any story that Mercury wants to hero at a point in time. As the user interacts with these links, the page scrolls horizontally and loads fully content-manageable, contextual content slices below.

In 12 short weeks we took the site from outdated and hard to navigate, to contemporary, intuitive, and adaptable. And at the same time our overall Treejack results improved by 19%.

Design is wonderful!