Data visualisation

TNMT Data Design Language

Background

The Lufthansa Innovation Hub's research platform on travel and mobility tech (tnmt.com) wanted to professionalize their offering further to attract more subscribers and strengthen the brand's reach.

The Impact of the new Design Language

Within 30 days of launching the new infographic, we improved the Newsletter click-through rate on graphics using the new design language by 21.7% compared to graphics still using the old design. Throughout the process, the data team also became more aware of the importance of visual consistency and storytelling through data visualisations, which resulted in a higher level of consistency even when no designer was involved.

‍

My Role

I initiated, led and executed the project end to end, continuously getting input from our data team and our readers. I worked as the only designer on the project together with our Head of Research and Intelligence.

Assessing the current Status

I started auditing at all the data visualisations produced in the last year and also talked to the data team to better understand their pain points when designing visualisation.

looking at the Audit and after talking to a couple of our readers, I identified three main areas that we would guide our efforts for improving the data visualisations

‍

Typography

I started by strictly defining three heading sizes from a typographic scale. Large expressive Headings draw the readers attention, while descriptive headings provide a detailed and analytical overview of the chart.

The typography within the chart needed to be flexible. Simple Charts could use larger font sizes to maximise legibility, whereas visualisations with high information density would use smaller font sizes to accommodate all the information.

Intentionally limiting smaller font sizes ensured charts remained focused and prevented overly complex visualisations.

‍

‍

Format

To achieve a higher degree of consistency, we needed a fixed format that would work well on mobile and desktop. Many of the visualisations had arbitrary Formats ranging from anywhere between 16:9 to 1:2.

Because we were only a small team of four analysts and one designer, we needed one Format that would work well on mobile and desktop and couldn't design the same chart in multiple formats.

When testing the formats within the margins of the website, we quickly decided on either a 4:3 or 1:1 ratio as the other ratios would render the chart illegible on mobile devices.

‍

Testing the Formats across the edge cases for the headings revealed that a 4:3 ratio would result in too little space for the chart area to work with, which is why we ultimately stuck with a 1:1 format.

‍

One concern with the 1:1 Ratio was that it covers the entire screen height on desktop devices. We decided that this was less of an issue than the current readability issues on mobile. However, I  also mocked up a perspective approach, solving the problem by using a text wrap within the text, also making the composition more dynamic.

Spacing & Layout

I started by limiting both the descriptive and the expressive headline to a maximum of two lines per headline. Limiting the headlines would force us to write more precise headings, enabling the reader to understand the context of the graphic more quickly.

All contextual titles that do not correspond to specific data points align to a four-pixel grid with strictly defined white space between them.

The Chart Area itself would be flexible and adjust depending on the length of the headings and subheadings. Any white space between headings remains consistent regardless of the title taking up one or two lines.

‍

Color

Extending the colour palette from the brand colour was particularly challenging. The data team wanted a greater variety of colours and hues, while we knew from our users that they appreciated the level of focus the reduced colour palette gave them.
To give the data team a greater variety on their visualisation while making sure the neon green primary colour is still at the core of the data visualisation, I created two colour palettes:

The divergent palette transitions from the neon green primary colour to the black secondary colour. The single hue colour palette transitions from our neon green primary colour to a dark green colour. Both palettes include seven visually equidistant colours. The seven colours subdivide further for visualisations that require more gradual transitions.

To complement the green colour, I also added an accent colour to highlight specific elements within the chart.

Defining Individual components

I avoided too strictly defined components within the chart to keep the necessary flexibility for diverse data sets. I would only define additional components if we reused them often enough and had visual inconsistencies among them.

Therefore I limited defining individual components to the axis and labels as those were the two elements within the chart area that appeared very frequently and often lacked consistency.

Making it actionable

To ensure the Design language can be easily referenced and applied, I also created visual examples of dos and don'ts based on every aspect of the design language and common mistakes.

Improving the Data Team and Design Workflow

Creating a systematic approach towards data visualisation also served as an opportunity to improve the collaboration with me as the designer and the data analyst. Previously I got a rough data visualisation sketch, that just needed to be beautified. I wanted to improve the process by having a design perspective at an earlier stage, look at the raw data together to find a fitting visualisation and story.

‍

Key Learnings

A little structure can already go a long way in terms of consistency.  Having consistent Heading spacing and logo placement had already a significant impact on the visual consistency of the visualisations, even if the team didn't apply some of the more specific guidelines.

The guidelines on their own would have never been as impactful as improving the collaboration between the data team and design along the way.

While we focused a lot on typographic hierarchy and distinction of colour to improve the chart's legibility we neglected that neon green coloured text has a low contrast ratio. Neon green is the primary brand colour and addressing the contrast ratio of the typography, was out of scope for this project.

‍

‍

‍

‍

‍

‍

‍

‍