Description

Background

The Visual Agency has been producing infographics for Eni since 2012, and consequently won the tender to design interactive data visualizations in 2017 as an extension of the initial partnership. In 2019, The Visual Agency worked on the creation of an information design library to be used by the client for their new website eni.com.

The consultancy provided by The Visual Agency was structured in 3 phases, as shown in the graphic process depicted below.

Objective

Enhance the impact of the core interactive infographics ahead of the launch of the new eni.com website in early 2020.

Result

The infographic design system has made it possible for the different internal departments of Eni to consolidate the communication of their data. Furthermore, because of the versatility and flexibility of the design system, new communication projects could be launched much quicker. The design system transformed data-visualization from being an add-on into an integral and central element of Eni’s communication.

Year:

2020

Industry:

Energy

Consultancy phase 1 - Analyzing the status quo

The process

In order to standardize the different communication and style 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.

Consultancy phase 2 - Developing an organic Information design system

Designing guidelines

The drafting of simple style guidelines for the design of infographics would not have been sufficient to support the design and development needed for broad-production.

An entirely new style system was developed, creating and incorporating the brand guidelines provided by the client and combining these with an analysis of previous projects, focusing on the future content needs and outputs of the company.

Elements of 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, keeping the client’s design identity.

A linear and intuitive navigation mode has been designed to facilitate the use of content.

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.

Consultancy phase 3 - To apply the information design system

The application

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.