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.