TNT Unified
Design System
This is a case study showing how I led the TNT Design Language team, shaping and evolving the TNT design language across all platforms, and helping create a consistent user experience across all touch points.
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.
My responsibilities
Leadership
I provided leadership and design direction, influencing across teams and giving detailed, and actionable design feedback. I evangelised the ROI of investing in a consistent design language to decrease time-to-market for internal teams to ship their features, and to improve overall customer equity.
Design System
I created, maintained and scaled a Design Library (Sketch UI Kit) to ensure design consistency.
Design Execution
I collaborated with development teams to implement design components, patterns, and interactions consistently across platforms. I partnered with front-end developers to build an online platform with visual guidelines, style principles, components and interaction patterns used by all designers and (frontend) developers in the company.
Experience Strategy & Vision
I established design standards and guidelines across web, mobile, and desktop platforms, ensuring a consistent user experience for a suite of software products.
Workshops and design reviews
I conducted regular design reviews and design system workshops, communicating design decisions to people in different roles and ensuring adherence to UX standards and best practices.
The challenge
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 touch points.
There was no central place for designers to understand how they should create new components and apply the TNT brand and interaction patterns consistently. The developers also had to create their own style guide and component library, reinforcing inefficiencies and increasing fragmentation and inconsistency.
To address these gaps, I led the team responsible for the TNT Unified Guidelines, and created an online platform collecting visual guidelines, style principles, components and interaction patterns to be used by all designers and (frontend) developers in the company.
The TNT digital products - dotCOM, myTNT, Track&Trace and mobile apps - grew apart from each other in terms of interaction and visual design.
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 standardising 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.
Outcomes
The new TNT Unified Guidelines and Design System proved to be successful. Having listened to the designers and developers in the company, I managed to not only bring consistency and efficiency to their workflows, but also deliver enough value to the business and ensure a consistent user experience across all touch points.
Case studies
ANWB My Account
How I increased product density through cross & upselling by leading the redesign of the My Account environment across the 3 main ANWB apps.
Client: ANWB
Methods: Task analysis, Lo-Fi and Hi-Fi wireframes, prototyping and user testing, visual design.
ANWB Eropuit App
How I increased user satisfaction by optimising the performance of new and existing features in the ANWB Eropuit app.
Client: ANWB
Methods: User survey, competitor analysis, analytics based iterations.
LeasePlan Partner Portal
How I led the UX design for a B2B2C portal, enabling brokers, dealers and franchisees to onboard new customers, configure vehicles and sell lease contracts to SME customers in 30+ countries.
Client: LeasePlan Digital
Methods: User interviews, card sorting analysis, wireframes and mockups, page flows, prototyping, usability testing, design sprint.
FedEx
Recipient Experience
How I improved the recipient experience for 2,2 million engaged users in the US market and other 41 countries by leading the UX design for the iOS and Android apps.
Client: FedEx
Methods: Heuristic evaluation, stakeholder interviews, prototyping and usability testing, visual design.
ANWB Design System
How I ensured design consistency through all ANWB apps by translating the new ANWB brand guidelines to mobile and creating a unified Design System based on Figma tokens.
Client: ANWB
Methods: Design System, rebranding strategy.