Clarins.com - Sample Overlay UX/UI Redesign
In 2022, I joined the Global UX team of prestige beauty brand Clarins. I oversaw the product delivery of our new Sample Overlay. What is it? Customers can get free product samples with every order on Clarins.com. In the cart page, users can trigger an overlay that lets them choose their free samples before checking out. In February 2023, we rolled out the new UX/UI of the Sample Overlay across 30+ countries. We addressed the user experience issues to make it easier for users to browse, filter and select their free samples.
Check out the Before & After video and let me know your thoughts.
Here is what the Sample Overlay looked like before the UX/UI redesign.
Users were confused by the two dropdown menus and had trouble browsing through our catalogue of product samples.
We simplified the overall user experience:
* with simplified product categories (2 tabs with one for Skincare and the other for Makeup).
* with product filters instead of the secondary dropdown to allow users to select multiple product types to narrow their search.
* with a flippable product tile that allows users to read the sample product description easily.
* with a clickable product tile so that users can click on the sample product image or CTA button to add or remove the sample from their selection.
* with a sleek product summary section from which users can amend their selected samples.
