Tokenised Identity

adidas Confirmed, 2022
Project Overview
As part of the new creative direction, Confirmed went through a visual language evolution, upifting the feeling of exclusiveness and premium-ness; whilst laying the foundations for a new tokenised design language system.
View Impact
Context
Context
The first phase of the redesign was for the most part a visual update, the team saw an opportunity to use design tokens that the design language system team was experimenting on. The tokenised approach would replace hard-coded values (such as hex values for colours or pixel values for spacing), making it easier to maintain a scalable and consistent visual system for UI development. Together with the design language system team, we mapped the values needed, evolving the token structure along the way as we ran into various challenges.

Explorations

Into design tokens
1. Naming conventions
ā€

Design tokens were already being used on adidas web. Initially, the team tried reusing the naming conventions as much as possible to have a standardized and consistent design language system across the organization. After several rounds of iteration, the naming conventions were getting too confusing due to their flexibility. Thus, the team redefined the naming conventions to give them more structure.
2. Shared components

The Confirmed app was sharing some components with the adidas flagship app. As both apps were visually styled differently, tokens came in handy - the same decision token could point to different corresponding tokens for both apps. However, this means alignment across both apps as to which decision token could or should be used while taking into consideration where else the token was potentially used.
3. Partner's Theming
ā€

The Confirmed app collaborates with various partners such as Gucci, Prada, Balenciaga, and many more. To express their brands, many of these partners have a defined theme. An additional consideration when creating these tokens was how the theming would be applied whether it was on a component level or it should be applied on a page level. All of these had further implications on the token mapping.

Impact

The new visual identity was released in May 2022 with design tokens applied, and it has been well-received by consumers, partners, and senior management alike. Additionally, from sprint velocity reports it has helped developers reduce the successful build time by ~10x.

Team, the app looks f**king beautiful. I already feel like I wanna spend more time in there. What a journey to get there and an incredible team effort.
-
Sr.Director, Digital Growth
Amazing to see the switch to black, it looks so much better. A benchmark for a simple change that truly elevates the visuals to new levels.
-
Design Director
Iā€™m enjoying the look and feel of the app. The product really pops against the black, feels like you can see every detail now. Good job!
-
Apple Appstore Review