Design System Theming Workshop
To support the adoption of a design system within the whitelabel side of our business, I designed and led a workshop to educate my design team on utilizing the system’s theming structure.
2023
Senior Experience Designer
Rocket Travel by Agoda
Challenge
Whitelabel designers were intimidated by the design system’s complexity and direct-to-consumer focus.
Solution
I designed a workshop to demystify the system, provide hands-on practice with color token theming, and create a resource for future reference.
Key Takeaways
This workshop demonstrated my ability to design effective educational initiatives, advocate for system adoption, and foster collaboration across teams to achieve scalable, consistent design solutions.
Hands-on workshops can demystify complex tools and processes, boosting confidence and competence.
Empowering Teams
Advocacy and relationship-building are essential when aligning disparate teams with different priorities.
Building Bridges
Prioritizing contrast and accessibility standards ensured that the work aligned with broader design goals.
Focus on Accessibility
Creating opportunities for collaborative exercises strengthens team cohesion, even in remote settings.
Remote Collaboration
Summary
The workshop aimed to demystify the design system, provide hands-on practice with color token theming, and provide some collaborative fun among a remote team. This initiative not only increased confidence in using the design system but also laid the groundwork for scalability and consistency in our designs.
The goal for the workshop slides was to keep them short, lighthearted, and easy to reference in the future.
The Challenge
The whitelabel side of the business historically did not use the design system built by the direct-to-consumer team. After extensive discussions and alignment across engineering, product, and design, we agreed to adopt this system to achieve scalability and consistency. However, challenges remained:
The design system team, focused on direct-to-consumer needs, had limited understanding of whitelabel requirements and little incentive to expand their system.
Designers on the whitelabel team were intimidated by the system, viewing it as complex and unfamiliar due to limited exposure.
The Approach
Over the course of a year, I built relationships with the design system team to earn credibility and advocate for whitelabel needs. This effort included educating the design system team on whitelabel business requirements, volunteering time to design system efforts, rallying support for design system endeavors, and aligning leadership to prioritize the design system’s expansion for whitelabel use.
Advocacy and Relationship Building
Recognizing the need to empower my design team, I created a workshop focused on color token theming. Key objectives included:
Unpacking the design system’s token architecture.
Providing hands-on practice in a collaborative, low-pressure environment.
Creating documentation for future use.
Designing the Workshop
Workshop Structure
Explained the architecture of internal and external tokens.
Emphasized the importance of contrast relationships for accessibility.
1. Introduction to Color Tokens
Designers created their own color themes, encouraged to experiment while maintaining contrast standards.
Applied their themes to components in a simulated partner setup.
2. Hands-On Practice
Provided written guidelines on creating and applying themes for future reference.
3. Documentation
Results
Provided Designers reported feeling more comfortable and less intimidated by the design system. guidelines on creating and applying themes for future reference.
Increased Confidence
Collaboration
The remote team enjoyed a rare opportunity to all work together on a shared exercise.
The workshop equipped designers with skills and resources to create scalable themes for new partners.
Scalability
The recorded reference ensured long-term usability, even for designers who rarely worked with themes.