Le Creuset

Timeless and sensorial

The well-known and much loved brand that is mostly known for their colourful cast iron pots that are used by generations needed a fresh new presentation. We took one step further and did a rebranding in disguise.

Experience Design

Visual Design

Design Systems
Motion Design

2019

The brand was already loved but the presentations of it was lacking that quality and thinking. There were valubale engaging content hidden in the website.

We needed to work on a look that is unique and reflect the true spirit of the brand while connecting it to its customers through the digital screens.

In 2019, Le Creuset went for a change on their ecommerce platform. Their plan was to migrate from Magenta to SalesForce and they approached us for a reskin for the platform.

In the course of the meetings, we agreed on changing the brief and push for a broader perspective. This allowed us to change and elevate the entire ecommerce experience of Le Creuset.

The challenge

A website that reflects the weight of the cast iron pot and quality of the brand’s craft while being memorable with playful interactions.

It’s tough to break barriers when you work with a well established brand. Introducing something very radical could backfire. However, slowly but surely, we succeded on building an entire brand system for the brand.

We crafted a timeless and premium design that speak to customers’ senses. Enriching their experiences by creating signature moments throughout the website.

Approach

We created a robust and flexible design system for a consistent e-commerce experience. With powerful visual assets, we helped LeCreuset redefine their branding on digital screens.

This was the first design system created in Figma in our London office as we were switching from Sketch to Figma. The rules and layouts set here became the benchmark for the future projects.

Design system

Suisse Int’l

For the body copy, labels and main interaction points such as CTA’s we used the Suisse Int’l, a clean, eligible sans serif font family with an equally premium feel.

Lyon Display

The serif font was selected to create a premium look and to reflect the strong heritige of the brand.

Typography

We created a new iconography from scratch that includes a hint from the logo itself. Crafting the pixels to work together with the rest of the brand language in harmony.

Iconography

We put the colour palette to work by defining roles and rules around it. We groupped them to clarify use cases of each colour palette.

Colour Palette

Plain white

FFFFFF

Black

000000

Recipe Almond
EEE4B6 – CDC28E

Editorial Teal
0197AE – 1E4663

Success Green

1FA956

Error Red

D31F3F

Warning Amber

EBC53F

Enamel

F4F2EF

Homepage designed in three states considering, new customers, returning customers and signed in customers. Depending on each state, the content displayed can be tailored to customers interests, browsing history and their purchases, allowing us to push more relatable content.

Homepage

Signed in users can easily view updates on their orders, their favorited items or the events they registered to join.

We designed a card system that can be adjusted for different use cases. The key was to define the specific areas for certain tasks. That helped us to scale the card system for variety of purposes while using a consistent structure.

Card system

Colour swatches for the products are also provided. The gradient represents the casseroles’ unique spray on paint and the reflection is there to represent the glossy finish.

We used an additional colour palette to support product detail page for the iconic cast iron casseroles of Le Creuset. To hand it over, we added accessibility notes as well to help developers choose whether to use dark or light text with each colour.

Additional colours

Landing pages for main categories are also designed with rich content specific to the category. Sub categories are displayed right on the top section for easy navigation. Special promotions and useful information about the selected category are also present.

The definition prototype for desktop shown below displays the early thinking of some of the modules and cards as well. These were updated later in the process.

Category page

We aimed to have the listing page as functional and effortless as possible. Cards are layed out with a clear spacing between and with a proper size to display all vital information while having a good presentation of the product.

Customers can easily get a peek of the details of product through the three dot menu and add the product ot their favorites on desktop.

Listing page

Additional educational content is also displayed in the listing. Giving users valuable information about the care and usage of the products prior to their purchases.

Created a page where Le Creuset products shine. The signature casseroles with their vibrant colour options worth celebrating. So we created an additional colour palette mentioned earlier to create the perfect scene for the products. This was applied to all products with colour options.

Detail page

Along with the colourful introduction of the products, we also focused on highlighting some of the key features in a unique way. Using parallax scrolling effects, we revealeed little surprises for the customers while they explore the products.

© 2021 by Cagri Yurtbasi