Tokenized Design System
Tokenized Design System
Tokenized Design System
Tokenized Design System
This case study showcases the creation of a custom design system for myCWT, a global business travel booking platform. Through refined processes, and establishing solid foundations using design tokens, we achieved significant cost savings and boosted designer productivity.
This case study showcases the creation of a custom design system for myCWT, a global business travel booking platform. Through refined processes, and establishing solid foundations using design tokens, we achieved significant cost savings and boosted designer productivity.
This case study showcases the creation of a custom design system for myCWT, a global business travel booking platform. Through refined processes, and establishing solid foundations using design tokens, we achieved significant cost savings and boosted designer productivity.
This case study showcases the creation of a custom design system for myCWT, a global business travel booking platform. Through refined processes, and establishing solid foundations using design tokens, we achieved significant cost savings and boosted designer productivity.
Type
Case Study
Timeframe
5 months
Toolkit
Figma, Tokens Studio
Year
2022-2023
Type
Case Study
Timeframe
5 months
Toolkit
Figma, Tokens Studio
Year
2022-2023
Type
Case Study
Timeframe
1.5 years
Toolkit
Figma, Tokens Studio
Year
2022-2023
Type
Case Study
Timeframe
5 months
Toolkit
Figma, Tokens Studio
Year
2022-2023
Problem
After transitioning from Sketch to a Figma-based shared library in early 2022, we realized the need to enhance the overall adoption of our design system and our design system process within the UX Team. We first hired external company to recreate our shared library in Figma. When they completed the library, we faced the following struggles within the design team: Inefficiency and speed: Our existing shared library's lack of intuitiveness and completeness slowed down the design process. Designers frequently created new component versions outside the system, which could have been more efficient for adding or requesting new components. Maintenance and Scalability: The long-term sustainability and scalability of the design system are at risk. It is expensive to rely on external design resources. Design system responsibility falls mostly on one in-house designer. Inconsistent Accessibility: Inconsistent accessibility practices occurred during the design handoff. Insufficient tools and resources allowed UX designers to test and implement accessibility features effectively. The grid system was not optimized for accessibility. Text styles and sizes were only conducive to readability for some users. The primary color-to-text ratio on buttons was non-compliant. Collaboration Challenges: Poor communication hindered collaboration and engagement within the UX team, as well as confusion about the status of the design system and uncertainty about remaining tasks and contribution methods.
Solution
Our journey began with a collective effort, gathering team feedback and studying other leading design systems. We meticulously reviewed the existing shared library, identifying areas that needed enhancement. Our focus was on strategies to improve the Figma-based shared library's usability and explore new ways to complete and maintain it internally. This was a team effort, and we devised a multi-faceted approach together: Foundations as a source of truth: Foundations serve as the definitive reference in design systems, offering a comprehensive framework encompassing principles and guidelines applicable across all platforms. By implementing semantic naming conventions and embedding design tokens within Figma, we have streamlined the design process, enhancing the discoverability of foundational elements. Design Hierarchy: Our design hierarchy is not just a roadmap. It's a powerful tool that guides us through the complexity of our design system, making it easier for us to navigate and understand. We adhere to atomic design principles to ensure clear and efficient navigation. We introduce semantic naming and design token structures to help speed up design decisions. We reorganized the Figma shared library into smaller, more manageable segments, empowering us with a more efficient and user-friendly system. Integrating Accessibility: We are holding monthly collaborative meetings on accessibility, incorporating testing tools like Axe and Stark for UX designers, and transitioning to a 4px base grid for consistent, user-friendly layouts. We are also implementing t-shirt sizing (sm, md, lg, etc.) for responsive device design and using sentence-case UI text to improve user readability. Cultivating Collaboration: We implemented dedicated communication channels such as Slack and email, conducted regular update meetings to enhance engagement, and utilized a Kanban board to improve teamwork within the design team.
Problem
After transitioning from Sketch to a Figma-based shared library in early 2022, we realized the need to enhance the overall adoption of our design system and our design system process within the UX Team. We first hired external company to recreate our shared library in Figma. When they completed the library, we faced the following struggles within the design team: Inefficiency and speed: Our existing shared library's lack of intuitiveness and completeness slowed down the design process. Designers frequently created new component versions outside the system, which could have been more efficient for adding or requesting new components. Maintenance and Scalability: The long-term sustainability and scalability of the design system are at risk. It is expensive to rely on external design resources. Design system responsibility falls mostly on one in-house designer. Inconsistent Accessibility: Inconsistent accessibility practices occurred during the design handoff. Insufficient tools and resources allowed UX designers to test and implement accessibility features effectively. The grid system was not optimized for accessibility. Text styles and sizes were only conducive to readability for some users. The primary color-to-text ratio on buttons was non-compliant. Collaboration Challenges: Poor communication hindered collaboration and engagement within the UX team, as well as confusion about the status of the design system and uncertainty about remaining tasks and contribution methods.
Solution
Our journey began with a collective effort, gathering team feedback and studying other leading design systems. We meticulously reviewed the existing shared library, identifying areas that needed enhancement. Our focus was on strategies to improve the Figma-based shared library's usability and explore new ways to complete and maintain it internally. This was a team effort, and we devised a multi-faceted approach together: Foundations as a source of truth: Foundations serve as the definitive reference in design systems, offering a comprehensive framework encompassing principles and guidelines applicable across all platforms. By implementing semantic naming conventions and embedding design tokens within Figma, we have streamlined the design process, enhancing the discoverability of foundational elements. Design Hierarchy: Our design hierarchy is not just a roadmap. It's a powerful tool that guides us through the complexity of our design system, making it easier for us to navigate and understand. We adhere to atomic design principles to ensure clear and efficient navigation. We introduce semantic naming and design token structures to help speed up design decisions. We reorganized the Figma shared library into smaller, more manageable segments, empowering us with a more efficient and user-friendly system. Integrating Accessibility: We are holding monthly collaborative meetings on accessibility, incorporating testing tools like Axe and Stark for UX designers, and transitioning to a 4px base grid for consistent, user-friendly layouts. We are also implementing t-shirt sizing (sm, md, lg, etc.) for responsive device design and using sentence-case UI text to improve user readability. Cultivating Collaboration: We implemented dedicated communication channels such as Slack and email, conducted regular update meetings to enhance engagement, and utilized a Kanban board to improve teamwork within the design team.
Problem
After transitioning from Sketch to a Figma-based shared library in early 2022, we realized the need to enhance the overall adoption of our design system and our design system process within the UX Team. We first hired external company to recreate our shared library in Figma. When they completed the library, we faced the following struggles within the design team: Inefficiency and speed: Our existing shared library's lack of intuitiveness and completeness slowed down the design process. Designers frequently created new component versions outside the system, which could have been more efficient for adding or requesting new components. Maintenance and Scalability: The long-term sustainability and scalability of the design system are at risk. It is expensive to rely on external design resources. Design system responsibility falls mostly on one in-house designer. Inconsistent Accessibility: Inconsistent accessibility practices occurred during the design handoff. Insufficient tools and resources allowed UX designers to test and implement accessibility features effectively. The grid system was not optimized for accessibility. Text styles and sizes were only conducive to readability for some users. The primary color-to-text ratio on buttons was non-compliant. Collaboration Challenges: Poor communication hindered collaboration and engagement within the UX team, as well as confusion about the status of the design system and uncertainty about remaining tasks and contribution methods.
Solution
Our journey began with a collective effort, gathering team feedback and studying other leading design systems. We meticulously reviewed the existing shared library, identifying areas that needed enhancement. Our focus was on strategies to improve the Figma-based shared library's usability and explore new ways to complete and maintain it internally. This was a team effort, and we devised a multi-faceted approach together: Foundations as a source of truth: Foundations serve as the definitive reference in design systems, offering a comprehensive framework encompassing principles and guidelines applicable across all platforms. By implementing semantic naming conventions and embedding design tokens within Figma, we have streamlined the design process, enhancing the discoverability of foundational elements. Design Hierarchy: Our design hierarchy is not just a roadmap. It's a powerful tool that guides us through the complexity of our design system, making it easier for us to navigate and understand. We adhere to atomic design principles to ensure clear and efficient navigation. We introduce semantic naming and design token structures to help speed up design decisions. We reorganized the Figma shared library into smaller, more manageable segments, empowering us with a more efficient and user-friendly system. Integrating Accessibility: We are holding monthly collaborative meetings on accessibility, incorporating testing tools like Axe and Stark for UX designers, and transitioning to a 4px base grid for consistent, user-friendly layouts. We are also implementing t-shirt sizing (sm, md, lg, etc.) for responsive device design and using sentence-case UI text to improve user readability. Cultivating Collaboration: We implemented dedicated communication channels such as Slack and email, conducted regular update meetings to enhance engagement, and utilized a Kanban board to improve teamwork within the design team.
Problem
After transitioning from Sketch to a Figma-based shared library in early 2022, we realized the need to enhance the overall adoption of our design system and our design system process within the UX Team. We first hired external company to recreate our shared library in Figma. When they completed the library, we faced the following struggles within the design team: Inefficiency and speed: Our existing shared library's lack of intuitiveness and completeness slowed down the design process. Designers frequently created new component versions outside the system, which could have been more efficient for adding or requesting new components. Maintenance and Scalability: The long-term sustainability and scalability of the design system are at risk. It is expensive to rely on external design resources. Design system responsibility falls mostly on one in-house designer. Inconsistent Accessibility: Inconsistent accessibility practices occurred during the design handoff. Insufficient tools and resources allowed UX designers to test and implement accessibility features effectively. The grid system was not optimized for accessibility. Text styles and sizes were only conducive to readability for some users. The primary color-to-text ratio on buttons was non-compliant. Collaboration Challenges: Poor communication hindered collaboration and engagement within the UX team, as well as confusion about the status of the design system and uncertainty about remaining tasks and contribution methods.
Solution
Our journey began with a collective effort, gathering team feedback and studying other leading design systems. We meticulously reviewed the existing shared library, identifying areas that needed enhancement. Our focus was on strategies to improve the Figma-based shared library's usability and explore new ways to complete and maintain it internally. This was a team effort, and we devised a multi-faceted approach together: Foundations as a source of truth: Foundations serve as the definitive reference in design systems, offering a comprehensive framework encompassing principles and guidelines applicable across all platforms. By implementing semantic naming conventions and embedding design tokens within Figma, we have streamlined the design process, enhancing the discoverability of foundational elements. Design Hierarchy: Our design hierarchy is not just a roadmap. It's a powerful tool that guides us through the complexity of our design system, making it easier for us to navigate and understand. We adhere to atomic design principles to ensure clear and efficient navigation. We introduce semantic naming and design token structures to help speed up design decisions. We reorganized the Figma shared library into smaller, more manageable segments, empowering us with a more efficient and user-friendly system. Integrating Accessibility: We are holding monthly collaborative meetings on accessibility, incorporating testing tools like Axe and Stark for UX designers, and transitioning to a 4px base grid for consistent, user-friendly layouts. We are also implementing t-shirt sizing (sm, md, lg, etc.) for responsive device design and using sentence-case UI text to improve user readability. Cultivating Collaboration: We implemented dedicated communication channels such as Slack and email, conducted regular update meetings to enhance engagement, and utilized a Kanban board to improve teamwork within the design team.
This design system is key to enabling us to do our best work.
The updated Figma design system has significantly boosted the efficiency and collaboration of the UX team. The design process and strategic decisions have yielded numerous benefits for the team and the overall project, effectively establishing a strong foundation for our robust design system by focusing on critical aspects such as cost savings, efficiency, accessibility, and collaboration.
1 min read
This design system is key to enabling us to do our best work.
The updated Figma design system has significantly boosted the efficiency and collaboration of the UX team. The design process and strategic decisions have yielded numerous benefits for the team and the overall project, effectively establishing a strong foundation for our robust design system by focusing on critical aspects such as cost savings, efficiency, accessibility, and collaboration.
1 min read
This design system is key to enabling us to do our best work.
The updated Figma design system has significantly boosted the efficiency and collaboration of the UX team. The design process and strategic decisions have yielded numerous benefits for the team and the overall project, effectively establishing a strong foundation for our robust design system by focusing on critical aspects such as cost savings, efficiency, accessibility, and collaboration.
1 min read
This design system is key to enabling us to do our best work.
The updated Figma design system has significantly boosted the efficiency and collaboration of the UX team. The design process and strategic decisions have yielded numerous benefits for the team and the overall project, effectively establishing a strong foundation for our robust design system by focusing on critical aspects such as cost savings, efficiency, accessibility, and collaboration.
1 min read
