Design System : 5 bibliothèques pour une contribution structurée sans perdre en créativité.
Après avoir mis en place le Design System en interne il y a maintenant 8 mois, nous nous penchons sur la collaboration et l’amélioration du système.
Le projet initial comprenait une grande bibliothèque avec l’ensemble du système (Tokens, Atomes, Icônes, Molécules, etc.). La complexité de cette organisation résidait dans sa gestion et sa contribution interne et externe. Nous souhaitions pouvoir s’assurer d’une cohérence globale sans trop limiter la créativité et la vélocité.
En fusionnant ces éléments, le risque de s’égarer dans des situations excessivement spécifiques devenait évident, malgré notre intention de rendre ce système aussi générique que possible.
Nous avons initié un processus de contribution comportant diverses catégories : est-ce que mon problème concerne un atome, une couleur ou un élément plus spécifique comme une carte ? S’agit-il d’un bug, d’une amélioration, etc. ? L’ownership du Design System n’était pas clairement définit, ce qui entraînait des confusions et des retards. Chaque équipe se trouvait dans l’obligation de modifier une molécule, car celle ne correspondait pas exactement. Le temps nécessaire à la contribution était considérable, ce qui décourageait les équipes à s’impliquer.
Séparation en 5 librairies
Nous avons convenu de séparer tout ce petit monde en 5 librairies bien distinctes. Avec un responsable pour chaque et des droits différents.
Librairie 1 : PuiK Token
Pour gérer les typographies, couleurs, spacings, sizing, shadows..ou tout autre élément qui caractérise le système. L’objectif étant que chaque atome devant être conçu suivra scrupuleusement ces règles.
Voyez ça comme les specifications d’une brique de Lego. Pour que celle-ci puisse s’emboîter avec une autre elle doit respecter un standard. Cette librairie définit donc les standards.
Cette bibliothèque est étroitement liée à l’identité de marque de PrestaShop, car elle reflète l’essence même de la marque. L’équipe Brand en est donc responsable. C’est à elle d’approuver ou de rejeter les modifications apportées aux couleurs ou à la typographie. En étroite collaboration avec le produit pour s’assurer de couvrir tous les besoins.
Les product designers et les développeurs agissent en tant qu’éditeurs, ayant la possibilité de proposer des modifications et des améliorations. La communauté et les partenaires sont les utilisateurs finaux, installant la bibliothèque
Les contributions à cette bibliothèque sont généralement limitées, à moins qu’il y ait un changement majeur dans l’image de marque.
Remarque : Étant donné que la bibliothèque Token est distincte, un utilisateur a toujours la liberté de dupliquer et de modifier les fondations pour appliquer une apparence totalement différente, sans perturber le reste. Cela ouvre la voie à la création aisée de nouveaux thèmes ou paramètres d’accessibilité.
Librairie 2 : PuiK Core :
À présent, les tokens sont établis, nous pouvons les appliquer aux composants atomiques.
En termes de contributions, c’est le produit qui est responsable des modifications et des améliorations, que ce soit pour corriger des bugs, améliorer des fonctionnalités existantes ou créer de nouveaux composants. Les développeurs et la communauté sont les éditeurs : ils peuvent soumettre des modifications et participer à l’amélioration du système.
Toutefois, la validation est stricte pour assurer le bon fonctionnement du système.
Pour ce faire, une équipe est chargée de prioriser les tickets, de valider les contributions sur GitHub et de modifier le fichier Figma. En suivant une liste de vérification et en respectant un processus de Go/no/Go, l’équipe veille à rester à jour.
Le principal défi pour cette équipe est de s’assurer que les atomes sont disponibles et couvrent tous les cas d’usage, permettant ainsi aux équipes de concevoir les molécules sans aucune contrainte.
Librairie 3 : PuiK Template, une nouvelle façon de concevoir
La grosse nouveauté vient de cette toute nouvelle librairie. Des molécules prêtes à l’usage. Tout comme Core dépend de Token, Template dépend de Core.
Cela ouvre un champ infini de possibilités. Pour les équipes, cela devient moins contraignant, offrant aux designers une plus grande liberté. Il est important de noter que l’homogénéité est respectée, éliminant ainsi le problème des boutons bleus sur une page et noirs sur une autre.
Ainsi une molécule doit être à 100% constituée d’atomes disponibles dans la librairie Core.
Mais alors comment contribuer à cette librairie ? Pour qui est-elle utile ?
Deux répertoires pour simplifier la contribution :
PuiK Template Official, une bibliothèque de modèles validés par PrestaShop, classés et organisés par domaine d’utilisation, avec une documentation détaillée.
PuiK Template Ext., Une bibliothèque communautaire de modèles où chacun peut ajouter ses “créations” pour les rendre accessibles à tous. Cette ressource n’est pas sous le contrôle de PrestaShop, mais elle permet d’accéder plus rapidement à divers éléments.
Cette bibliothèque permettra aux experts PrestaShop, aux développeurs et aux contributeurs d’accélérer le processus de développement en utilisant directement le code des composants. Elle agira comme un kit pré-assemblé, respectant pleinement les conformités de PrestaShop.
Librairie 4 : PuiK illustrations
Que ce soit pour les développeurs ou les designers une librairie d’illustrations disponibles permettra d’alimenter le produit en visuels respectant le branding.
Librairie 5 : En route vers le motion design
Nous aurions pu intégrer le motion design à la première bibliothèque de Token. Cependant, nous avons préféré travailler sur celle-ci de manière indépendante afin que les équipes puissent se concentrer pleinement sur cet aspect crucial. Le motion design joue un rôle majeur dans l’adoption d’un produit, c’est pourquoi PrestaShop a décidé de lui consacrer une bibliothèque spécifique. Pour le moment, seule l’équipe de Product Designers est responsable de ce domaine. Nous observerons son évolution au fil du temps
Les 3 règles d’or
- Une valeur token ne doit être modifiée que dans des cas très restreints et doit être validée à la fois par la marque et par le product designer responsable.
- Un composant atomique doit intégrer à 100% les valeurs des tokens et respecter l’utilisation spécifiée dans la documentation.
- Une molécule doit inclure à 100% les composants atomiques.
S’il n’est pas possible de concevoir une molécule car il manque un élément, ou une fonctionnalité, alors une contribution doit être faite à la librairie parente. Avec les tokens, on créer des atomes, avec les atomes on créer des templates.
Et la suite … ?
Fort de notre expérience avec notre système actuel, la prochaine étape passionnante consiste à entreprendre la migration des composants de Bootstrap vers Tailwind CSS dans le Core de PrestaShop. Cette transition représente une opportunité majeure d’optimisation, de flexibilité et d’adaptabilité accrues pour notre Design System.
Dans la prochaine phase, notre objectif sera de réaliser cette migration de manière transparente, en veillant à ce que chaque composant soit intégré harmonieusement dans notre éco-système pour améliorer encore l’expérience utilisateur et l’efficacité de nos marchands.
