Design System

Contexte

Le client souhaitait unifier le design de ces différents outils et applications afin de partager une identité visuelle entre tous.

Description

C'est dans ce contexte que j’ai participé au sein d'une équipe de quatre développeurs et 2 UX, à la création du design system permettant à l’entreprise de bénéficier d’une identité visuelle forte et homogène à travers l’ensemble de ses outils.

Ce design system permet de faciliter les changements de charte graphique à travers l'ensemble des applications et permet également de faciliter l’intégration des nouvelles applications.

Phase de développement

Mon rôle a été d’implémenter les différents composants de ce design system. Pour cela, des maquettes ont été conçues par l'équipe UX en amont. Ces maquettes permettent de représenter le cahier des charges et le visuel de chacun des composants. Je me suis appuyé sur ces dernières pour implémenter chacun des composants. Pour cela j'ai créé un package NPM afin d'y exposer les composants React.js représentant les différentes briques du design system.

L’ensemble de ces composants sont documentés sur Storybook et testés sous Chromatic.

Le développement du design system a suivi une méthodologie Agile Scrum avec livraison de valeur à chaque itération. Ainsi, à chaque cycle, nous pouvions valider le travail réalisé et planifier les développements à venir.

J’ai également participé à la maintenance du design system. Des évolutions ont été apportées, en fonctions des besoins des développeurs utilisant le design system.

Des problèmes de performances ralentissant les applications utilisant le design system ont été observés durant le cycle de développement. Ainsi, j’ai participé à la détection et à la correction de ces problèmes de performance.

Stack Technique

Frontend

• React.js

• Typescript

• Storybook

• Chromatic

Résultats

La librairie de composant implémentant le design system sous forme de composant React.js est disponible par tous les développeurs sur NPM. Ces derniers peuvent se référer à la documentation Storybook afin de voir les cas d'usages des différents composants.

L'ensemble du design system est testé grâce à l'outil Chromatic, garantissant la détection d'éventuelles régressions avant la publication d'une version du package.

Le package est stable, régulièrement maintenu et utilisé par l'ensemble des applications du client.