L'Occitane en Provence

Add to bag process

Context
As part of a global project to continuously improve the product page, and following a series of tests, several issues have been identified on its mobile version :
- the addition of a sticky add to cart button containing the price of the product in mobile version.
- the revision of the add to cart path for fluidifying and clarifying.

▶ Timing

May 2019 - June 2019

▶ Role

Lead UI Designer

▶ Partners in crime

Squad Shopping Experience
Agile team in charge of the user experience except for the cart.

Sticky CTA

1.Existing's analysis

Vue d'un tableau de recensement.

Census of all prices/currencies and buttons labels ("Add to cart" and "See my cart") to identify the different possible lengths.

2.Conception

Présentation de 3 exemples de bannière sticky d'ajout au panier.

Design of the mockups and their declinations.

Add to bag banner

1.Existing's analysis

Présentation de la bannière avant le projet.

Identification of the UI problems from the current banner: destabilizing hierarchy between the elements, misunderstanding of the action made, lack of information,...

2.Conception

Présentation avant/après de la popin.

Design of a first mock-up:
- Addition of a validation message.
- Display of the Cart Total (Subtotal).
- Clearer contrast between the pop-in and the product page.

Design of the mockups and their declinations.

Maximum quantity.

Long text.

Right to left reading direction.

Delivery informations.

Routine purchase - Before

Routine purchase - After

← Previous project Next project →