Mercury Kiss Oil Goodbye
Join the Electric Revolution. Here’s how we modernised Mercury’s public website to make it even more wonderful, and helped customers find the content that matters most.
Client
Mercury
Visit
Industry
Utility
Type of work
- Websites
- Campaigns
What we did
- Design
- Strategy
- Technology and development
The challenge
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.
The website is incredibly important for a business like Mercury operating in a sector with no physical retail footprint. 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 conducted 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, and even how to join. This wasn't good for a brand operating in such a competitive industry, where digital is the primary customer touchpoint.
The website we tested was originally designed in 2016 as part of Mercury’s award-winning rebrand. It was an awesome site at the time, 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.
The solution
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 while modernising it, making it stand out from similar sites in the sector, and solving the IA problems 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 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 with 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 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 is the quick links that seamlessly transition the user from the homepage to a series of animated content pages. These links currently tell how Mercury is supporting the Electric Revolution in NZ. Still, 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.
The results
In 12 short weeks, we took the site from outdated and hard to navigate to contemporary, intuitive, and adaptable. At the same time, the findability of content radically improved, enabling customers and non-customers to complete the top tasks they were coming to the website for.
Design is wonderful!
