sanofi CHC · PHARMACEUTIQUE · SENIOR PRODUCT DESIGNER · JUIN 2023 — 2026
SANOFI CHC → OPELLA ·
PHARMACEUTIQUE ·
SENIOR PRODUCT DESIGNER ·
JUIN 2023 — 2026
sanofi CHC · PHARMACEUTIQUE · SENIOR PRODUCT DESIGNER · JUIN 2023 — 2026
opella
opella
Deux projets, une même ligne de conduite : décider de l’expérience en interne, laisser la marque aux agences.
Deux projets, une même ligne de conduite : décider de l’expérience en interne, laisser la marque aux agences.
PROJET 01 · DIGITAL TEAM
PROJET 01 · DIGITAL TEAM
Pangea, le design system, la gouvernance et le passage de l’équipe en mode produit — plus de 96 sites produits, une centaine de sites.
Pangea, le design system, la gouvernance et le passage de l’équipe en mode produit — plus de 96 sites produits, une centaine de sites.
PROJET 02 · OPELLA.COM
PROJET 02 · OPELLA.COM
Le site institutionnel, conçu sous NDA pour être en ligne le jour de l’annonce de la mise en vente.
Le site institutionnel, conçu sous NDA pour être en ligne le jour de l’annonce de la mise en vente.
PROJET 01 · DIGITAL TEAM
PROJET 01 · DIGITAL TEAM
Des agences décidaient de l’expérience, et le support
payait la facture.
Des agences décidaient de l’expérience, et le support payait la facture.
Des agences décidaient de l’expérience,
et le support payait la facture.
PROBLÈME
PROBLÈME
En juin 2023, nous n’avions même pas d’espace Figma. Les agences travaillaient dans leurs propres fichiers et livraient des écrans parfois impossibles à construire dans notre CMS, parfois simplement pas utilisables. Je refaisais leur travail dans nos limites.
En juin 2023, nous n’avions même pas d’espace Figma. Les agences travaillaient dans leurs propres fichiers et livraient des écrans parfois impossibles à construire dans notre CMS, parfois simplement pas utilisables. Je refaisais leur travail dans nos limites.
En juin 2023, nous n’avions même pas d’espace Figma. Les agences travaillaient dans leurs propres fichiers et livraient des écrans parfois impossibles à construire dans notre CMS, parfois simplement pas utilisables. Je refaisais leur travail dans nos limites.
Le reste se lisait dans les tickets : du code sur mesure site par site, donc du responsive cassé et des problèmes d’images qui revenaient en boucle, sur des marques différentes, pour la même raison.
Le reste se lisait dans les tickets : du code sur mesure site par site, donc du responsive cassé et des problèmes d’images qui revenaient en boucle, sur des marques différentes, pour la même raison.
Le reste se lisait dans les tickets : du code sur mesure site par site, donc du responsive cassé et des problèmes d’images qui revenaient en boucle, sur des marques différentes, pour la même raison.
Retirer aux agences les décisions d’expérience, leur laisser la marque.
Retirer aux agences les décisions d’expérience, leur laisser la marque.
stratégie
stratégie
D’un côté notre gouvernance : parcours, composants, limites d’usage, accessibilité. De l’autre ce qu’une agence livre : couleurs, typographies, logos, appliqués au brand book sur des composants qu’elle ne redessine pas.
Un débat politique plus que technique, dans un groupe de cette taille. Obtenu par la patience et par la preuve, livraison après livraison.
D’un côté notre gouvernance : parcours, composants, limites d’usage, accessibilité. De l’autre ce qu’une agence livre : couleurs, typographies, logos, appliqués au brand book sur des composants qu’elle ne redessine pas.
Un débat politique plus que technique, dans un groupe de cette taille. Obtenu par la patience et par la preuve, livraison après livraison.
D’un côté notre gouvernance : parcours, composants, limites d’usage, accessibilité. De l’autre ce qu’une agence livre : couleurs, typographies, logos, appliqués au brand book sur des composants qu’elle ne redessine pas.
Un débat politique plus que technique, dans un groupe de cette taille. Obtenu par la patience et par la preuve, livraison après livraison.
les frictions
Le mot « limiter » a mal été pris. Pour l’équipe CMS, qu’une marque ait sa propre taille de header semblait normal. Pour les brand leads, ne pas décliner le rebranding à l’identique — typographies énormes, couleurs non accessibles, longs textes publicitaires — était incompréhensible. Puis c’est devenu la règle, défendue par l’équipe CMS elle-même.
Le mot « limiter » a mal été pris. Pour l’équipe CMS, qu’une marque ait sa propre taille de header semblait normal. Pour les brand leads, ne pas décliner le rebranding à l’identique — typographies énormes, couleurs non accessibles, longs textes publicitaires — était incompréhensible. Puis c’est devenu la règle, défendue par l’équipe CMS elle-même.
Pangea, le design system
Pangea, le design system
Pangea, le design system
processus
processus
processus
Ce travail n’avait été demandé par personne. Face aux difficultés récurrentes avec les agences, je l’ai initié pour accélérer mon propre processus. J’en percevais le potentiel, mais il fallait le prouver étape par étape, en gagnant la confiance de l’équipe par une exécution toujours plus qualitative et rapide. C’est aujourd’hui la structure de travail d’Opella.
Chaque demande d’agence est devenue un composant racine, sans marque, dont les variables appliquent le style à la livraison. Ils s’appuient sur des tokens de fondation — espacements, élévations, couleurs, typographies — et sur des guidelines d’usage.
Ce travail n’avait été demandé par personne. Face aux difficultés récurrentes avec les agences, je l’ai initié pour accélérer mon propre processus. J’en percevais le potentiel, mais il fallait le prouver étape par étape, en gagnant la confiance de l’équipe par une exécution toujours plus qualitative et rapide. C’est aujourd’hui la structure de travail d’Opella.
Chaque demande d’agence est devenue un composant racine, sans marque, dont les variables appliquent le style à la livraison. Ils s’appuient sur des tokens de fondation — espacements, élévations, couleurs, typographies — et sur des guidelines d’usage.
Ce travail n’avait été demandé par personne. Face aux difficultés récurrentes avec les agences, je l’ai initié pour accélérer mon propre processus. J’en percevais le potentiel, mais il fallait le prouver étape par étape, en gagnant la confiance de l’équipe par une exécution toujours plus qualitative et rapide. C’est aujourd’hui la structure de travail d’Opella.
Chaque demande d’agence est devenue un composant racine, sans marque, dont les variables appliquent le style à la livraison. Ils s’appuient sur des tokens de fondation — espacements, élévations, couleurs, typographies — et sur des guidelines d’usage.
Le nom Pangea a été choisi par l’équipe lors d’un atelier, parmi trois propositions que j’avais préparées : une référence au supercontinent unique, en écho à l’ambition de Sanofi d’unifier ses produits à l’échelle mondiale.
Fin 2024, un nouveau CMS a été lancé, construit à 100% sur ces tokens et composants : code plus propre, meilleures performances et moins d’exceptions à négocier site par site. Le chantier s’est poursuivi après mon départ, en mars 2026.
Le nom Pangea a été choisi par l’équipe lors d’un atelier, parmi trois propositions que j’avais préparées : une référence au supercontinent unique, en écho à l’ambition de Sanofi d’unifier ses produits à l’échelle mondiale.
Fin 2024, un nouveau CMS a été lancé, construit à 100% sur ces tokens et composants : code plus propre, meilleures performances et moins d’exceptions à négocier site par site. Le chantier s’est poursuivi après mon départ, en mars 2026.
Le nom Pangea a été choisi par l’équipe lors d’un atelier, parmi trois propositions que j’avais préparées : une référence au supercontinent unique, en écho à l’ambition de Sanofi d’unifier ses produits à l’échelle mondiale.
Fin 2024, un nouveau CMS a été lancé, construit à 100% sur ces tokens et composants : code plus propre, meilleures performances et moins d’exceptions à négocier site par site. Le chantier s’est poursuivi après mon départ, en mars 2026.
Arbitrer sur l’usage réel,
pas sur ce qu’on a vu ailleurs.
Arbitrer sur l’usage réel, pas sur ce qu’on a vu ailleurs.
Arbitrer sur l’usage réel,
pas sur ce qu’on a vu ailleurs.
vision PRODUIT
vision PRODUIT
vision PRODUIT
DONNÉES
Avec l’équipe UXO Data : parcours, temps de session, interactions. Les demandes de composants sont devenues des hypothèses à vérifier.
Avec l’équipe UXO Data : parcours, temps de session, interactions. Les demandes de composants sont devenues des hypothèses à vérifier.
DEUX PERSONAS
Celles et ceux qui cherchent le bon médicament pour eux-mêmes, et celles et ceux qui le cherchent pour un proche dont ils s’occupent.
Celles et ceux qui cherchent le bon médicament pour eux-mêmes, et celles et ceux qui le cherchent pour un proche dont ils s’occupent.
OKR D’ÉQUIPE
Construits ensemble autour de ces personas, ils ont priorisé les composants par objectif business.
Construits ensemble autour de ces personas, ils ont priorisé les composants par objectif business.
Contrainte de fond : le cadre légal pharmaceutique interdisait tout test à l’extérieur de l’entreprise. Nos personas n’ont jamais pu être validées dehors.
Contrainte de fond :
le cadre légal pharmaceutique interdisait tout test à l’extérieur de l’entreprise. Nos personas n’ont jamais pu être validées dehors.
Contrainte de fond : le cadre légal pharmaceutique interdisait tout test à l’extérieur de l’entreprise. Nos personas n’ont jamais pu être validées dehors.
Conception et livraison
de la solution
Conception et livraison
de la solution
Conception et livraison de la solution
livrables
livrables
PRODUCT WEBSITE - Mobile FIRST
PRODUCT WEBSITE -
Mobile FIRST
PRODUCT WEBSITE - Mobile FIRST
PRODUCT WEBSITE - desktop
PRODUCT WEBSITE -
Aperçu desktop
PRODUCT WEBSITE - desktop
La preuve par les chiffres
La preuve par les chiffres
IMPACT
IMPACT
de 1 mois
à 2 JOURS
de 1 mois
à 2 JOURS
de 1 mois
à 2 JOURS
pour créer le layout d’un
nouveau site
pour créer le layout
d’un nouveau site
pour créer le layout d’un nouveau site
de 0
à 15 PAGES
de 0
à 15 PAGES
de 0
à 15 PAGES
TEMPLATES avec variables
TEMPLATES avec
variables
de 0
à +100 MARQUES
de 0
à +100 MARQUES
de 0
à +100 MARQUES
sur le meme cms et design system
sur le meme cms
et design system
Les impacts positifs ont permis une meilleure adoption du Design System et de sa valeur significative auprès des parties prenantes.
Ces chiffres sont ce qui a rendu la gouvernance acceptable. Tant que la règle était une position, elle se rediscutait à chaque projet.
PROJET 02 · SITE INSTITUTIONNEL
PROJET 02 · SITE INSTITUTIONNEL
Le site d'Opella devait être prêt le jour où Sanofi annoncerait son entrée en Bourse. Trois mois de travail, dans le secret, sur un CMS qui n'était pas fait pour ça.
Le site d'Opella devait être prêt le jour où Sanofi annoncerait son entrée en Bourse. Trois mois de travail, dans le secret, sur un CMS qui n'était pas fait pour ça.
PROBLÈME
PROBLÈME
Cinq jours pour cadrer,
deux livraisons pour trancher.
Cinq jours pour cadrer, deux livraisons pour trancher.
Cinq jours pour cadrer,
deux livraisons pour trancher.
PROCESSUS
PROCESSUS
1
1
Design sprint de 5 jours avec les stakeholders, pour cartographier les besoins des trois publics.
Design sprint de 5 jours avec les stakeholders, pour cartographier les besoins des trois publics.
TROIS PERSONAS RETENUS POUR LE SOFT LAUNCH
TROIS PERSONAS RETENUS
POUR LE SOFT LAUNCH
TROIS PERSONAS RETENUS POUR LE SOFT LAUNCH
INVESTISSEURS
INVESTISSEURS
Jugent une entreprise qu’ils
découvrent le jour même.
Jugent une entreprise qu’ils
découvrent le jour même.
Jugent une entreprise qu’ils découvrent le jour même.
CANDIDATS
CANDIDATS
Se demandent si on travaille
bien dans cette entreprise.
Se demandent si on travaille
bien dans cette entreprise.
Se demandent si on travaille bien dans cette entreprise.
MÉDIAS
MÉDIAS
Cherchent un kit presse,
tout de suite.
Cherchent un kit presse,
tout de suite.
Cherchent un kit presse,
tout de suite.
→ UN SITEMAP VALIDÉ AVANT LA PREMIÈRE MAQUETTE
→ UN SITEMAP VALIDÉ AVANT LA PREMIÈRE MAQUETTE
2
2
Benchmark des sites institutionnels de grands groupes : beaucoup de matière, aussitôt un problème de tri.
→ DES RÉFÉRENCES OPPOSABLES AUX AVIS
Benchmark des sites institutionnels de grands groupes : beaucoup de matière, aussitôt un problème de tri.
→ DES RÉFÉRENCES OPPOSABLES AUX AVIS
3
3
Deux livraisons : indispensable le jour de l’annonce, et faisable dans le temps donné.
→ SOFT LAUNCH EN 3 MOIS, HARD LAUNCH 4 MOIS APRÈS
Deux livraisons : indispensable le jour de l’annonce, et faisable dans le temps donné.
→ SOFT LAUNCH EN 3 MOIS, HARD LAUNCH 4 MOIS APRÈS
4
4
Le motion pour porter la modernité attendue, conçu avec un motion designer dans les limites du CMS.
→ DES ÉLÉMENTS ANIMÉS RÉUTILISÉS AUX DEUX LANCEMENTS
Le motion pour porter la modernité attendue, conçu avec un motion designer dans les limites du CMS.
→ DES ÉLÉMENTS ANIMÉS RÉUTILISÉS AUX DEUX LANCEMENTS
Les défis
Les défis
CONTRAINTES
CONTRAINTES
TECHNIQUE
TECHNIQUE
Un CMS conçu pour des fiches produit
Pour tenir la date, le soft launch a réutilisé nos composants CMS existants et autorisé du code custom là où il en manquait. Le prix a été immédiat : erreurs, bugs et reprises.
Un CMS conçu pour des fiches produit
Pour tenir la date, le soft launch a réutilisé nos composants CMS existants et autorisé du code custom là où il en manquait. Le prix a été immédiat : erreurs, bugs et reprises.
MARQUE
MARQUE
Un brand book pensé pour l’affiche
Créé par une agence de publicité à Londres, sans intention digitale : des typographies très grandes dont il fallait garder le format, impossible en mobile et dans le CMS.
Un brand book pensé pour l’affiche
Créé par une agence de publicité à Londres, sans intention digitale : des typographies très grandes dont il fallait garder le format, impossible en mobile et dans le CMS.
POLITIQUE
POLITIQUE
Chaque page validée par le CODIR
Réunions hebdomadaires, allers-retours constants, des pages entières restées entre un oui et un non. Le contenu venait du marketing, du legal et de la sustainability.
Chaque page validée par le CODIR
Réunions hebdomadaires, allers-retours constants, des pages entières restées entre un oui et un non. Le contenu venait du marketing, du legal et de la sustainability.
Ce qui n'est pas réutilisable ailleurs ne rentre pas dans le système.
Ce qui n'est pas réutilisable ailleurs ne rentre pas dans le système.
vision produit
vision produit
gouvernance
Le hard launch demandait plus de pages et plus de motion, donc de nouveaux composants. Ma décision dévait être aligné avec la vision produit.
La règle tenait en une question —
Ce composant sert-il ailleurs que sur ce website ?
Le hard launch demandait plus de pages et plus de motion, donc de nouveaux composants. Ma décision dévait être aligné avec la vision produit.
La règle tenait en une question —
Ce composant sert-il ailleurs que sur ce website ?
Le hard launch demandait plus de pages et plus de motion, donc de nouveaux composants. Ma décision dévait être aligné avec la vision produit.
La règle tenait en une question —
Ce composant sert-il ailleurs que sur ce website ?
⛔️ NON
Il restait un one-shot du site institutionnel : ni construit dans le CMS, ni ajouté au design system.
✅ OUI
Il était créé, documenté et livré pour être intégré dans le CMS, et ainsi rendu disponible pour tous nos sites produits.
⛔️ NON
Il restait un one-shot du site institutionnel : ni construit dans le CMS, ni ajouté au design system.
✅ OUI
Il était créé, documenté et livré pour être intégré dans le CMS, et ainsi rendu disponible pour tous nos sites produits.
Conception et livraison
de la solution
Conception et livraison
de la solution
livrables
livrables
INSTITUTIONAL WEBSITE - DESKTOP
INSTITUTIONAL WEBSITE - DESKTOP
