Autodesk, Design System Training

Context

All designers come from different backgrounds and begin with differing levels of experience with design systems. This project introduces a standardized design system onboarding process. The training was given out to all current designers at the time, and is given to all new hires moving forward. The training covers the background and basics of how to use the design system and equips users of the training with the necessary skills to effectively utilize the design system in their projects. This includes some topics such as how connected libraries work, what tokens are and how they are used, what variants are and how to customize a few commonly used components to get the appropriate variant you want, and more.

I led this project from its inception to delivery. I created the tasks to be done and timeline for those tasks and the project, created the training materials and graphics, made how-to videos, set up the knowledge base, created practice challenges, conducted the synchronous trainings with live demos on key topics, and continue to deliver the training to new designers in cohorts. During the course of the project, I sought feedback from various subject matter experts, including our "expert" users of the design system from the experience design and delivery teams, and then feedback from leadership and management.

Delivery and format

The training is organized into 4 steps with 4 quests and accompanying live demos.

The training is delivered synchronously to cohorts of designers via Zoom, with the content provided in Figma file format. To enhance the learning experience, I created a comprehensive knowledge base with links to resources and videos that break down complex topics. These resources include step-by-step instructions and accompanying demos on customizing the table component, switching themes from light to dark, working with slots, and other advanced techniques. The main Figma file for the training is structured in the following way:

🚀 Step 1: Getting started

🏔️ Step 2: Quests (covering background, core libraries, foundational elements, components)

✏️ Step 3: Practice space

🃏 Step 4: Name card

During the synchronous training sessions, live demos are conducted, allowing participants to follow along and practice the exercises. Examples of these demos include setting up Figma libraries, importing components and assets, customizing components to achieve desired variants, working with grids and styles, transitioning between light and dark themes, customizing more complex components like tables, and exploring form elements to create form patterns.

To ensure the training was tailored to the needs of current designers, a survey was initially sent to gauge their comfort levels with using the design system. This information helped in structuring the training into manageable segments.

To make the training more engaging and interactive, I incorporated game-like elements. This included using words, themes, and graphics such as “quests” and rewards for completing each quest. To enhance the game theme, I created 8-bit graphics.

Overall, this approach aimed to provide an immersive and enjoyable learning experience while equipping designers with the necessary skills to effectively utilize the design system.

Context

All designers come from different backgrounds and begin with differing levels of experience with design systems. This project introduces a standardized design system onboarding process. The training was given out to all current designers at the time, and is given to all new hires moving forward. The training covers the background and basics of how to use the design system and equips users of the training with the necessary skills to effectively utilize the design system in their projects. This includes some topics such as how connected libraries work, what tokens are and how they are used, what variants are and how to customize a few commonly used components to get the appropriate variant you want, and more.

I led this project from its inception to delivery. I created the tasks to be done and timeline for those tasks and the project, created the training materials and graphics, made how-to videos, set up the knowledge base, created practice challenges, conducted the synchronous trainings with live demos on key topics, and continue to deliver the training to new designers in cohorts. During the course of the project, I sought feedback from various subject matter experts, including our "expert" users of the design system from the experience design and delivery teams, and then feedback from leadership and management.

Delivery and format

The training is organized into 4 steps with 4 quests and accompanying live demos.

The training is delivered synchronously to cohorts of designers via Zoom, with the content provided in Figma file format. To enhance the learning experience, I created a comprehensive knowledge base with links to resources and videos that break down complex topics. These resources include step-by-step instructions and accompanying demos on customizing the table component, switching themes from light to dark, working with slots, and other advanced techniques. The main Figma file for the training is structured in the following way:

🚀 Step 1: Getting started

🏔️ Step 2: Quests (covering background, core libraries, foundational elements, components)

✏️ Step 3: Practice space

🃏 Step 4: Name card

During the synchronous training sessions, live demos are conducted, allowing participants to follow along and practice the exercises. Examples of these demos include setting up Figma libraries, importing components and assets, customizing components to achieve desired variants, working with grids and styles, transitioning between light and dark themes, customizing more complex components like tables, and exploring form elements to create form patterns.

To ensure the training was tailored to the needs of current designers, a survey was initially sent to gauge their comfort levels with using the design system. This information helped in structuring the training into manageable segments.

To make the training more engaging and interactive, I incorporated game-like elements. This included using words, themes, and graphics such as “quests” and rewards for completing each quest. To enhance the game theme, I created 8-bit graphics.

Overall, this approach aimed to provide an immersive and enjoyable learning experience while equipping designers with the necessary skills to effectively utilize the design system.

Context

All designers come from different backgrounds and begin with differing levels of experience with design systems. This project introduces a standardized design system onboarding process. The training was given out to all current designers at the time, and is given to all new hires moving forward. The training covers the background and basics of how to use the design system and equips users of the training with the necessary skills to effectively utilize the design system in their projects. This includes some topics such as how connected libraries work, what tokens are and how they are used, what variants are and how to customize a few commonly used components to get the appropriate variant you want, and more.

I led this project from its inception to delivery. I created the tasks to be done and timeline for those tasks and the project, created the training materials and graphics, made how-to videos, set up the knowledge base, created practice challenges, conducted the synchronous trainings with live demos on key topics, and continue to deliver the training to new designers in cohorts. During the course of the project, I sought feedback from various subject matter experts, including our "expert" users of the design system from the experience design and delivery teams, and then feedback from leadership and management.

Delivery and format

The training is organized into 4 steps with 4 quests and accompanying live demos.

The training is delivered synchronously to cohorts of designers via Zoom, with the content provided in Figma file format. To enhance the learning experience, I created a comprehensive knowledge base with links to resources and videos that break down complex topics. These resources include step-by-step instructions and accompanying demos on customizing the table component, switching themes from light to dark, working with slots, and other advanced techniques. The main Figma file for the training is structured in the following way:

🚀 Step 1: Getting started

🏔️ Step 2: Quests (covering background, core libraries, foundational elements, components)

✏️ Step 3: Practice space

🃏 Step 4: Name card

During the synchronous training sessions, live demos are conducted, allowing participants to follow along and practice the exercises. Examples of these demos include setting up Figma libraries, importing components and assets, customizing components to achieve desired variants, working with grids and styles, transitioning between light and dark themes, customizing more complex components like tables, and exploring form elements to create form patterns.

To ensure the training was tailored to the needs of current designers, a survey was initially sent to gauge their comfort levels with using the design system. This information helped in structuring the training into manageable segments.

To make the training more engaging and interactive, I incorporated game-like elements. This included using words, themes, and graphics such as “quests” and rewards for completing each quest. To enhance the game theme, I created 8-bit graphics.

Overall, this approach aimed to provide an immersive and enjoyable learning experience while equipping designers with the necessary skills to effectively utilize the design system.