Aller au contenu principal
20.10

One Design System to rule them all

Parole d'expert

Comment accélérer sur le digital et améliorer l’expérience client quand on est le 2ème laboratoire dermo-cosmétique mondial à travers des filiales présentes sur 45 marchés et un réseau de distribution actif dans plus de 116 pays ?

Et surtout, comment y parvenir en garantissant une expérience consistante, attractive et performante tout en optimisant le time to market ?

C’est avec cet objectif que le groupe Pierre Fabre est venu nous voir pour construire ensemble le nouvel écosystème digital du groupe pour l’ensemble de ses marques.

PF Image

 

Pierre Fabre, grand groupe pharmaceutique français, est l’inventeur de la dermo-cosmétique et donc particulièrement présent dans les domaines de la santé et la beauté.

En 2020, dans le cadre d’une démarche globale d’accélération sur le digital, Pierre Fabre fait appel à l’expertise de l’agence Wide pour l’accompagner sur l’optimisation de son expérience client.

Les objectifs étaient alors de :

  • Developper la présence online des marques du groupe
  • Renforcer le territoire de marque, l’engagement et la conversion
  • Développer la connaissance client

Ainsi, notre rôle a été d’imaginer et de concevoir les parcours omnicanaux de l’ensemble des marques du groupe tout en intégrant une logique de rationalisation afin d’optimiser les couts et le time to market.

Pour cela, nous avons décidé de construire un design system qui allait nous permettre de déployer une expérience client cohérente et performante sur l’ensemble des points de contact digitaux des différentes marques du groupe.

Marques PF

 

Un des enjeux majeurs était donc d’adopter une démarche de rationalisation afin de pouvoir :

  • INDUSTRIALISER la réalisation des sites de marque au niveau mondial
  • RÉUTILISER les contenus sur tous les canaux et faciliter la localisation en fonction des pays
  • OPTIMISER l’expérience consommateur, la synergie entre les dimensions e-commerce et la marque
  • MUTUALISER les outils, les ressources techniques et les expertises
  • MULTI MARQUE afin de garantir la pérennité de la plateforme et s’inscrire dans la stratégie de croissance du groupe

Nous avons ainsi travaillé à l’intégration du design system au sein d’une site factory afin de pouvoir rendre immédiatement et facilement utilisable l’ensemble des assets de marque.

Les enjeux de performance et de conversion étaient également au centre de nos préoccupations. La plateforme devait permettre d’améliorer le ROI et contribuer à la croissance des ventes sur le canal digital pour toutes les marques du groupe PF.
 

Une démarche user centric

En terme de méthodologie, nous avons vraiment souhaité intégrer les utilisateurs finaux tout au long du projet. Nous avons notamment conduit une phase de recherche approfondie afin de comprendre les parcours des utilisateurs au sein de l’écosystème existant, leurs besoins et leurs difficultés. Nous avons ensuite pu imaginer et concevoir de nouveaux parcours plus efficaces et les tester auprès de plus de 500 utilisateurs pour s’assurer de leur pertinence.
 

Le Core Model

Pour construire le premier socle du design system, nous avons travaillé avec deux marques pilotes emblématiques et représentatives de l’ensemble des marques du groupe : Eau Thermale Avène (ETA) et René Furterer (RF)

Afin d’adresser les enjeux de rationalisation, nous avons imaginé non pas un design system unique mais une logique basée sur un design system master (que nous avons appelé Core Model) qui serait ensuite décliné pour chacune des marques.

Nous avons fixé un ratio de 80% d’éléments génériques commun à toutes les marques versus 20% d’éléments spécifiques marque incluant notamment l’identité graphique et certains besoins fonctionnels spécifiques.

Brand design systems

Les design system des marques sont créés à partir d’une duplication du Core Model mais les contenus génériques (descriptions, spécifications des composants etc…) restent stockés uniquement dans le Core Model grâce à la fonctionnalité referenced content de Frontify
 

Cycle de vie du Core Model

Cette approche Core model nous permettra également de mutualiser les futures évolutions et d’entrer dans une démarche d’amélioration continue qui profitera à l’ensemble des marques.

Core Model

Pour simplifier, notre Core Model consiste donc en une bibliothèque de composants et de templates associée à des guidelines d’utilisation et intégrée au sein d’une plateforme dédiée aux design systems : Frontify

Design system

Nous avons utilisé les principes du design atomic pour structurer les différents éléments du Core Model
 

Les étapes de la conception

Afin de construire le Core Model ainsi que les design systems des différentes marques, nous sommes passé à travers un certain nombre d’étapes clefs :

  • Définition de la stratégie d’expérience et des grands principes qui allaient guider notre travail de conception
  • 5 sprints design pour concevoir l’ensemble des templates nécessaires pour adresser chacun des parcours utilisateurs en s’appuyant sur les deux marques pilotes
  • Chaque bloc ou composant est identifié puis rationalisé dans une démarche Core Model
  • Les templates et blocs sont ensuite déclinés en maquette graphique Mobile et Desktop pour chacune des marques

L’ensemble des éléments du core model ont bien sûr été conçus en responsive design et intègrent une couche d’optimisation pour le SEO ainsi que des capacités de customisation permettant d’intégrer facilement les différentes identités de marques.

Core Model Avène & Furterer

 

Afin d’héberger le Core Model et les design systems des marques, nous avions besoin d’une plateforme robuste et flexible qui pourrait s’adapter à l’architecture spécifique que nous avions imaginé pour ce projet.

Le rôle de cette plateforme est :

le rôle de la plateforme

Nous avons choisi de nous appuyer sur la solution Frontify car elle répondait parfaitement aux besoins et nous permettait également de :

  • Contrôler les coûts de développement et de maintenance grâce à son approche SAAS
  • Bénéficier d’un outil qui s’enrichit en permanence
  • Nous apporter un cadre et nous appuyer sur les bonnes pratiques du marché
  • Bénéficier d’un support dédié et d’une communauté engagée
  • Une intégration facilitée avec les outils tiers que nous utilisons (sketch, git, invision…)

 

Product detail template


Résultat

Un socle solide et performant disponible pour l’ensemble des marques et de ses partenaires qui servira de base pour développer l’ensemble de l’écosystème digital des marques pendant les 3 prochaines années.

one core model


Une collaboration vertueuse

Un tel projet ne peut voir le jour que si l’ensemble des acteurs partagent une vision commune et un engagement sans faille tout au long du projet. Nous avons eu la chance de travailler avec un client qui nous a fait confiance et avec qui nous avons pu construire une véritable relation de partenariat. La rigueur et le professionnalisme de l’équipe projet Pierre Fabre et des marques pilotes avec qui nous avons collaboré ont été des facteurs clef dans le succès de ce projet.

We Create Continuous Relationship Experiences ! 

Rencontrons-nous!