D3PO, Chatbots, and Visualization Clubs: A Three-Step Solution for Better Data Visualisation at GFK

GFK

Head of Design: Stefanie Haydock
Design Principals: Kate Pearson, Paul McCarthy
Design Systems & Ops: Maxime Amoudruz
Data Visualisation Principal: James Sinclair

My Role 

• Establish standards and cultivate a culture of excellence 
• Elevate the quality and efficiency of work 
• Provide education and training for designers on data analysis and visualisation

Background

The design team at GFK Newron had varying degrees of understanding of data visualisation principles and best practices. The product teams were also dissatisfied with the charts being produced due to inaccuracies in data representation.

Challenges

• Educate a team with varying degrees of proficiency in data visualisation 
• Enable the team to produce precise charts while streamlining the process 
• Address the challenge of selecting the appropriate chart type for each scenario 
• Ensure that all solutions seamlessly integrate with the designers’ workflows 
• Demonstrate tangible results within three months

Approach

Step one was to tackle the issue of producing precise charts that worked with Figma. While plugins were considered, security concerns and the handling of sensitive data made them unsuitable. My solution was to create a tool using D3.js.

• The tool generated charts from data 
• The tool encompassed all chart types currently used on the platform
• A user-friendly data format was provided for designers to easily comprehend 
• Designers could employ data directly downloaded from the platform
• Data security was guaranteed as no data was transmitted outside of GFK’s network 
• The generated chart was configured and imported into Figma
• Consistency, accessibility, and usability
• Integration into the design system using appropriate colours and fonts
• Improved visual design

The tool, D3PO, was operational within a month and continued to evolve as more visualizations were added. The immediate benefits to the team included:

• Reduced chart production time from 10 minutes to 30 seconds
• Establishment of a uniform visual style 
• Significantly improved prototypes that closely resembled reality
• Enhanced quality of research outcomes 
• Minimization of unwanted surprises 

Step two was to develop a chatbot to assist designers in selecting the appropriate chart for each scenario. This involved reviewing static chart pickers and creating a metadata table for all charts, which focused on four overarching characteristics: data type, perceptual accuracy, affordance, and engagement. This was transformed into a decision tree and used to generate a question-and-answer interface. The advantages of this approach included:

• Designers could select the correct chart based on the data and task at hand 
• Increased confidence in their decision-making process 
• Expanded knowledge of different chart types

Step three was to establish a data visualisation club, which was a relaxed, safe, and informal monthly gathering where the team discussed topics, collaborated on visualizations, or introduced new tools. The club provided the following advantages:

• Acquisition of new skills and ideas 
• Collaboration and sharing of work 
• Introduction to new tools and their use

Outcome

Overall, these three steps enabled the team to produce precise charts while streamlining the process and elevating the quality of their work. Additionally, the chatbot and data visualisation club facilitated the education of the team and the cultivation of a culture of learning and exploration.