ANWB Design System

This is a case study showing how I ensured design consistency through all ANWB apps by translating the new brand guidelines to mobile and creating a unified Design System based on Figma tokens.

My responsibilities

Leadership & Vision

I created frameworks and presentations to evangelised the vision and strategy of the redesign across the company and how it would increase the ROI by reducing legacies and improving performance, attracting younger audience, elevating the brand experience, increasing user satisfaction and reducing development costs.

Planning & Scope Definition

I defined the product with my project manager partners. I evangelised customer goals and balanced business goals.

Design Execution & Validation

I managed the end-to-end design process of the team, working alongside with both internal designers and from external agency, developers and product managers throughout the development lifecycle and ensuring on-time, detailed, and polished deliverables to better adapt Android and iOS devices. 

The challenge

In 2021, the ANWB worked with a brand agency to create new brand guidelines, and applied it to all print material. As the design of the digital platforms soon became outdated, combined with the complaints coming from the development teams regarding the fragmentation of code across the three main mobile apps - Eropuit, Onderweg and Smart Driver - me and the other UX designers saw an opportunity to establish a unified design system across the apps, aiming for a stronger brand experience and younger target audience, more alignment across teams, and more efficiency in new feature development.

The biggest challenge was present the vision to senior stakeholders and product managers, and prove how the redesigns would increase the ROI by:

  • increasing user satisfaction

  • attracting younger audience, which was one of the main business objectives

  • reducing legacy code and future development costs

  • improving performance

  • elevating the brand experience

The implementation strategy and outcomes

I partnered with the UX designers of the other two apps to create a unified Figma design system. Together, we set up a new efficient and sustainable development framework based on design tokens, aligning with both the agency and the web team to translate the brand to digital and, more specifically, native mobile apps.

Sceenshots of the tokens based Figma design system.

After I got product managers and stakeholders of the three teams on board, the second challenge was how to create a strategy to refactor the code and implement the new interface elements based on Figma tokens, without blocking the development of features that were already in the roadmaps.

Each app team took a different path, while me and the UX designers of the other two apps aligned the implementation process between ourselves. In the Eropuit app team, we decided to stop the implementation of new features and focus only on the refactoring of the product, as we agreed as a team that it would bring less double work later on, and would speed up the implementation of new functionalities in the future.

Slides of a presentation I created to communicate ideas and align on roadmaps.

This approach proved to be a success. The team implemented the new library and refactored the code in only two sprints, and we soon started to benefit of all advantages we had predicted:

  • Less legacy and useless code, iOS was now entirely built in SwiftUI

  • New features could be built much faster in both platforms

  • Interface changes could be done by designers directly in the Figma library

  • More consistency in code and interface elements

  • More visual consistency across the three apps

  • All apps looked less outdated and more modern, being in line with the ANWB brand guidelines and other ANWB touch points

The images below show the comparison between the main screens of the Eropuit app before and after the implementation of the new design system.

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.

TNT Design Language

How I led the TNT Design System team, shaping and evolving the TNT design language across all platforms, and helping create a consistent user experience across all touch points.

Client: TNT
Methods: Design System, responsive design, atomic design, workshops.