Introduction

The ZOLEO design system was built using Tokens via Tokens Studio, ensuring scalability and consistency across all design projects. Originally created by Samantha Gordashko (now at Tokens Studio), I inherited and maintained the system, contributing significantly to the component library and tokenization strategy.

To streamline management and align with the project roadmap, the design system was divided into several files rather than a single large file. Once the product was live, I planned on combining the foundational elements into a singular file to simplify maintenance.

Key Challenges and Goals

When I inherited the ZOLEO design system, it was clear that while the system had a strong foundation, it faced challenges due to its evolving nature and the rapid advancements in design tools like Figma. These challenges included:

• A tight release schedule that delayed essential updates to the system.

• Management’s prioritization of product changes over system improvements, risking the system becoming outdated by the anticipated launch.

• The need to address advancements in Figma’s component management solutions and design tokens.

To tackle these challenges, I proposed a roadmap focused on:

• Modernizing components to leverage new Figma capabilities.

• Keeping tokens up-to-date with product and design needs.

• Establishing regular discussions among stakeholders and internal users to ensure alignment and relevance of the system.

Tokenization

• Refined and expanded token sets to cover multiple themes, states, and use cases.

• Linked tokens to themes for flexibility and scalability, enabling seamless customization across environments.

• Ensured global token updates propagated consistently across components, minimizing manual work and reducing errors.

• Created guidelines and workflows to simplify token management for designers and developers.

Component Library

• Played a key role in defining the structure and hierarchy of components to ensure they were modular, reusable, and scalable.

• Integrated tokens directly into components for consistent application of styles.

• Assisted with the conversion of the component library into Prismic, the headless CMS for ZOLEO’s product. Worked closely with developers to ensure:

  • Components were responsive to content length and device type.

  • Interaction design elements, such as hover states and animations, were correctly implemented.

• Streamlined components for reuse across multiple contexts, improving efficiency and reducing redundancy.

• Continuously iterated on components to align with new design requirements, ensuring the library remained relevant and effective.

Prismic Integration Impact

The integration of Figma components into Prismic enabled developers to convert designs into working products 80% faster than before. This efficiency gain became evident when developers, who had previously been behind schedule, began catching up with me as the designer, who had been working ahead of schedule. This accelerated development timeline allowed the team to shift focus to other critical tasks, improving overall project delivery.

Proposed Roadmap for System Improvements

Recognizing the risks of obsolescence, I worked with management to propose a roadmap aimed at improving the system foundations, updating tokens, and rebuilding components to reflect the latest iterations in Figma. Key highlights included:

• Refining the foundational elements of the design system to ensure scalability and usability.

• Incorporating internal feedback from designers and developers to address real-world challenges.

• Establishing a process for iterative updates to keep the system aligned with evolving standards.

Leadership and Advocacy

As part of my role, I led multiple presentations to stakeholders and internal teams, showcasing the progression of the design system, the implementation of design tokens, and their functionality. These sessions not only provided clarity but also aligned all stakeholders on the value and application of the design system.

When the project shifted to a no-spend budget due to arbitration, requiring the cancellation of the Tokens Studio subscription, I stepped in to document an interim solution. This ensured the team could still make essential updates to the tokens without disrupting the workflow. My proactive approach maintained system functionality during a period of constrained resources.

Biggest Contribution

My biggest contribution to the ZOLEO design system would have been refining its foundations and component library, followed by rebuilding components to reflect the latest iteration of Figma. This included integrating feedback from end-users, such as designers and developers, and ensuring the system remained adaptable, functional, and efficient for all stakeholders.