Redesigning with design tokens
Redesigning with design tokens
As part of the new creative direction, Confirmed went through a visual language evolution, bringing more exclusiveness to the app by introducing Identity 2.0 (dark mode) - whilst laying the foundations for a new tokenised design language system.
As part of the new creative direction, Confirmed went through a visual language evolution, bringing more exclusiveness to the app by introducing Identity 2.0 (dark mode) - whilst laying the foundations for a new tokenised design language system.
Client
adidas
Year
2021
Category
design system
Explorations (into design tokens)
Explorations (into tokens)
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.
1. Naming conventions
Tokens were already being used on adidas web. Initally, we tried reusing as much as the naming conventions that they have implemented. After several rounds of iterations, the naming conventions were getting confusing as it was too flexible. Thus, we had to define and give the naming conventions a bit more structure.
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.
1. Naming conventions
Tokens were already being used on adidas web. Initally, we tried reusing as much as the naming conventions that they have implemented. After several rounds of iterations, the naming conventions were getting confusing as it was too flexible. Thus, we had to define and give the naming conventions a bit more structure.
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.
1. Naming conventions
Tokens were already being used on adidas web. Initally, we tried reusing as much as the naming conventions that they have implemented. After several rounds of iterations, the naming conventions were getting confusing as it was too flexible. Thus, we had to define and give the naming conventions a bit more structure.
2. Shared components
Confirmed was sharing some components with the adidas 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 meant alignment as to which decision token could or should be used, while taking into considerations where else the token was potentially used.
2. Shared components
Confirmed was sharing some components with the adidas 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 meant alignment as to which decision token could or should be used, while taking into considerations where else the token was potentially used.
2. Shared components
Confirmed was sharing some components with the adidas 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 meant alignment as to which decision token could or should be used, while taking into considerations where else the token was potentially used.
3. Partner's Theming
Confirmed collaborates with various partners (e.g. Gucci, Prada, Balenciaga, Yeezy, etc.). To express their individual brands, many of these partners have a defined theme. An additional consideration was whether the token could be applied on a component level or it had to be applied on a page level. All of these had further implications on the token mapping.
3. Partner's Theming
Confirmed collaborates with various partners (e.g. Gucci, Prada, Balenciaga, Yeezy, etc.). To express their individual brands, many of these partners have a defined theme. An additional consideration was whether the token could be applied on a component level or it had to be applied on a page level. All of these had further implications on the token mapping.
3. Partner's Theming
Confirmed collaborates with various partners (e.g. Gucci, Prada, Balenciaga, Yeezy, etc.). To express their individual brands, many of these partners have a defined theme. An additional consideration was whether the token could be applied on a component level or it had to be applied on a page level. All of these had further implications on the token mapping.
Outcome
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..
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..
Outcome
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..
More Works More Works
stepping into sneaker culture
Research - Diary Study
2023
2023
stepping into sneaker culture
Research - Diary Study
2023
2023
stepping into sneaker culture
Research - Diary Study
2023
2023
stepping into sneaker culture
Research - Diary Study
2023
2023
gucci x adidas
Feature Design
2022
2022
gucci x adidas
Feature Design
2022
2022
gucci x adidas
Feature Design
2022
2022
gucci x adidas
Feature Design
2022
2022
2024 Michelle gross
Go Back To Top
2024 Michelle gross
Go Back To Top
2024 Michelle gross
Go Back To Top
2024 Michelle gross
Go Back To Top
