Information Design System to communicate 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 advise how 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.

Phase 1
To analyze the state of the art


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.

Fase 2
To develop an organic Information design system


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 for atomic design


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.

Combining elements & navigation


The combination and interaction of the different atomic elements have allowed us to create a new and appealing modular system in keeping with the client’s design identity.
A linear and intuitive navigation mode has been designed to facilitate the use of content. In this example, the lateral movement represents navigation between the different sections of a visualization. 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.

The grid


Starting from the interface layout, we designed a modular grid on which to display the components of the infographic. The basic module (360×185 px) functions as a unit employed to build multiple layout variations. This provides a tool for organizing information and offering a perimeter of action for all data visualization values.

Phase 3
To apply the information design system


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 visualizations that clearly represent data and make content easily accessible.

👏 Clap this article on medium 👏


Stay updated


Subscribe to Berry – The Visual Agency Newsletter !


We will not send you boring stuff, it’s a promise 🤞