TNT Design System

Overview

In only two years, the TNT digital products – dotCOM, myTNT, Track&Trace and mobile apps – grew apart from each other in terms of interaction and visual design, resulting in an inconsistent and fragmented user experience across the different TNT touchpoints. There was no central place for designers to understand how they should create new components and apply consistently the TNT brand and existing interaction patterns. The developers also had to create their own style guide and component library. That created inefficiencies and led to increasing fragmentation and inconsistency. To address these gaps, we built a team responsible for the TNT Unified Guidelines – an online platform with visual guidelines, style principles, components and interaction patterns to be used by all designers and (frontend) developers in the company.

My role

I was the Design Lead for the TNT Design System, responsible for assessing, defining and scaling the TNT design language and creating a consistent and unified user experience across all TNT products. I also delivered and maintained a Design Library (Sketch UI Kit) as an easily accessible and convenient way for designers across the company to implement the guidelines in their designs.

Duration

This project took place between February 2017 and September 2018.

Mapping the fragmentation and downscaling

The first step was create an inventory of the differences across the TNT digital touchpoints (dotCOM, myTNT, Track&Trace, mobile), and assess channel-specific situations and needs. This inventory helped define situations in which the differences among touchpoints should be kept, as well as determine instances that had to be aligned in a way to remove unnecessary differences.

In terms of visual design, there were 85 different colors being used. Even the application of the main brand color was often slightly different than the one defined in the brand guidelines. There were 62 different font sizes, and 41 different button styles. By capturing design and interaction patterns, we could downscale these elements to a color palette of 17 colors and a selection of nine font sizes to create intentional flows, user focus and progressive emphasis. We also could narrow down the 41 different button styles to six, thus simplifying and standardizing the user experience.

Creating an unified TNT Design System

In order to break down the brand guidelines into its basic components and work up towards a unified language, we relied on the Atomic Design Methodology (by Brad Frost). This methodology helped us compare and simplify design elements and bring back consistency.

After redefining the brand values and visual components, I create a Solid UI kit (Sketch file) with building blocks. This kit could be used as a Sketch Library, from which designers could select symbols and create new designs using the same components and interaction patterns, resulting in a unified and easily accessible language.

In collaboration with a frontend developer, we created an online platform for designers and developers, documenting these components and interaction patterns, and providing developers with code snippets in order to bring more efficiency in their workflow, and guarantee consistency.

ATOMS