This portfolio is under construction. I developed it from scratch with HTML, CSS, and JS.
Product Design

How might we simplify
the traceability experience for Clarins

While beauty starts with transparency, simplicity build trust.

Card of product Double Serum Foundation with batch code 0548112
Card of product Lip Perfector Intense with batch code 0544062
Card of product Extra-Firming Energy with batch code 0548112
Card of product Total Eye Lift with batch code 0548112
Card of product Total Eye Revive with batch code 0548112
Card of product Double Serum Foundation with batch code 0548112
Card of product Lip Perfector Intense with batch code 0544062
Card of product Extra-Firming Energy with batch code 0548112
Card of product Total Eye Lift with batch code 0548112
Card of product Total Eye Revive with batch code 0548112

Overview

This project focuses on the redesign of the platform, shifting the focus from storytelling to operational transparency.

The goal is to provide a tool that allows users to verify the production date and preservation window of the products.

Objectives

Limit the number of steps required for a user to find the production date of a product.

Use a clean interface to convey precision and reliability.

Design a search experience without friction for batch codes that reduces user cognitive load.

Engineering the invisible

As a creative engineer, I didn't just design static screens. I built a functional prototype using HTML, CSS and JS to provide a traceability platform you can test from now.

  • • Performance
  • • Accessibility
  • • Motion Design
  • • Responsiveness
Experience the flow
Copy the batch code to test the validation and the persistent history feature.
Clarins traceability platform on iPhone
Clarins traceability platform on iPhone
Clarins traceability platform on iPhone
Clarins traceability platform on iPhone

Challenge

How to translate an emotional customer journey into a reliable and seamless experience without overwhelming the user?

Role

Wireframing and prototyping (Figma) and web development.

Goal

Increase trust through a seamless, mobile-first traceability interface focusing on usability and simplicity.

Simplicity is the new luxury

Friction

Most traceability tools are too technical. The safety and efficacy of the products is a priority for Clarins. To build trust, the customers need to feel that Clarins values the time they spend looking for a production date.

Solution

A light web application with a simple interface and cards that are easy to scan. Using smooth interactions (Framer Motion) to simply find the information that matter to users.