This year Shell decided to build their Sustainability Report using our Online FirstTM approach. This solution puts the digital version at the center of content creation. Concept and design focused on optimizing content for screen devices, taking into account their specific needs in terms of format, contrast, interactivity and accessibility.
Building a corporate report from a digital perspective still is uncharted waters for most companies. Although we are all used to reading content from screens, PDF is still the dominant format for reporting executives. The Shell sustainability and communications teams allowed us to rethink this approach and to start a journey on which readers using screen devices are the main beneficiaries. This journey peaked in the very successful go-live on April 12, 2017. This post tries to outline the main goals, ideas and challenges of this lighthouse reporting project.
Digital concept
For more than ten years nexxar has provided the digital version for the Corporate Reporting of Royal Dutch Shell plc. The approach to digital reporting has certainly evolved since then. Back in 2006 mirroring as much content as possible was the dominant prerequisite for legal compliance reasons. Over time, web tools and features were added to enhance the usability of the report microsites. However, until last year, the approach for content creation still focused on print.
For the last 5 years we have been working to bring our digital perspective into the content generation process. Based on the requirements of several of our clients we designed a seamless workflow process that combines the strengths of a web-based CMS including user rights management and version control with the ability to produce printable high-end PDFs. Cornerstone of this “online-first approach” is the appearance and usability of the web version. Using the CMS for content creation allows the editors to generate content from a web perspective right from the beginning.
The Shell Sustainability team was intrigued and so we kicked off the 2016 Sustainability Report as an online-first project in early September 2016 with a full-day workshop in The Hague. It’s obvious that in the first year needs of a project with more than 30 content contributors mainly concern changes in workflow and the initiation of a digital shift in the mindset.
From a content perspective, we aimed at optimizing text for web readability and transforming the static infographics into engaging, interactive ones.
Interactive information design
We carefully analyzed messaging and communication needs and matched them with web technologies to provide animation where it actually adds value. Sometimes it’s just about reducing complexity at first sight. In other cases we agreed to stick with a static solution, since interaction would overcomplicate the message. Find a selection of examples below:
- Goals and performance
- Sustainable Development Goals
- Scorecard Structure
- Today’s energy needs
- Energy challenge
- How carbon capture and storage works
- Interactive map to our partnerships
- Collaborations Overview
All the interactive infographics have been designed to work on desktop and mobile viewports.
Other, well established tools and features to enhance web usability
- Chart Generator
- Dynamic mouse-over charts
- Interactive GRI Index
- Landing page animation
- Content sensitive cross-links at the bottom of each page to corresponding content within the Report and to “More information on Shell.com”
- Layer glossary, compare to last year and change report layer
The entire report has been optimized for mobile devices!
PDF on top – automatically generated from the CMS source
Together with the fully accessible online version we created a PDF for download in full and in sections. This PDF is generated straight from the web CMS where all content is created and amended. It is important to point out that there is no separate type-setting in place to build this PDF.
The layout of the PDF fully complies with the design guidelines for Shell print publications, including a detailed master grid providing three columns – two for text and a margin column used for headlines and oversized graphs or charts. The content structure (page run) of the PDF slightly differs from the web version to accommodate different reading habits in print or optimize the use of portrait format pages in the PDF. In addition, the headline hierarchy can be adjusted if necessary.
Enabling a secure and easy implementation process
Besides the mind-set shift from print to web in terms of content creation, another major goal of this approach is to simplify the publishing process of the Sustainability Report. Creating content on a web-based CMS also means to benefit from a collaborative working tool including state-of-the-art tools like version control, ticketing system or user rights management. With these tools in place, the responsible content contributors were able to take care of the implementation and amendments of content, instead of marking up and double-checking change requests. This proven process management was key to making the Shell Sustainability Report 2016 a successful show-case not just for readers but also for all members of this projects!