Concevoir un design system commun dans un contexte multi-produits

L’objectif : créer un Design System

En mai 2020, Pernod Ricard a démarré un programme stratégique de transformation digitale nommé Global Digital Acceleration dans le but de construire des outils métiers sous la forme d'applications SaaS qui soient dédiées aux différents métiers des collaborateurs du groupe à travers le monde (marketing, distribution, vente, promotion, etc.) Afin d’accomplir cet objectif, l’entreprise avait besoin de construire un Design commun pour tous ses produits.

Un Product Designer a été mandaté pour accompagner Pernod Ricard dans la création de ce Design System et d’intervenir sur les missions suivantes :

• Design du UI KIT & des maquettes
• Réalisation de la documentation
• Développement des composants & des interfaces
• Évangélisation du produit

Les chantiers menés par notre équipe

#1 La construction du Design System B2B2C

L’objectif premier du Product Designer était de construire le Design System et de résorber la dette design.

Afin de répondre à cet objectif, plusieurs actions ont été menées telles que :

• Modification & Optimisation des composants
• Création de nouveaux composants
• Audit d'accessibilité
• Création de prototypes interactifs

Pour favoriser la montée en compétences des collaborateurs sur ce sujet et une bonne prise en main du Design System sur le court,

moyen et long terme, notre équipe Produit a également conçu une documentation d'onboarding ainsi que des recommandations.

Légende : Design System B2B2C

#2 Un accompagnement des équipes produit

Notre Product Designer a été mandaté par l’équipe produit pour travailler sur un outil SAAS dédié à la collecte et à la validation des

données qui avait été développé avec le Design System précédent. L’objectif était d’intervenir afin de remplacer le Design System en place par celui créé par notre équipe.

Plusieurs actions ont ainsi été mises en place :

• Construction des maquettes à partir du Design System nouvellement créé
• Correction, amélioration ou création des composants selon les besoins
• Proposition de recommandations UX pour améliorer le produit

#3 La création et l’harmonisation de patterns & templates

Les produits SAAS de Pernod Ricard ont de nombreux patterns en commun (filtrage des données, création de campagnes, édition des

données, etc.). Afin d’éviter de travailler en silo, l'équipe Design s’est réunie pour proposer une harmonisation des patterns et des

templates de page pour chaque Key Digital Product :

• Inventaire de tous les patterns existants
• Benchmark de la concurrence
• Création de templates de page
• Évangélisation

#4 La construction du Zéroheight

Afin de communiquer sur son Design System à l’externe et en interne et aux collaborateurs de Pernod Ricard de travailler efficacement, il

était essentiel pour l’entreprise d’avoir une source de documentation présentant ses guidelines, ses patterns, ses composants mais aussi

ses bonnes pratiques.

Notre Product Design a donc créé et publié un Zeroheight contenant toute la documentation du Design System :

• Rédaction du contenu des pages
• Illustration de la documentation
• Création de gifs animés

Légende : Zéroheight

Les résultats obtenus

Suite à notre collaboration, Pernod Ricard a ainsi pu voir la création et la mise à disposition de leur Design System :

• Pour la première fois, 1 outil SAAS a été diffusé au niveau international au sein des équipes de Pernod Ricard avec le nouveau Design System
• Le Zeroheight, la source de documentation a été diffusée à l’externe
• La dette Design a été rattrapée : nouvelle organisation, composants optimisés, accessibilité respectée
• Un Design System créé est plus mature : réduction du TTM, amélioration de la qualité des designs produits, réduction des coûts de production
• Les patterns et templates de page ont été utilisés dans les produits SAAS