Revamping a dated design system
Introduction
My experience at ZOLEO ignited a genuine passion for design systems and the tokenization that powers them. But when both the design system and MyZOLEO project were shelved long term, I watched our carefully crafted token structure become increasingly outdated—some elements growing redundant while others failed to support evolving design needs.
Rather than let this work fade into irrelevance, I saw an opportunity to sharpen my design token expertise while addressing real structural problems. The full design system needed extensive rebuilding to match Figma's rapid evolution, but the token architecture? That was something I could meaningfully improve within my constraints.
This case study explores how I approached modernizing ZOLEO's design token foundation as an independent exercise—demonstrating both my growing specialization in scalable design infrastructure and my commitment to continuous improvement, even beyond formal employment. While I couldn't touch the design system itself, refining the underlying token structure would create maximum impact for any future system overhaul.
My focus
The original design system was built with tunnel vision—every token decision focused exclusively on MyZOLEO as a standalone web application. But midway through development, business priorities shifted dramatically. Leadership wanted to leverage this system across multiple touchpoints: the ZOLEO mobile app, third-party integrations, and future products we hadn't even conceived yet.
The existing token structure couldn't stretch to meet these demands. What worked perfectly for a single web interface became a constraint when applied to diverse platforms with different technical requirements and user contexts.
My goal was to rebuild the token architecture from the ground up with true scalability at its core. This meant designing tokens that could seamlessly adapt across web, mobile, and third-party environments while maintaining visual consistency and reducing maintenance overhead. Instead of product-specific solutions, I aimed to create a flexible foundation that could support ZOLEO's expanding ecosystem—both current products and whatever comes next.
The challenge(s)
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.
Tackling the global tokens
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.
Initial System Context & Limitations
When initially developed, Figma had performance limitations with large file sizes
Design systems were a relatively new concept to the Lead Designer, resulting in a simplified approach
My scheduled system overhaul was postponed due to company arbitration
Though originally built for the MyZOLEO product, the system was intended to scale across their product ecosystem
Foundations
Buttons & Controls
Form
Navigation
Feedback components
Tooltips
Card modules
Page Templates
Chips, badges, Tags
Interactive components
Content molecules
Icons & icon wrapper
Current System Structure
The design system was divided into separate files with no clear hierarchy or inheritance pattern:
Foundations
Buttons & Controls
Form
Navigation
Feedback components
Tooltips
Card modules
Page Templates
Chips, badges, Tags
Interactive components
Content molecules
Icons & icon wrapper
This fragmentation led to maintenance challenges, inconsistent implementation, and difficulty scaling to new products.
Challenge
The system's fragmentation and outdated structure prevented efficient scaling across products and created inconsistencies in the user experience.
My vision
I aimed to develop distinct design principles by clearly differentiating between foundational elements and component libraries, enabling scalability through strategic use of design tokens. By establishing what constitutes the core design system versus product-specific components, I could create a robust foundational file that all other components could inherit from.
Proposed Structure
This restructuring would create a single source of truth for brand consistency while allowing for necessary product-specific adaptations.
Proposed Structure
For Designers: Reduced time creating and maintaining components, with clear pathways for contribution
For Developers: More consistent implementation patterns and reduced technical debt
For Users: A cohesive experience across all ZOLEO products
For the Business: Faster time-to-market for new features and products with maintained quality
Fine-tuning the system and components
By analyzing our design system, I've identified key areas for improvement:
Tokens: We'll optimize color, typography, sizing, and spacing tokens to streamline implementation.
Icon Flexibility: Using tokens and scaling functions will enhance icon versatility.
Button System: We'll adopt a proven button system and adjust it quickly with tokens.
Form Improvements: Leveraging white-label components will resolve past form issues and enable rapid adjustments.
Feedback and Tooltips: We'll evaluate and adjust flexibility through improved tokens.
These improvements will enhance the overall quality and usability of our design system, ensuring a solid foundation for our product.
After the analysis of current tokens, I applied the improved tokens to the components throughout the design system and component library. This implementation ensured a consistent and unified visual language across the entire product, enhancing the overall user experience and simplifying future updates and maintenance.
Sizing and spacing turn into dimensions
In the early stages of using Tokens Studio, we initially specified sizes and spacing as separate tokens. However, this approach introduced unnecessary complexity and maintenance overhead, as it required tracking and managing two distinct token groups.
Sizing
size.fixed.xs
32px
{size.8}
size.fixed.sm
40px
{size.10}
size.fixed.md
48px
{size.12}
size.fill
fill_containter
fill_containter
size.hug
hug_contents
hug_contents
Spacing
paragraphSpacing.default
0
space.between.fixed.xs
4px
{space.fixed.1}
space.between.fixed.sm
8px
{space.fixed.2}
space.between.fixed.xl
40px
{space.fixed.10}
space.between.fill
equal
{space.fill}
Utilizing the dimension token
To enhance efficiency and adaptability, I implemented a Dimension token in Tokens Studio. This versatile token consolidated multiple design properties, including sizing, spacing, border radius, border width, and background blur. By reducing the number of individual tokens, I simplified the design system and minimized potential inconsistencies.
This approach also improved future-proofing. The comprehensive Dimension token allowed for greater flexibility, ensuring that the design system could easily adapt to evolving trends and requirements without significant restructuring.
dimension.token.name.here
1rem
{global.token.1}
Token implementation example
xx.fixed.size.icon.contained.md
1rem
{xx-dimensions.5}
Label
xx = brand
fixed = fixed width or height
size = icon size
contained = location of the icon. Contained inside a component or standalone outside a component.
md = component size (xs, sm, md, etc.)
Enhancing Icon Flexibility and Adaptability
The initial design system, developed in 2022, faced limitations due to the early stages of Figma and its associated tools. To address these constraints, the Lead Designer implemented a creative workaround using multiple icon wrappers. This innovative solution enabled us to maintain design flexibility within the available technology, demonstrating adaptability and problem-solving skills.
iconwrapper.sm
16px
{size.4}
iconwrapper.md
20px
{size.5}
iconwrapper.lg
24px
{size.6}
iconwrapper.xl
32px
{size.8}
iconwrapper.2xl
48px
{size.12}
To overcome the limitations of traditional static icons, I implemented a dynamic system for handling icons within our design system. By collaborating with Sam Gordashko from Tokens Studio, we transformed the formatting of icons to allow for scalable and adaptable usage. This innovative approach ensures that icons maintain their visual integrity and consistency across various sizes and contexts. By optimizing icon handling, I improved the overall flexibility and adaptability of our design system.
Optimizing Icon Wrappers with Token-Based Approach
By digging into the intricacies of design systems and tokens, I optimized the icon wrapper process. Through strategic token application based on icon placement, I reduced the number of required icon wrappers from five to a single, streamlined instance.
For instance, when an icon is situated within a button, I apply the button's logic to the icon, ensuring a cohesive and efficient design. This optimization not only simplified the overall design system but also enhanced its maintainability and scalability, making it easier to manage and adapt to future changes.
Through the strategic implementation of dimension tokens, I successfully reduced the overall number of tokens required in our design system. This streamlined approach not only simplified the system but also significantly improved performance.
By minimizing the number of tokens, I achieved faster load times for both design files and the final product, enhancing the development process and ultimately delivering a better user experience. This optimization showcases my ability to balance design efficiency with end-user satisfaction.
icon-end
height:
density.fixed.size.icon.standalone.md
width:
density.fixed.size.icon.standalone.md
fill:
mode-color.fg.interactive.primary.default
dimension:
density.fixed.size.icon.standalone.sm
Rebuilding Buttons and Interactive Components for Future Compatibility
The existing buttons and interactive components within our design system are currently limited in their functionality and flexibility, primarily designed for web development. To address this and prepare for future expansion into B2B dashboards, Android, iOS, and other products, I propose rebuilding these components.
By rebuilding buttons and icon-buttons, we can ensure their compatibility with a wider range of platforms and devices, enhancing the longevity and adaptability of our design system.
By incorporating a tokenized white-label design system that I contributed to, I was able to rapidly replace the existing buttons in the project. This streamlined process ensured a consistent and cohesive visual language across the entire product.
Button/small
Standalone
Label
Label
Label
Label
Label
Label
Label
Contained
Label
Label
Label
Label
Label
Label
Label
iconButton/small
Standalone
Contained
The next step involves systematically replacing all remaining buttons in the design files with the new, tokenized versions. This will further enhance the product's visual appeal and maintainability.
Addressing Form Issues in the Design System
The forms component in the existing design system has historically been problematic, experiencing frequent breakage due to Figma or component updates. This has resulted in inconsistent formatting and blank displays.
With a deeper understanding of design systems, component building, and tokenization, I am well-positioned to rebuild the forms component. This rebuild will address the existing issues and ensure a more robust and reliable solution.
Rebuilding Forms with White-Label Components
To address the challenges with the existing forms component, I will leverage the same white-label components from the forms set. These components were designed for seamless integration into various systems, particularly when token names align. This plug-and-play approach will expedite the rebuilding process and ensure a more reliable and maintainable solution.
The white-label forms will serve as the base for the rebuilt components. To incorporate company-specific elements, I will utilize a component swap function. This approach will allow for seamless integration of custom components, ensuring a tailored and branded user experience.
Rebuilding the forms component not only addresses current limitations but also positions our design system for future growth. By modernizing the forms, we can ensure that they remain adaptable and scalable, allowing us to easily meet evolving business goals and implement new features without compromising the overall design integrity.
Next Steps for Design System Implementation
Once the design system rework and token application are complete, several key steps remain:
Implement Living Documentation: Transition the design documentation to a living format, allowing for automatic updates based on token changes.
Swap Components: Replace the old components in existing designs with the new, tokenized components.
Establish Maintenance Processes: Develop procedures for ongoing maintenance and periodic evaluations of the design system and component library.
Provide Education and Documentation: Educate stakeholders and developers on the updated design system, token system, and documentation guidelines.
By following these steps, we can ensure a smooth transition to the new design system and establish a sustainable framework for future development.
Analyzing Designs for Component Library Expansion
As part of the design system overhaul, this presents an ideal opportunity to conduct a comprehensive analysis of existing designs. By identifying recurring patterns and elements, we can expand the component library, creating reusable components that can be applied across various projects and platforms.
This proactive approach will not only streamline future design efforts but also ensure that the design system remains adaptable and future-proof, supporting the introduction of B2B solutions, smartphone applications, and other product updates.