2016-present | Ibm

How to Design a Dataviz Language With IBM

Dataviz, Consulting, Guidelines, and Branding

Some of the most influential figures in modern design have left their mark at IBM: Paul Rand, Charles and Ray Eames, Eero Saarinen, Richard Sapper, Accurat studio...As part of a digital overhaul in 2016, IBM contacted Accurat to establish consistent standards for data visualization that would guide the work of over 1500 designers on the development of IBM's full suite of software products.

Brief

In 2012, designers across IBM came together to create a unified visual vernacular that would apply to all digital products. Coined “Design Language,” the official curriculum was first made public in 2014. By 2016, IBM had tripled its design staff, and roughly 100,000 employees had undergone relevant training. But there was an omnipresent sense that software products related to big data, analytics, and cognitive computing were underserved by the guidelines, which lacked clear instructions on how to visualize data. IBM Head of Design Phil Gilbert reached out to Accurat to lead the development of a Data Visualization Design Language.

Process

We spent a full year conducting “field research” at IBM’s Austin headquarters. During this time, we collaborated with different teams to prototype solutions for real products in different lines of business: AI analytics, IT security, and drug discovery, to name a few. Immersing ourselves in these divisions gave us broader insight into how IBM operations work on a global level, and helped us focus our efforts to prepare customized guidelines for a multitudinous brand.

Meanwhile, we dove into IBM's visual archives, familiarizing ourselves with the company's vast visual heritage. The work of legendary staffers served as both inspiration and a starting point: homing in on recurring and iconic traits, we designed on–brand visualizations to act as illustrative examples and future templates for use.

To ensure that our guidelines were reflective of cutting–edge work, we also referenced texts by leading figures in the field including Alberto Cairo, Andy Kirk, Jeffrey Heer, Ben Shneiderman, Elijah Meeks and Dona Wong. And lastly, as is the case with all of our work, we stuck to the principles of "Data Humanism" and sought to impart the message that dataviz should always function to remind users of the people, places, and things that it ultimately represents.

Classic designs from IBM's archives.

Solution & Results

With the oversight of IBM Design Team, we synthesized our research and know–how into a curriculum that gave high-level context on the use of dataviz, including best practices related to composition, visual storytelling, animation, and interactive elements. Prescriptive to our research, we laid out explicit guidance on colors, shapes, and use cases for dataviz at IBM, and addressed common mistakes related to statistics and presentation. These guidelines were added to the IBM Design Language curriculum in 2017. They were made available to employees in addition to the general public in a user–friendly online course.

/images/projects/ibm/IBM_designlanguage_datavis_01.jpg

/images/projects/ibm/IBM_designlanguage_datavis_02.jpg

Accurat designed a collection of unique signature charts inspired by the brand’s visual heritage.

IBM Radial flower chart.

Geometric Granular View.

Alluvial Diagram.

Data Visualization Design Language 2.0

In 2019, the Brand Experience and Design Group took over ownership of Design Language, with IBM Creative Director Mike Abbink at the helm. The broader scope beyond digital products called for a refresh of Data Visualization Design Language, and Abbink asked us to update our work for a more generalized audience. We took a step back to provide higher-level governance for the creation of materials that could range from business reports to handouts at marketing events.

The project is ongoing. Recently, we've contributed assets to Carbon: a library of javascript templates available to employees from every division.