All Work

Energizing Life Everyday Local

Problem

We wanted to educate Ontarians on the work that takes place across the province to ensure energy demands are met. There was an iteration of this campaign that we had done six months prior. However, with this new iteration, we wanted to highlight major transmission projects relevant to very specific target audiences. The original page was designed somewhat recently, so we racked our brains to see what we could improve.

Final version - after tweaking using data from heatmaps and user recordings.
Initial launch version

Initial Redesign Actions

We had a number of ideas to improve on the existing design. Something we noticed while watching some user recordings of the previous design was that users stopped scroll within the first 50% of the page, and bounced. We made a concerted effort to reduce the variety of content and refocus on the main message of the landing page.

Added a sticky navigation that would let users jump to their relevant area. This nav was below the introduction section.
Whenever the target demographic changed, the page was changed to highlight that section first. Content cards were created to fit many types of content into the same section the page.

Iterative Design

While the page was performing well on desktop, mobile users would bounce very quickly. After extensive analysis in Google Analytics and Microsoft Clarity, we discovered that users were distracted by the cookie banner because it was so large, that it was blocking 70% of the view.

Cookie Banner

As we rely on a website vendor for hosting and website-wide CSS changes, we wrote inline CSS to test the changes before requesting vendor implementation. The cookie banner changes were:

  • Reducing the font size
  • Enlarging the accept button
  • Adding transparency effects reveal content underneath 

These changes seemed to work, as cookie banner close actions went up by 4%. We sent the changes to our website vendor who implemented our CSS edits on all pages.

Page Design

Observing users after the banner change uncovered the following:

  • There were dead clicks on the campaign logo, mistaking it for a button
  • They were bouncing quickly because the content didn’t align with the ad that brought them to the page
  • They weren’t able to glean anything useful from the information in view on mobile.

To address these, we made the following design changes, during the final flight of the campaign:

  • Removed the logo (with a lot of convincing)
  • Changed the background image to a more dynamic outdoor theme
  • Brought a short description into view on the masthead
  • Added 3 jump links to the header, one anchoring to our featured video
  • Before, content cards had tags that would describe the type of content that the user was clicking on. The tags were changed to what the users should take away from the content.
  • Moved the navigation below the masthead instead pf after the first section
Added a sticky navigation that would let users jump to their relevant area. This nav was below the introduction section.

Results

After all of these changes during the campaign, we improved the bounce rate by 2% and average session duration went up by 5%. Overall engagement went up 10%.

View Page