Mobile First
mobile first
France
B2C
Business2Consumer
Pharmaceutique
CHC
grand groupe
Multinational
Opella/Sanofi
Opella
/Sanofi
Opella/Sanofi
Création d'un site web et d'un design system from-scratch pour le leader mondial de la fabrication de médicaments et de la biopharmaceutique
Création d'un site web et d'un design system from-scratch pour le leader mondial de la fabrication de médicaments et de la biopharmaceutique
Rôle
Rôle
Senior Product Designer
Senior Product Designer
périmètre
périmètre
Design System, Research, Data Product, CMS
Design System, Research, Data Product, CMS
Année
Année
2023–2026
2023–2026
équipe International
équipe International
Head of Design, 1 Product Designer
1 Data PM, 15 PO
1 PMO,
3 QA
1 Scrum Master
1 Tech Lead + 3 Développeurs
Head of Design, 1 Product Designer
1 Data PM, 15 PO
1 PMO,
3 QA
1 Scrum Master
1 Tech Lead + 3 Développeurs
Stakeholders
Stakeholders
Marketing Team
Brand Leads
Agences créatives externes
CODIR Sanofi (Board)
Marketing Team
Brand Leads
Agences créatives externes
CODIR Sanofi (Board)
Personas
Personas
Patients recherchant le traitement approprié pour eux-mêmes
Aidants recherchant les informations pertinentes pour leurs proches.
Patients recherchant le traitement approprié pour eux-mêmes
Aidants recherchant les informations pertinentes pour leurs proches.
01 / Contexte
01 / Contexte
Opella, est une filiale de Sanofi spécialisée dans les produits de santé de grande consommation. J'ai intégré la Digital Factory, entité d'innovation pluridisciplinaire (Produit, Design, Dev). Au-delà de l'industrialisation pure, mon rôle a été de faire évoluer le produit en nous appuyant sur la data (métriques UX et d'usage : flux, temps de session, interactions).
Trois enjeux majeurs se sont présentés :
Cohérence opérationnelle : harmoniser les pratiques et les livrables au sein de la factory.
Gouvernance : clarifier les processus de décision entre le produit, tech et business.
Scalabilité : Déployer un socle solide capable d'absorber les évolutions futures sans ralentir le rythme des livraisons (time-to-market).
Opella, est une filiale de Sanofi spécialisée dans les produits de santé de grande consommation. J'ai intégré la Digital Factory, entité d'innovation pluridisciplinaire (Produit, Design, Dev). Au-delà de l'industrialisation pure, mon rôle a été de faire évoluer le produit en nous appuyant sur la data (métriques UX et d'usage : flux, temps de session, interactions).
Trois enjeux majeurs se sont présentés :
Cohérence opérationnelle : harmoniser les pratiques et les livrables au sein de la factory.
Gouvernance : clarifier les processus de décision entre le produit, tech et business.
Scalabilité : Déployer un socle solide capable d'absorber les évolutions futures sans ralentir le rythme des livraisons (time-to-market).
02 / Défi
02 / Défi
Le problème n’était pas une interface isolée. C’était un système de delivery sous pression.
Le problème n’était pas une interface isolée. C’était un système de delivery sous pression.
Le défi principal était que le CMS historique manquait de fondations design, ce qui a généré une dette technique et design critique : le code était fragmenté, les personnalisations des agences externes créaient des incohérences de marque, et le support était submergé par des bugs (responsive, gestion des images).
Face à cela, mon intervention s'est structurée autour de deux chantiers :
Chantier Design System et Gouvernance : Centraliser les composants et définir des critères claires pour sécuriser les futurs parcours et stabiliser le responsive.
Accompagnement au changement : Transformer une organisation en insufflant une culture produit et design (mise en place de rituels de discovery et décisions guidées par la data).
Le défi principal était que le CMS historique manquait de fondations design, ce qui a généré une dette technique et design critique : le code était fragmenté, les personnalisations des agences externes créaient des incohérences de marque, et le support était submergé par des bugs (responsive, gestion des images).
Face à cela, mon intervention s'est structurée autour de deux chantiers :
Chantier Design System et Gouvernance : Centraliser les composants et définir des critères claires pour sécuriser les futurs parcours et stabiliser le responsive.
Accompagnement au changement : Transformer une organisation en insufflant une culture produit et design (mise en place de rituels de discovery et décisions guidées par la data).
03 / Mon rôle
03 / Mon rôle
J’ai travaillé à la fois sur le volet méthodologique et opérationnel
J’ai travaillé à la fois sur le volet méthodologique et opérationnel
UX / Évolution produit
UX / Évolution produit
Je suis partie des insights UXO et Data PM pour faire évoluer le produit à partir des parcours utilisateurs, du temps de session et des signaux d’interaction. J’ai aussi facilité des workshops et des rituels de discovery pour aider les équipes à prendre des décisions centrées impact produit / utilisateurs dans une organisation plus traditionnelle.
Je suis partie des insights UXO et Data PM pour faire évoluer le produit à partir des parcours utilisateurs, du temps de session et des signaux d’interaction. J’ai aussi facilité des workshops et des rituels de discovery pour aider les équipes à prendre des décisions centrées impact produit / utilisateurs dans une organisation plus traditionnelle.
UI / Design System
UI / Design System
J’ai créé le design system, structuré les tokens core et brand, défini des templates scalables, traduit les brand books print en règles digitales, amélioré l’accessibilité et contribué à reconstruire la logique CMS autour de fondations tokenisées.
J’ai créé le design system, structuré les tokens core et brand, défini des templates scalables, traduit les brand books print en règles digitales, amélioré l’accessibilité et contribué à reconstruire la logique CMS autour de fondations tokenisées.
Evangélisation et scaling des méthodes design
Evangélisation et scaling des méthodes design
Structuration et évangélisation de l'approche design au sein de la Digital Factory en vu de scaler à l'échelle du groupe : acculturation au Design produit et aux fondations CMS, gouvernance de marque, accessibilité et pratiques de delivery
Structuration et évangélisation de l'approche design au sein de la Digital Factory en vu de scaler à l'échelle du groupe : acculturation au Design produit et aux fondations CMS, gouvernance de marque, accessibilité et pratiques de delivery
04 / Documentation visuelle
04 / Documentation visuelle
Les visuels du projet montrent comment la logique Atomic Design, les templates et les règles de marque ont été traduits en assets concrets pour les équipes produit, design et développement.
Les visuels du projet montrent comment la logique Atomic Design, les templates et les règles de marque ont été traduits en assets concrets pour les équipes produit, design et développement.
FONDATION
FONDATION
Socle Technique:
Tokens, typographie, espacements, couleurs, élévations, breakpoints.
Socle Technique:
Tokens, typographie, espacements, couleurs, élévations, breakpoints.
UI KIT
UI KIT
Composants + variations, Do’s/Don’ts, accessibilité, comportements, animations, mesures précises.
Composants + variations, Do’s/Don’ts, accessibilité, comportements, animations, mesures précises.
TOOLKIT
TOOLKIT
Onboarding + structure fichiers
TEMPLATES
TEMPLATES
Système de pages complet, composants de bout en bout.
Système de pages complet, composants de bout en bout.
05 / chantiers
05 / chantiers
Une base solide pour mieux gouverner, scaler et faire évoluer l’écosystème.
Une base solide pour mieux gouverner, scaler et faire évoluer l’écosystème.
Création du design system
Création du design system
Création d’un Design System donnant aux équipes produit, design et développement une source de vérité partagée pour les composants, patterns, tokens et templates.
Création d’un Design System donnant aux équipes produit, design et développement une source de vérité partagée pour les composants, patterns, tokens et templates.
Tokens core et brand
Tokens core & brand
Définition d’une structure de tokens dans laquelle les fondations produit restent stables, tandis que chaque marque peut exprimer son logo, ses couleurs et sa typographie dans un cadre digital contrôlé.
Définition d’une structure de tokens dans laquelle les fondations produit restent stables, tandis que chaque marque peut exprimer son logo, ses couleurs et sa typographie dans un cadre digital contrôlé.
Logique CMS sans custom code à l'échelle du socle
Logique CMS sans custom code à l'échelle du socle
Contribution à la restructuration du CMS afin que la personnalisation se fasse uniquement au niveau des marques, réduisant les implémentations fragiles et facilitant la maintenance du socle.
Contribution à la restructuration du CMS afin que la personnalisation se fasse uniquement au niveau des marques, réduisant les implémentations fragiles et facilitant la maintenance du socle.
Atomic Design et templates complets
Atomic Design & templates complets
Développement de briques réutilisables et de templates de pages permettant de réduire le temps de mise en ligne des sites de plusieurs semaines à quelques jours.
Développement de briques réutilisables et de templates de pages permettant de réduire le temps de mise en ligne des sites de plusieurs semaines à quelques jours.
Lancement d’Opella.com
Lancement d’Opella.com
Contribution au lancement d’Opella.com en alignant les besoins produit, design, tech, content et parties prenantes à l’échelle de l’organisation.
Contribution au lancement d’Opella.com en alignant les besoins produit, design, tech, content et parties prenantes à l’échelle de l’organisation.
Accessibilité par les règles digitales de marque
Accessibilité par les règles digitales de marque
Traduction des brand books print en systèmes de couleurs et de tokens digitaux, améliorant le contraste, la cohérence et la qualité d’implémentation entre les marques.
Traduction des brand books print en systèmes de couleurs et de tokens digitaux, améliorant le contraste, la cohérence et la qualité d’implémentation entre les marques.
Évolution produit guidée par la donnée
Évolution produit guidée par la donnée
Utilisation des insights UXO et Data PM — parcours, temps de session et signaux d’interaction — pour soutenir la priorisation et les décisions produit.
Utilisation des insights UXO et Data PM — parcours, temps de session et signaux d’interaction — pour soutenir la priorisation et les décisions produit.
Vision produit annuelle
Vision produit annuelle
Travail avec le leadership design sur des initiatives annuelles de vision produit afin d’influencer les parties prenantes stratégiques et la direction digitale au niveau du board.
Travail avec le leadership design sur des initiatives annuelles de vision produit afin d’influencer les parties prenantes stratégiques et la direction digitale au niveau du board.
Pratiques de discovery dans une culture traditionnelle
Pratiques de discovery dans une culture traditionnelle
Introduction d’ateliers comme les empathy maps, user flows, sessions de priorisation et Crazy Eights pour aider les équipes à s’aligner autour des besoins utilisateurs et des décisions.
Introduction d’ateliers comme les empathy maps, user flows, sessions de priorisation et Crazy Eights pour aider les équipes à s’aligner autour des besoins utilisateurs et des décisions.
Introduction d’ateliers comme les empathy maps, user flows, sessions de priorisation et Crazy Eights pour aider les équipes à s’aligner autour des besoins utilisateurs et des décisions.
06 / Impact
06 / Impact
Ce travail a rendu la livraison plus prévisible et a donné au digital un rôle stratégique plus clair.
Ce travail a rendu la livraison plus prévisible et a donné au digital un rôle stratégique plus clair.
Ce travail a rendu la livraison plus prévisible et a donné au digital un rôle stratégique plus clair.
Le Design System a permis de réduire les incohérences techniques, d'améliorer la collaboration avec les développeurs, de clarifier l'utilisation de Storybook et la logique de composants, et a rendu la personnalisation des marques plus gouvernable. Il a aussi permis la réduction des demandes au support liées aux bugs et aux problèmes de responsive, accéléré les cycles de déploiement, renforcé les fondations d’accessibilité et aidé les équipes à faire évoluer le produit avec davantage d'éléments concrets et d’alignement stratégique.
Le Design System a permis de réduire les incohérences techniques, d'améliorer la collaboration avec les développeurs, de clarifier l'utilisation de Storybook et la logique de composants, et a rendu la personnalisation des marques plus gouvernable. Il a aussi permis la réduction des demandes au support liées aux bugs et aux problèmes de responsive, accéléré les cycles de déploiement, renforcé les fondations d’accessibilité et aidé les équipes à faire évoluer le produit avec davantage d'éléments concrets et d’alignement stratégique.
Le Design System a permis de réduire les incohérences techniques, d'améliorer la collaboration avec les développeurs, de clarifier l'utilisation de Storybook et la logique de composants, et a rendu la personnalisation des marques plus gouvernable. Il a aussi permis la réduction des demandes au support liées aux bugs et aux problèmes de responsive, accéléré les cycles de déploiement, renforcé les fondations d’accessibilité et aidé les équipes à faire évoluer le produit avec davantage d'éléments concrets et d’alignement stratégique.
-35 %
-35 %
réduction des bugs récurrents
2 jours
2 jours
pour livrer un site qui prenait 1 mois
+15
+15
templates de pages réutilisables et adaptables
+100
+100
marques alignées sous le système
15–20
15–20
éléments d’accessibilité améliorés
06.1 / Penser le design system à l’échelle
06.1 / Penser le design system à l’échelle
Ce projet a renforcé ma conviction que structurer un écosystème complexe ne signifie pas le figer. Tout l'enjeu est de trouver le juste équilibre entre une gouvernance nécessaire et la flexibilité indispensable aux équipes. Chez Opella, ma plus grande valeur ajoutée n’a pas seulement été de concevoir des interfaces, mais de donner confiance aux marques et aux parties prenantes. Le Design System est ainsi devenu un levier pour optimiser l'expérience utilisateur, l'efficacité opérationnelle et le pilotage stratégique.
Ce projet a renforcé ma conviction que structurer un écosystème complexe ne signifie pas le figer. Tout l'enjeu est de trouver le juste équilibre entre une gouvernance nécessaire et la flexibilité indispensable aux équipes. Chez Opella, ma plus grande valeur ajoutée n’a pas seulement été de concevoir des interfaces, mais de donner confiance aux marques et aux parties prenantes. Le Design System est ainsi devenu un levier pour optimiser l'expérience utilisateur, l'efficacité opérationnelle et le pilotage stratégique.
07 / visuals
07.1 / PRODUCT WEBSITE - Mobile FIRST
04.2 / PRODUCT WEBSITE - Aperçu desktop
04.3/ de sanofi à opella.com
04.3/ de sanofi
à opella.com
