Context

Ecommerce platform on Salesforce Commerce Cloud.

Publicis.Sapient is engaged with PVH to build an ecommerce platform on Salesforce Commerce Cloud with a main focus on Calvin Klein.

Process

Atomic Design System.

Owned the design system by building, maintaining, and updating the token-based Design Systems for Calvin Klein. My role included ensuring consistency and scalability across all platforms through the use of Design Tokens. I also provided training and support to designers and developers on using the Design System and Design Tokens. In addition, I collaborated with cross-functional teams to ensure the Design System aligns with business and customer needs.

I was tasked with ensuring consistency across all pages on the Calvin Klein website. To accomplish this, I followed best-in-class Design Systems processes and used the Atomic Design System methodology as my mental model. This approach allowed me to break down the website design into its smallest building blocks (atoms), and gradually build up the more complex elements (molecules, organisms, templates, and pages). This allowed me to create a cohesive design system that could be easily referenced and updated as needed.

Solution

Saved Time and Effort with Templates for Consistent Updates.

As part of this process, I designed templates for four key pages: Product List Page, Product Detail Page, My Account, and Cart. Each template followed the established guidelines and design principles of the Atomic Design System methodology. For example, the Product List Page template was based on a pre-defined set of molecules and organisms, such as the product image and the product attributes, which were built up from atoms like buttons, icons, images, and product messages. This ensured that the page was consistent in terms of layout and visual style.

The templates I created were not just visual design assets, but they were also functional. This means that the templates had the necessary proprieties to make them fully functional and responsive with a pre-defined list of options to turn on/off. As a result, the design team could easily work on in their stories using templates without having to worry about the design details like spacing, colors or any other visual element.

Calvin Klein Ecommerce Website Redesign
Calvin Klein Ecommerce Website Redesign
Calvin Klein Ecommerce Website Redesign
Calvin Klein Ecommerce Website Redesign
Are you ready?

Let's make something
great together!