Shell
Designing a hub for Shell's net-zero mission
The brief
Shell Energy is a UK energy and broadband provider, and they wanted a new section of their existing website which housed content related to their mission of working towards net carbon zero in 2050.
The brief
Shell Energy is a UK energy and broadband provider, and they wanted a new section of their existing website which housed content related to their mission of working towards net carbon zero in 2050.
Discovery
Understanding the content: The first stage of the process was to review and understand the content Shell wanted to feature, both from content already existing on the website, and fresh content that was supplied for the net-zero part of the site. I created a content audit which identified all existing content that could be reused for the new hub, for Shell to review before moving to the next stage of the project.
Website review and categorisation: Armed with the knowledge of what content was to feature, I reviewed the current website structure in order to determine how the new hub would sit within the navigation, creating an as-is sitemap.
Define
Adding to the existing as-is sitemap, I created a new proposed sitemap which outlined how users would navigate to the new net-zero hub within the website, and the way in which the net-zero content would be categorised.
Discovery
Understanding the content: The first stage of the process was to review and understand the content Shell wanted to feature, both from content already existing on the website, and fresh content that was supplied for the net-zero part of the site. I created a content audit which identified all existing content that could be reused for the new hub, for Shell to review before moving to the next stage of the project.
Website review and categorisation: Armed with the knowledge of what content was to feature, I reviewed the current website structure in order to determine how the new hub would sit within the navigation, creating an as-is sitemap.
Define
Adding to the existing as-is sitemap, I created a new proposed sitemap which outlined how users would navigate to the new net-zero hub within the website, and the way in which the net-zero content would be categorised.
Sitemap with the new proposed hub section identified
Design
With the content audit and sitemap complete, I then worked collaboratively with a copywriter and UI Designer in order to create mid-fidelity wireframes which mapped out the design and structure for x5 new pages for the net-zero hub. The UI designer and copywriter worked along side me to create designs that worked with the look and feel established for Shell Energy, and ensuring the right components were being used with respect to how much copy should feature in each section.
Modules and components that I used in my design were taken from the Shell design system, which outlined all the available existing modules we could utilise for the designs.
Design
With the content audit and sitemap complete, I then worked collaboratively with a copywriter and UI Designer in order to create mid-fidelity wireframes which mapped out the design and structure for x5 new pages for the net-zero hub. The UI designer and copywriter worked along side me to create designs that worked with the look and feel established for Shell Energy, and ensuring the right components were being used with respect to how much copy should feature in each section.
Modules and components that I used in my design were taken from the Shell design system, which outlined all the available existing modules we could utilise for the designs.
Miro board showing the wireframes created for the new net-zero content for desktop and mobile.
The result
A newly designed hub on Shell's website for their Energy's net-zero mission content, launching in September 2022.
