Design System 2.0

Challenge

After a major redesign initiative, our Design Systems were left partially outdated. Components were deprecated or broken, some were available only in Storybook but missing in the Figma library, and documentation lacked structure and clarity. New nested components and Figma updates caused additional inconsistencies. With developer turnover, designers became the key knowledge carriers, but due to team busyness, maintenance stalled.

Goals

• Clean up and stabilize the Tommy Hilfiger and Calvin Klein Design Systems.

• Ensure consistency across all touchpoints.

• Make components usable and scalable.

• Improve documentation for ease of use and adoption.

• Lay the groundwork for future integration of variables.

Approach

I initiated and led a Design System Enhancement project by creating a Figma DS branch per brand and setting up an Asana roadmap with 6 clear milestones:

1. Hygiene

   Fix broken components, remove deprecated elements, and realign token usage.

2. Usability

   Review and refactor commonly detached components, and add missing patterns.

3. Smarter Components

   Use Figma best practices: booleans, instance swaps, prototyping logic, min/max height.

4. Better Documentation

   Refresh structure, add usage examples, changelogs, and system introduction.

5. Figma Project Clean-up

   Archive old files, organize with tags and thumbnails, ensure up-to-date design files.

6. Variables

   Begin exploration and alignment with dev teams for scalable implementation.

Outcome

This initiative brought clarity and consistency back to the Design System. Teams across both brands regained confidence in using library components. Documentation became the new source of truth, improving onboarding and developer handoff. The scalable foundation now supports new design and feature initiatives globally, while reducing repetitive work and inconsistencies.