An Information Design System for the energy sector
The Visual Agency has produced infographics for Eni since 2012 and won the tender to supply interactive data visualizations in 2017. In 2019, The Visual Agency was hired to re-design the main interactive infographics created as part of this collaboration ahead of the launch of the new eni.com website on 6 February 2020.
The design process
In order to standardize the different languages introduced over the years in various re-works and by different content owners, it was essential to entirely rethink the process behind the creation of interactive visualizations, from design to development. The drafting of simple style guidelines for the design of infographics would not have been sufficient to support the design and development needed for production. A new style system has been developed from the guidelines provided by the client and analysis of previous projects: an information design system.
In keeping with atomic design logic, the elements from each data visualization were broken down and analyzed to subsequently reconstruct the data visualizations and representation of information.
Elements
The graphic design consists of both structural and indexical elements:
1 | structural elements to spatially distribute data and form a grid on which to display information,
2 | numerical indications, which serve as a reference for the representation of the data
Colours
Blue is used for charts with a single variable. Yellow is used to highlight significant data.
Secondary combinations are also used to encode more complex data and visualizations.
Variants of use that can be adapted to multiple design contexts have been established for every colour.
The grid
Starting from the interface layout, we designed a modular grid on which to display the components of the infographic.
Starting from the interface layout, we designed a modular grid on which to display the components of the infographic.
The basic module (360x185 px) functions as a unit with which to build multiple layout variations.
This provides a tool for organising information and offering a perimeter of action for all data visualization values.
Navigation
A linear and intuitive navigation mode has been designed to facilitate use of content.
In this example, the lateral movement represents navigation between the different sections of a visualisation.
Clicking on the top bar allows users to switch between the various tabs (and views) within a section, as shown by a zoom-out effect.
System
The combination and interaction of the different atomic elements has allowed us to create a new and appealing modular system in keeping with the client’s design identity.
Use
The system was then used as a starting point for the design of new infographic components.
Different textual, dynamic and interactive elements are used to create complete and immersive visualisations that clearly represent data and make content easily accessible.
Application
The same process was also applied to pre-existing visualisations which were reviewed and re-designed in line with the new design system.
The end goal was to create a coherent overall depiction of content.
We also designed a positive version using the same elements, in order to make the system adaptable and accessible to people across different sections of the site.
The team
Design
Sara Piccolomini — Information designer
Giacomo Bettiol — Art director
Sara Perozzi — UX designer
Sviluppo
Francesco Pontiroli — Digital design lead
Daniele Berto — Chief technology officer
Accounting
Marco Azzalin — Account executive
