Methane Guiding Principles
Web UX & UI
Software:
- WordPress
- Sketch
- InVision
- Illustrator
- Photoshop
The Client
Many of the world’s largest oil companies have formed a coalition to hold themselves and others accountable for the amount of methane produced within their industry. As a result, the Methane Guiding Principles were formed and Shell accepted our pitch for their branding and design work.
The Task
Wireframes and designs for the newly founded Methane Guiding Principles website, working closely with the developer on the build. The site needed to clearly inform and explain the five MGP principles as well as the purpose and expectations of the coalition.
My Role
With branding and full brand guidelines already designed by my colleague, along with a set of printed material, I was able to translate these into a full set of web page mock ups using Sketch. These were then presented to the client by the company director and our partner marketing agency via InVision, allowing for comments and feedback and various iterations.
I maintained the site, adding news items and creating on-brand graphics. Lo-fi then high-fi designs before building out various new aspects of the site in wordpress, for example the Best Practice Guidelines page where various PDF documents, that I have also created, are now available in translated languages via clickable modal boxes.
Various design mockups for accommodating a separate category for two new Best Practice Guides
The layout for all 8 guides was previously designed as part of the original site build. As an amendment, two new guides needed to be incorporated but the client wanted these clearly shown as separate from the others.
Below shows various options provided to the client, featuring a couple of colourways consistent with the rest of the site, and a tabbed design option.
