Nacre

(01) Brief

Le point de départ.

Contexte

Nacre vendait surtout par le bouche-à-oreille et un thème e-commerce standard qui la faisait ressembler à cent autres marques « clean ». Le panier moyen stagnait à un produit, alors que la promesse de la marque est justement une routine courte et complète.

Objectif

Faire comprendre en un écran qu’on achète une routine de trois ou quatre gestes, pas un flacon de plus : montrer ce qu’il y a dedans, la texture, le prix, et pousser vers le diagnostic qui compose la routine.

Public

Des femmes et des hommes de 28 à 45 ans, lassés des routines à sept étapes, qui lisent les listes INCI et veulent comprendre un dosage avant d’acheter.

Contraintes

• Aucune promesse médicale ni avant/après : la réglementation cosmétique et la crédibilité de la fondatrice l’interdisent
• Actifs nommés avec leur pourcentage réel, sans jargon
• Fiche produit achetable depuis l’accueil, sur mobile, d’une main
• Photographie existante limitée : une séance studio et des packshots sur fond blanc

(02) Direction artistique

Lumière de nacre

« Un fond qui bouge comme l’intérieur d’un coquillage, une serif aux courbes molles, et une fiche produit assez précise pour qu’on puisse acheter sans quitter l’accueil. »

• Nacre
• Douceur précise
• Peau réelle
• Dosage visible
• Routine courte

(03) Palette

Des couleurs qui ont un rôle.

(04) Typographie

Les voix du site.

• Titre, logotype, noms de produits, étapes de la routine

  Fraunces

  300 · 400, axes SOFT 100 et opsz 144

  Moins de flacons

  Aa300Aa400Aa100

  Une serif à taille optique dont l’axe SOFT arrondit les empattements : en grand corps, elle a la douceur d’une crème sans perdre la précision d’une étiquette de pharmacie.

• Texte courant, interface du panier

  Switzer

  400 · 500

  Ajouter au panier

  Aa400Aa500

  Une linéale neutre pour tout ce qui se clique, afin que la serif reste réservée à ce qui se contemple.

• Dosages, mentions, avis, livraison

  Geist Mono

  400

  Niacinamide 5 %

  Le registre du laboratoire : les pourcentages et mentions légales ont une voix de notice, donc de confiance.

(05) Grille & mise en page

La structure sous l’image.

1. 01Le titre déborde sur le portrait : la page se lit d’un seul mouvement de gauche à droite, de la promesse à l’achat
2. 02Le portrait est une pilule verticale, la forme d’un flacon vu de face
3. 03Les ingrédients sont posés sur la peau, là où ils agissent, et non dans une liste
4. 04Tout ce qui s’achète vit dans une seule carte de verre dépoli
5. 05En portrait, la fiche se réduit à la texture et au prix, à côté du visage, et le CTA passe au pouce

(06) Composants

Les pièces de l’interface.

• C.01

  Fiche produit compacte

  Packshot sur dégradé nacré, étiquette imprimée sur le flacon, actifs dosés, choix de texture, contenance, prix et ajout au panier dans une carte.

• C.02

  Pastilles de texture

  Lait, gel, baume : la même macro de crème teintée trois fois, pour montrer la matière au lieu de la décrire.

• C.03

  Repères d’ingrédients

  Un point sur la peau, un filet, une étiquette en verre dépoli : nom de l’actif, dosage et effet en quatre mots.

• C.04

  Sélecteur de contenance

  Contrôle segmenté 30 ml / 50 ml recharge, l’option active posée en relief.

• C.05

  Routine en quatre étapes

  Nettoyer, traiter, nourrir, protéger : l’étape du produit en cours est mise en avant, la barre de progression montre où l’on en est.

• C.06

  Tampon rotatif

  Sans parfum, rechargeable, fait à Grasse : les trois engagements tournent autour du numéro du sérum.

(07) Motion

Chaque mouvement a un rôle.

• Ambiance

  Fond nacré

  Un shader liquide Shaderz, recoloré en abricot, lilas et céladon sur fond lait, très lent : la matière du nom de la marque.

• Ouverture

  Entrée

  Ouverture du portrait

  La pilule se dévoile de bas en haut pendant que la photo se recadre doucement, comme un flacon qu’on remplit.

• RepèresRepèresRepèresRepèresRepèresRepèresRepèresRepères

  Entrée

  Repères

  Les points d’ingrédients apparaissent un à un, leurs filets se tracent depuis la peau, puis ils respirent en boucle.

• IrisationIrisation

  Boucle

  Irisation

  Le dégradé du mot « éclat » glisse lentement d’un reflet à l’autre, comme la nacre qui change selon l’angle.

• Entrée

  Fiche et textures

  La carte glisse depuis la droite, le flacon remonte, puis les trois textures éclosent en cascade.

• VisiteVisiteVisiteVisiteVisiteVisiteVisiteVisite

  Boucle

  Visite simulée

  En boucle de 13 s, un curseur ouvre le menu « Routines », clique « Ajouter au panier » : le bouton passe à « Ajouté ✓ », une perle file en arc vers le panier qui passe à 2 et déplie un mini-panier, puis la page défile jusqu’aux quatre flacons de la routine, survole la crème et remonte.

(08) Choix expliqués

Ce qu’on a décidé, et pourquoi.

1. 01

   Choix 1 : La nacre comme matière, pas comme logo

   Le nom de la marque devient le fond de la page : un liquide irisé qui bouge à peine. On reconnaît Nacre sans lire son nom, et aucune autre marque du rayon n’a cette lumière.

2. 02

   Choix 2 : Un outremer au lieu du rose

   Le rose poudré est la couleur par défaut du soin. L’outremer des pharmacies anciennes dit « formulé », et il donne au bouton d’achat le seul vrai contraste de la page.

3. 03

   Choix 3 : Les dosages écrits en clair

   Le public lit les listes INCI. Afficher « Niacinamide 5 % » dès l’accueil vaut plus de confiance que n’importe quel adjectif.

4. 04

   Choix 4 : Acheter depuis l’accueil

   La marque vend une routine, mais un premier achat se fait sur un produit. La fiche complète dans le hero supprime un clic et une page de chargement.

5. 05

   Choix 5 : Une vraie peau, à peine retouchée

   Pas de visage lissé ni d’avant/après : la photo garde son grain, simplement désaturée pour s’accorder au fond. La promesse reste crédible.

6. 06

   Choix 6 : La routine comme pied de page

   Montrer les quatre gestes, avec le sérum à l’étape deux, fait comprendre que le produit appartient à un tout et oriente vers le diagnostic qui augmente le panier.

7. 07

   Choix 7 : Une serif molle, réglée à l’axe

   Fraunces poussée sur ses axes SOFT et opsz donne des courbes crémeuses en grand corps sans tomber dans la serif de luxe générique.

(09) Arborescence

7 pages, une intention chacune.

(10) Objectifs

Ce qu’on vise.

Objectifs visés — projet fictif, aucun chiffre mesuré

Panier moyen

2,4 produits

Objectif, contre un seul aujourd’hui, porté par la routine et le diagnostic.

Diagnostic complété

≥ 35 %

Objectif de taux de complétion des visiteurs qui le commencent.

Ajout au panier depuis l’accueil

8 %

Cible de conversion directe depuis la fiche du hero.

LCP mobile

< 2,2 s

Cible sur 4G : portrait en AVIF, shader chargé après la première peinture.