Creation of an information design library for communication
Marketing optimization - Strengthen content design to improve messaging
Enhance the impact of the core interactive graphic infographics ahead of the launch of the new eni.com website in early 2020.
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 in a much quicker manner. The design system transformed data-visualization from being an add-on into an integral and central element of Eni’s communication.
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 per the graphic process depicted below.
Explore the project
The Visual Agency was hired to advise Eni on how to redesign their main interactive infographics ahead of the launch of the new eni.com website on 6 February 2020.
Consultancy phase 1 - Analyzing the status quo
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
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.
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 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.