Is hydrogen the future? What is the role of biofuels? How long until all the world’s cars are electric? For over 50 years, Shell Scenarios have explored possible versions of our future. While hypothetical, they help to challenge and inform key audiences including academics and policymakers.
In the midst of threats to global safety, including Russia’s invasion of Ukraine, Fourleaf were commissioned to tell the story of ‘The Energy Security Scenarios’ and how the world could fight climate change when its more immediate need is for security.
Shell is a global group of energy and petrochemical companies, using advanced technologies and taking an innovative approach to help build a sustainable energy future.
As a customer-focused organisation, Shell serves more than 1 million commercial and industrial customers, and around 33 million customers daily at more than 47,000 Shell-branded retail service stations.
The 2023 Energy Security Scenarios follow the course of two pathways; Archipelagos and Sky, asking the question "Can a world desperate for immediate security also meet the long-term challenge of climate change?"
As scenarios are based on both past data and future predictions, there is a heavy focus on graphs, charts, and data visualisation focussing the initial strategy on how to present such a vast amount of facts, figures and information in an engaging and easily consumable way for both a top level audience wanting only brief but informative content while also enabling a deeper dive for academics and policy makers who expect more detailed, longer form content.
Within the first 24 hours of our solution going live, the engagement stats speak for themselves.
Our approach was to present engaging data-driven content through an interactive digital asset and downloadable reports which are central to the Shell global website.
Over 120 graphs and data visualisations were created through charting libraries to ensure accessibility as well as interactivity. Meanwhile, custom infographics and data visualisation were also created where animations or illustrations told the story and trends behind the data better than a graph or chart. The visualised data sits within text content articles providing a narrative behind the science.
Our remit also extended outside the interactive asset into revamping the entire Shell Scenarios section of the Shell.com website. This included work to reorganise the structure through to ensuring all graphics and content were updated to reflect the new Energy Security Scenarios visual identity. Animations also reinforced the motion identity and directed users to key areas of the site.
Fourleaf also produced a set of accessible digital PDF reports; a 100+ page comprehensive report with all content and data from within the digital asset, and a summary report giving an overview of the Scenarios. All offline content supported the digital asset, providing another way for users to explore the topics and data.
Through our work, Fourleaf became brand guardians of the Scenarios brand, helping to finalise the visual playbook and maintain consistency across various applications.
If you’d like to read more about this project or discover similar projects to this one, get in touch with us to learn how we can help you.
Case study
Case study
The solution
As an introduction and to educate users on what informs the Scenarios, illustrations and data visualisations animate on-scroll through creating an immersive experience throughout the narrative, leading the user to the timeline. From here a user is able to access every article either by navigating the timeline or via a drop-down menu which acts as a shortcut for those returning visitors who know exactly where they want to go.
When clicking on an article from the timeline, a 50:50 text and visual page opens as an introduction to the topic. Those with a demand for more in-depth data and content are catered for by expandable sections, allowing deeper dives into each subject.
Throughout the asset we focused on the user, ensuring their experience was not only engaging, but also highly user-friendly, including a filtering system and a text-only set of menus for users with additional accessibility-based needs.
Website design & build
Custom web development that delivers rich digital experiences.