Où en est le projet
En pleine phase de delivery : je suis le développement avec l’équipe, via GitHub et Slack.
(En bref)
Pharmalia — Incitation à la commande
Des offres que personne ne voyait, rendues lisibles en un coup d’œil.
Le problème
Les pharmaciens ne voyaient pas les offres de réduction, ou ne les comprenaient pas : paliers flous, activation sur une page séparée, service client saturé.
Mon rôle
Product Designer Senior freelance, de la recherche au suivi du delivery, avec le Lead Designer de Pharmalia.
La solution
Des offres visibles dès la carte produit, activables sans quitter la page, avec prix et paliers recalculés en temps réel.
(01) Contexte & contraintes
Des offres
incomprises
Pharmalia (anciennement OCP-Link) a constaté que ses clients avaient du mal à comprendre le système d’offres de réduction du site.
Le client souhaitait refondre entièrement ce système pour le rendre plus clair et plus attractif. Le projet, baptisé « Incitation à la commande », visait à augmenter le nombre de commandes et le panier moyen.
Il devait aussi soulager le service client, régulièrement saturé de questions sur les offres.
Le problème
- 01
Des offres invisibles
Les pharmaciens disent avoir du mal à voir les offres de réduction proposées.
- 02
Des offres incompréhensibles
Plusieurs offres par produit, avec des paliers (-25 % pour 10 articles, par exemple) : l’ensemble est souvent peu clair.
- 03
Un service client saturé
Le manque de clarté crée un flux de questions qui sature parfois le service client.
- 04
Inciter à la commande
L’objectif critique : augmenter les commandes et le panier moyen.
Le process
- 01
Comprendre
- Benchmark UX
- Carte d’empathie
- 02
Définir
- Friction log
- User stories
- User flow
- Insights
- 03
Idéation
- Wireframes
- Tests utilisateurs
- 04
Design
- UI design
- Design system
- 05
Delivery
- Suivi du dév
- Design review
Le benchmark
(04) Comprendre — Benchmark
Pour cette partie du processus, je travaille avec ChatGPT Work. Il me permet, grâce à des skills pré-paramétrés, de gagner un temps précieux sur ce type de tâche.
Fnac
- La vue de toutes les offres se fait via une modale.
- On peut trier par pertinence ou par montant.
- Il n’y a pas d’offre « recommandée » : le user est simplement guidé par une mise en avant rouge pour Darty, bleue pour les autres boutiques.
Darty
- Les offres s’affichent dans un carrousel horizontal.
- Pour voir toutes les offres, il faut cliquer sur le lien « Voir toutes les offres ».
- Le user peut voir l’économie réalisée.
- Une offre est déjà présélectionnée.
Bank
- Une offre est déjà sélectionnée avec une mise en avant de la réduction.
- Des boutons radio permettent de voir facilement comment changer d’offre.
- Les autres offres semblent ne pas avoir de réduction.
(05) Comprendre — Empathie
Carte d’empathie
J’ai interviewé 5 pharmaciens (2 préparatrices et 3 pharmaciens) afin de mieux comprendre leurs besoins, leurs problématiques et leur utilisation des offres. Voici la carte d’empathie agrégée :
(Verbatim — session de test)
« J’aurais aimé rester sur ma page recherche. »
User stories
(06) Définir — User stories
Sur la base des entretiens, de la carte d’empathie et des observations issues du friction log, voici les user stories retenues pour cadrer les fonctionnalités à prioriser :
PRÉPARATRICEUS-01
La préparatrice veut voir immédiatement si un produit bénéficie d’une offre, sans avoir à chercher un bouton caché, afin de ne pas perdre de temps sur une information qu’elle ignore aujourd’hui faute de visibilité.
PRÉPARATRICEUS-02
La préparatrice veut que le prix et la quantité se mettent à jour en temps réel quand elle ajoute des unités, afin de savoir immédiatement si elle atteint le palier de réduction, sans avoir à deviner.
PRÉPARATRICEUS-03
La préparatrice veut activer une offre sans quitter la page produit ou la page de recherche, afin de ne pas interrompre son geste de vente pendant qu’un client attend au comptoir.
PRÉPARATRICEUS-04
La préparatrice veut comprendre le fonctionnement d’une offre à paliers en un coup d’œil, afin de répondre correctement à un client pressé sans devoir demander à un collègue.
TITULAIREUS-05
Le titulaire veut voir toutes les offres disponibles pour un produit directement sur sa fiche, afin de ne manquer aucune économie sur ses commandes récurrentes.
TITULAIREUS-06
Le titulaire veut une vue qui distingue clairement les catégories d’offres (Privilège, Sans engagement, Exclusivité), afin d’identifier rapidement laquelle est la plus avantageuse sans comparer manuellement.
TITULAIREUS-07
Le titulaire veut pouvoir expliquer simplement le système d’offres à un nouvel employé, afin de garantir que toute son équipe réalise les économies possibles, pas seulement lui.
TITULAIREUS-08
Le titulaire veut une mise en avant automatique de l’offre la plus pertinente pour son panier, afin de prendre sa décision d’achat sans effort de comparaison.
Tableau d’insights
(07) Définir — Insights
Pour prioriser le backlog, j’ai replacé chaque retour issu des entretiens et du friction log sur une matrice importance utilisateur / importance business.
Important pour l’entreprise
Important pour l’utilisateur
1
2
3
4
5
6
7
8
9
10
11
- 1Offres invisibles sur la fiche produit
- 2Prix et quantité qui ne se mettent pas à jour
- 3Redirection vers une page Offre séparée
- 4Aucune mise en avant de l’offre la plus avantageuse
- 5Distinction floue entre catégories d’offres
- 6Terminologie confuse (paliers, CIP) pour le personnel junior
- 7Difficulté à former les nouveaux employés au système d’offres
- 8Charge du service client liée aux questions sur les offres
- 9Manque de hiérarchie visuelle de la page d’accueil
- 10Souhait de personnalisation de la page selon le rôle
- 11Réduction du volume de tickets support (objectif business pur)
Avant, après
(08) Définir — User flow
Voici le parcours réel observé pendant les tests (avant), comparé au parcours du design final livré (après), où l’offre est visible et activable directement sur la fiche produit, sans redirection.
AVANT — parcours testé
- Rechercher un produit
- Résultats de recherche
- Repérer l’offre
- Ajuster la quantité
- Ouvrir la fiche produit
- Dérouler le menu offres
- Décision : quantité suffisante ?
- Non → revoir la quantité
- Oui → accéder à l’offre
- Redirection page séparée
- Ressaisir la quantité
- Valider la commande
APRÈS — design final livré
- Rechercher un produit
- Résultats de recherche
- Offre visible sur la carte produit ✓
- Non → ajuster la quantité (temps réel) ✓
- Décision : palier atteint ?
- Oui → choisir l’offre (privilège/exclusivité) ✓
- Ajouter au panier ✓
- Valider la commande
Les wireframes
(09) Idéation — Wireframes
J’ai ensuite travaillé sur des wireframes afin de recueillir les premiers retours utilisateurs.
Évolution du design
(10) Idéation — Évolution
Le fichier du projet garde la trace de plusieurs versions du bloc offre et de pistes abandonnées en route. Voici comment il a évolué.
Étape 1 · 2025
Premières pistes
Un bloc « Offre sélectionnée pour vous » sous chaque produit, une jauge de paliers affichant le prix unitaire remisé à chaque palier et un rappel des produits favoris concernés par l’offre. Plusieurs couleurs ont été testées pour faire ressortir l’offre dans une interface déjà très verte.
Étape 2 · 2025
Version 1
L’offre est présélectionnée, la quantité se saisit sur la jauge, un message indique combien d’unités manquent pour le palier suivant et l’économie réalisée s’affiche. Les autres offres (Sans engagement, Privilèges, Exclusivité) se déplient sous la carte.
Pistes explorées puis écartées
Détection automatique de l’offre
Un bandeau proposait d’appliquer l’offre détectée pour la quantité saisie, avec un réglage Automatique / Manuel. Pour des raisons légales, nous avons écarté cette piste.
Ouverture en modale
L’ouverture des offres a été un temps envisagée sous forme de modale, avant de prioriser le volet latéral pour des raisons de confort et de cohérence.
Décisions clés
(11) Design — Décisions
Chaque décision d’interface répond à une friction observée pendant les tests. Voici les quatre qui ont le plus structuré le design final.
Décision 01
Activer l’offre sans quitter la page
Problème observé
Pour profiter d’une offre, le pharmacien devait passer par une page Offre séparée, puis ressaisir ses quantités. « J’aurais aimé rester sur ma page recherche. »
Ce que j’ai décidé
L’offre est visible et activable directement sur la carte produit et sur la fiche produit, sans redirection.
Alternative écartée
La page Offre dédiée et le volet latéral des versions 2025, où l’activation se faisait à l’écart de la recherche.
Décision 02
Rendre les paliers lisibles en temps réel
Problème observé
Le prix et la quantité ne se mettaient pas à jour : le pharmacien ne savait pas s’il atteignait le palier. « Avec 30 unités j’ai -30 % non ? Je comprends rien. »
Ce que j’ai décidé
Une jauge de paliers et un prix net remisé recalculés à chaque saisie de quantité.
Alternative écartée
En version 1, la quantité se saisissait directement sur le curseur de la jauge.
Décision 03
Mettre en avant la meilleure offre sans effacer les catégories
Problème observé
Plusieurs offres par produit, sans hiérarchie. Le client tenait pourtant à garder visibles les catégories (Privilège, Sans engagement, Exclusivité).
Ce que j’ai décidé
La catégorie affichée en tête du bloc offre, l’étiquette « Offre sélectionnée pour vous », un badge « Offre la plus avantageuse pour X unités » et, quand une meilleure offre existe, une suggestion que le pharmacien peut écarter (« Pas intéressé »).
Alternative écartée
Un code couleur par catégorie, exploré en février 2026.
Itération
Ce que les tests des wireframes ont changé
Une offre trop visible
Plusieurs utilisateurs ont remonté un effet inverse : l’offre prenait trop de place par rapport aux informations produits. Nous avons rééquilibré ça dans la version UI.
Voir l’effet de l’offre
Dans un premier temps, il n’était pas question que la jauge de l’offre mette à jour le prix total. Mais après avoir poussé auprès des développeurs, ils ont finalement réussi à contourner un problème technique.
Ce qui a été difficile
(12) Design — Arbitrages
Une refonte ne se joue pas seulement dans Figma. Voici les moments où il a fallu trancher : ce que j’ai défendu, et ce que j’ai accepté de lâcher.
La jauge et le prix total décorrélés
La situation
La jauge des offres ne devait pas avoir d’incidence sur le prix total, à cause d’une contrainte technique.
Ce que j’ai défendu
Pour moi, cette décorrélation allait créer d’énormes incompréhensions côté utilisateur : si je bouge la jauge, c’est bien pour ajouter des quantités, alors pourquoi mon prix total ne se mettrait-il pas à jour ? Il fallait trouver une solution technique.
Ce que j’ai lâché
Sur ce sujet, je ne devais rien lâcher, car il en allait de la compréhension globale du système d’offres.
Le résultat
Les développeurs ont trouvé une solution : la jauge est à présent liée au prix final.
Ce que j’en retiens
Parfois, se battre pour une conviction profonde est le seul chemin valable.
(13) Design & delivery — UI
L’UI finale
Enfin, le travail d’UI design a pu commencer, en collaboration avec le Lead Designer interne chez Pharmalia : nous avons mis à jour ensemble le design system et ajouté la documentation nécessaire.
Au moment où j’écris ces mots, nous sommes en pleine phase de delivery, où je fais le suivi du dév via GitHub et Slack.
