Atomic Design : Retour d’expérience de Wivers

Comment et pourquoi les Wivers utilisent l'Atomic Design ?

« L’ATOMIC DESIGN est une approche du design modulaire conçue par Brad Frost afin de créer des Design Systems à partir de composants simples : atomes, molécules, organismes, templates et pages. »
Cette approche est applicable dans différents contextes, produits et typologies d’équipes. Nous aborderons ce sujet par un retour d’expérience de trois de nos Product Manager.

La principale motivation quant à la mise en place de l’ATOMIC DESIGN n’est autre qu’une volonté d’uniformiser un contenu, de renforcer l’identité visuelle d’une marque, de faciliter le code et d’assurer la maintenabilité d’une interface.

Ce qu'il faut retenir

Contextes dans lesquels les Wivers ont été amenés à utiliser l'atomic design

L’implémentation ou la maintenabilité de l’ATOMIC DESIGN peut intervenir dans différentes phases du développement d’un produit. Cependant, nous recommandons de le mettre en place dès sa conception.
Au sein de cet article nous étudierons 3 cas distincts : la refonte d’un site e-commerce et d’une application mobile ainsi que l’optimisation d’une plateforme web.

Le constat qui se dégage des REX est que la mise en place de l’ATOMIC DESIGN résulte souvent d’une volonté de simplificiation, d’uniformisation et de maintenabilité du code, fréquemment soulevés par l’équipe de développement.

Par exemple, dans le cas de la refonte d’une application mobile, la mise en place de l’ATOMIC DESIGN s’est faite intuitivement par l’ensemble de l’équipe. En premier temps, par une découpe très fine des user-story en composants, et cela sans connaitre la méthode ainsi que la mise en place d’un storybook.

Dans le cadre de la refonte d’un site e-commerce, il y avait plusieurs comportements différents pour le champs de l’email en fonction de sa position sur le site. Une incohérence souvent résultat du manque de spécifications lors de conception mais aussi d’une création progressive des pages d’un site internet.

Historiquement l’entreprise utilisait une librairie CSS/Javascript qui servait de Showroom (atomes et composants documentés dans cette librairie) ce qui a considérablement facilité l’apprentissage de l’ATOMIC DESIGN.

Le principal résultat observé n’est autre que la simplification des process pour l’ensemble de l’équipe agile ainsi que la création d’une véritable identité visuelle de la marque.

Quant à notre troisième cas sur l’optimisation d’une plateforme web existante, celle-ci était déjà décomposée en atomes, molécules et organismes mais non respectés (100 boutons différents). La mise en place de l’ATOMIC DESIGN a permis aux développeurs de suivre des guidelines sans « perdre de temps » sur les questions de design.

Par exemple, un changement de codes couleurs pouvait avoir une répercussion large contrôlée grâce à l’application de cette méthode : réutilisable et adaptable continuellement et dans le temps.

Quels ont été les gains de l'implémentation de l'atomic design dans vos missions ?

L’implémentation de l’Atomic Design est un véritable gain de temps sur la rédaction des user-story et assure une meilleure délivrabilité des équipes. Notamment, dans le cas d’user-story comportant des règles de gestion complexes.
Ce gain de temps peut également être effectif par le découpage des user-story de façon très fine, ce qui permet aux équipes de développements de ne se poser aucune question sur le fonctionnel et de se concentrer uniquement sur la technique: par exemple 1 tâche = 1 jour. Le Product Owner n’avait plus à spécifier à chaque fois le comportement de chacun des éléments.

La simplification et la standardisation liées à la mise en place de l’ATOMIC DESIGN permettent aux équipes de devenir de plus en plus autonome avec une meilleure réactivité dans la plupart des situations rencontrées : le Design system devient la référence auprès de tous les interlocuteurs. On constate également une accélération de la phase de tests par une standardisation du design et des actions de chaque molécule.

Ainsi, pour chaque comportement et spécification, l’utilisation de l’ATOMIC DESIGN a simplifié la vie des intégrateurs, des développeurs et des POs. Cette méthode a standardisé les process et opérations et a également permis une optimisation et maintenabilité du code.

Quelles ont été les difficultés rencontrées lors de l'implémentation de l'atomic design ?

Les principales difficultées que nos POs interviewés ont rencontré lors de la mise en place de L’ATOMIC DESIGN ont, pour la plupart, été d’ordre organisationnel.
Par exemple, par l’acceptation de l’organisme à « défaire » les process actuels tout en respectant les délais de fin d’année, mais également, en évoluant de manière progressive et constante avec le besoin de maintenabilité. La formation par l’ensemble des parties prenantes ainsi qu’une bonne diffusion des pratiques au sein de l’entreprise est également à considérer. Et enfin, même si les bienfaits de cette méthode sont dominants, il se peut que l’impact ne soit pas instantané sur la vélocité, ou bien sur le design et que les gains ne soient visibles qu’après 6 mois.

Exemple d’un manque de cohérence quant à l’utilisation de boutons d’action sur l’application Affiny. Une fois l’ATOMIC DESIGN mis en place sur l’ensemble de l’interface, la modification d’un élément s’est répercutée sur l’ensemble des pages.https://www.affiny.fr/


Merci encore à Patrick, Clément et Marcel de nous avoir partagé leurs retours sur expérience quant à l’ATOMIC DESIGN. Merci également à Jennifer pour sa collaboration sur le sujet ainsi que l’élaboration de l’infographie.

‍