All Work

Sustainability

Problem

When I started at Hydro One as a designer and developer, I was beholden to the pre-determined architecture. When I became the digital manager I made it my duty to simplify but enhance the impact of the page. I gave myself and my team the task of competitor analysis to prove that we could successfully boil down 4 pages into 1, and improve sustainability report downloads.

2021 version - links out to 3 seperate pages
2022 version - all on one page

Lo-fi & concepts

My team and I found that there were many types of sustainability pages on the web, but most of them were one pagers. We then put our heads together to think through what a version of this would look like for our website.

We first took a look at the flow and how we wanted information to be conveyed. This concept is super condensed compared to what we ended up with.
This concept follows the lo-fi a bit closer then what the final design ended up being. You can see that the sections became more refined as we iterated.

UI Design

My UX designer and I collaborated on this design, trading off ideas that we've seen in all of our research. We really wanted to showcase our creativity, our brands multiple colours and big beautiful pictures. All while having some cool background effects and animations.

Hats off to you, Jacob Di Domenico!

Large header area displaying the cover image of the report and the year, in giant font.
A preamble section with jump links down towards each section
Coloured sections with jump links into a specific page on the sustainabilty report PDF.

We also implemented the on-scroll animation technique I had blogged about before to add some simple transitions to each section. In addition to that, we have a cubic-bezier scaling animation on our background dot effects. Simple animations go a far way, and are performant!

Results

Despite not driving advertising to the page, our improvements shocked us. While we decreased our time spent on page, due to consolidating information, the downloads for the report increased 34% and our pages per session went up 44%. This had proven that our strategy of combining multiple pages into one cohesive page has paid off.

We ended up using this as the basis for the 2023 sustainablity page which is currently live.

View 2023 Live PageView 2022 Design