L'Occitane en Provence

Shade picker

Context
Creation of the first L'Occitane en Provence makeup range, with a first launch in Japan planned for March 2019.
On this occasion we were able to conceive a shade picker for the new product pages.

▶ Timing

December 2018 - January 2019

▶ Role

Lead UI Designer

▶ Partners in crime

Mathieu Sorin
Developer / Integrator in charge of the project.

1.Research

Regroupement de différents sélectionneur de teintes de rouge à lèvres provenant de sites concurrents.

Benchmark and study of best practices among our competitors. Research for the optimal location on our product page with the complexity of its already quite busy structure, especially in its mobile version.

2.Specification

Vue du fonctionnement du module.

Decision to offer 2 selection choices for the main user cases:
- by the color, for customers new to the range
- by the name of the shade, for customers wishing to retrieve a specific product.

In parallel with this study, research on the accessibility of this functionality, leading to the choice of a drop-down list in addition to the presentation of all the colors available through circle tags.
Discussion with the developer in charge of the project to ensure this accessibility also in the code of the module.

3.Conception

Design of the mockups and their declinations before development.

Sélectionneur de teinte : version desktop, site anglais.

UK website - Ideal version

Sélectionneur de teinte : version desktop, site israélien.

Israeli website - Right to left reading version

Sélectionneur de teinte : version desktop, site japonais.

Japanese website - Busy version

Sélectionneur de teinte : version desktop, site français.

French website - Light version

Sélectionneur de teinte : version desktop, site anglais.

UK website - Ideal version

Sélectionneur de teinte : version desktop, site israélien.

Israeli website - Right to left reading version

Sélectionneur de teinte : version desktop, site japonais.

Japanese website - Busy version

Sélectionneur de teinte : version desktop, site français.

French website - Light version

What's next ?

From a functional point of view the first improvement would be to requalify these colors as product attributes and not different products in order to reload only part of the page when selecting one.

← Previous project Next project →