◾️ Refonte Atomic

Pour commencer, j’ai effectué un audit des interfaces Seazon et j’ai répertorié les différents composants utilisés sur celles-ci avant mon arrivée.
Ensuite, j’ai défini les différents Design Tokens afin de renforcer la cohérence du Design System avec l’identité visuelle de la marque.
Dès lors, j’ai posé les bases de l’Atomic Library en créant ces Tokens (fondations) sur Figma : couleurs, typographies, icons, shadows, spacings, etc.
Puis, petit à petit et dans une suite atomique logique, j’ai crée les premiers composants et organismes jusqu’à l’obtention de véritables templates de pages.

Un extrait de la nouvelle Atomic Library

◾️ Documentation

Afin de passer d’une Atomic Library complète à un véritable Design System, j’ai documenté l’intégralité des éléments (Slite).
Le but était de leur donner un rôle et des règles qui permettront de créer les futures interfaces de façon logique et harmonieuse. 

Cette documentation avait vocation à être partagée avec l’ensemble des équipes produits et marketing.
Tout cela a permis de faciliter le travail des membres des équipes Produit et notamment la collaborations designers/développeurs.

Ci dessous, quelques extraits de la documentation Slite :

Grilles et règle de 8

◾️ Résultats

La création de ce Design System a notamment permis :

• d’établir un vocabulaire commun entre les équipe et améliorer la collaboration,

• de faciliter le processus de conception et de développement,

• de rendre l’expérience utilisateur (sur tous supports) harmonieuse et cohérente,

• de diffuser les principes de l’Atomic Design.