Calvin Klein & Tommy Hilfiger

Transforming how digital design is done at two of the world's most recognized clothing brands.

Overview

PVH is the parent company of Calvin Klein and Tommy Hilfiger. They wanted to standardize their e-commerce platform across all brands and geographies using Salesforce Commerce Cloud, which included building a scalable and multi-brand design system and applying it to the brands' websites. My main responsibility was to create and build the design system. I created the tokens and set up the design-developement handoff process first, then built the components and other brand templates for other designers.

Highlights

Launched Calvin Klein and Tommy Hilfiger online stores in North America along with the design system in place to roll out globally.

Process

The project started with Calvin Klein (CK) first. The intention was to demonstrate how useful a design system can be so that PVH (the parent company) would invest in improving on such system by extending it to Tommy Hilfiger (TH), other brands and other geographies. Once that was completed, the process to have Tommy Hilfiger adopt the same design system was straightforward:

Token values were adjusted directly in JSON to match TH color palette.
Components and Pages were cloned and moved to TH workspace.
TH tokens were applied to Components and Pages (reusing CK components and templates while overriding styles).
Refining styles in components and pages to account for brand differences.

Tokens & Components

Tokens and components were documented in two files:

Foundations file showed all design tokens, which themselves were stored on GitHub plugin and accessible by all designers on Figma Tokens plugin.

Page Templates

Calvin Klein pages (e.g. Product Details Page) were made into a template that can be easily reused for Tommy Hilfiger and any other brands.

Each Page Template had different properties that can be controlled by the designer to create all the different permutations of a page.

Impact

150+

Components Delivered

4

E-commerce Sites Shipped

$1M

Estimated Savings

1

Designer Needed for DS Governance

Future Improvements

Moving design system documentation to Storybook and other platforms such as Zeroheight or Supernova.
Integration with Figma Variables to augment Figma Tokens (renamed Token Studio) workflow.
Considering a master Figma file where edits can be published to any brand.