Earth Hour

  • wireframes
  • design
  • front-end
  • 5 months

Every year hundreds of millions of people around the world in more than 7,000 cities in over 180 countries take part in this amazing global conservation movement.
This years campaign had a radically different identity and needed a fresh website to boost engagement.

Wireframes

Earth Hour had a new campaign and completely new content, so the sites UI and IA had to be redesigned from the ground up. Wireframes for the homepage and content pages with cross site promotions, event pages, forms, site navigation and all tablet and mobile responsive.

Design

I had been given the 'Connect to Earth' identity from Earth Hour international so I used that as a base for the site's look and feel. I continued the theme of a dark colour palette with splashes of the Earth Hour electric blue, with the images shining through and taking main stage.

Front-end

I built each Earth Hour pages from scratch, the homepage with cross site promotions using our CMS, dynamic site navigation, CMS pages for updateable content, forms with live updates on people signing up, HTML5 elements for SEO reach, CSS3 transitions and animations for high engagement for younger audiences.

CMS implementation

Leading up to the day, Earth Hour has tons of news and information coming in thick and fast, and needed a CMS for the team to update as it happened. I built the site with HTML5, and included our CMS' tools and functionality so the site could be easily updated by publishers and the homepage would update automatically with featured articles and news.