Contexte
Lors d’une réunion de communauté, Youssef NAJIBI nous a partagé son expérience en tant que Product Owner UX pour un acteur européen du crédit à la consommation présent dans 5 pays.
Les 12 équipes Produit de cet acteur développent entièrement l’ensemble des fonctionnalités front et back office qui permettent de prendre en charge l’ensemble des étapes de la vie d’un client : depuis la conversion des prospects jusqu’au remboursement des crédits consentis, en passant par l’ensemble des contrôles nécessaires à l’obtention du crédit.
Un écosystème a aussi été créé avec plusieurs types de partenaires afin de maximiser la captation des prospects, financer les crédits, mais aussi pour proposer ces crédits en marque blanche ou encore les intégrer directement dans des tunnels d’achat de boutiques en ligne.
Les utilisateurs des Produits sont donc assez variés : les utilisateurs B2C accèdent aux front de vente et d’espace client sur leur navigateur ou sur leur smartphone, les employés back office et les partenaires ont chacun leur propre outil d’administration et de pilotage.
La cartographie applicative compte plus de 130 applications en microservice, avec un effort constant de rationalisation et de standardisation des architectures applicatives et techniques. Un effort similaire est nécessaire sur la couche de présentation pour offrir aux utilisateurs une expérience unifiée tant sur le plan visuel que fonctionnel, et des outils d’intégration prêts à l’emploi pour les équipes de développement.
Youssef a dans cet objectif pris en charge avec les équipes de design, la conception d’un design system et d’un atomic design. Ces deux outils partagent des objectifs communs, mais ils se complètent de manière distincte pour structurer et harmoniser les designs front-end.
Voyons ce qui constitue ces outils, leurs apports et limites à leurs utilisations.
Le Design System : une bibliothèque centralisée
Un design system, pratique apparue dans les médias traditionnels dans les années 70-80 et améliorée constamment par la suite, est une collection vivante de composants, de règles, et de principes qui guide la conception et le développement des interfaces. Il comprend :
- Une Charte graphique (couleurs, typographie, icônes).
- Des composants UI réutilisables (boutons, formulaires, modales).
- Des guidelines d’utilisation pour favoriser une cohérence entre produits.
Le design system sert de source unique de vérité, permettant aux équipes produit, design et développement de travailler ensemble plus efficacement
Atomic Design : une méthodologie modulaire
L’atomic design, introduit par Brad Frost, repose sur une approche modulaire pour construire les interfaces. Il s’articule en cinq niveaux :
- Atomes : les éléments de base (boutons, champs de saisie).
- Molécules : assemblages simples d’atomes (un champ de recherche avec bouton).
- Organismes : combinaisons plus complexes (en-têtes, barres latérales).
- Templates : structures globales avec des composants placés.
- Pages : instances finales, prêtes à être utilisées.
Cette méthodologie encourage une conception scalable et maintenable, où chaque élément peut être réutilisé et ajusté indépendamment.
Apports des deux approches
Combinés, ces deux outils permettent d’apporter de nombreux avantages :
- Cohérence visuelle et fonctionnelle : les composants standardisés évitent les disparités entre produits.
- Gains de temps : la réutilisation réduit les doublons et accélère les développements.
- Collaboration renforcée : designers et développeurs partagent une base commune, favorisant une meilleure communication.
- Adaptabilité : l’approche modulaire permet des ajustements rapides en réponse aux besoins changeants.
Limites et défis
Toute médaille ayant son revers, il faut prendre conscience des contraintes que ces outils apportent :
- Mise en place initiale coûteuse : construire un design system ou adopter l’atomic design demande un investissement en temps et ressources.
- Rigidité potentielle : une standardisation excessive peut freiner la créativité ou empêcher des ajustements spécifiques.
- Maintenabilité : ces systèmes nécessitent une gouvernance et des mises à jour régulières pour rester pertinents.
Retour d'expériences chez notre acteur du crédit à la consommation
La mise en place des Design System et Atomic Design chez notre client s’est déroulée avec succès, mais a reposé sur des fondamentaux d’excellence opérationnelle multiples :
- La collaboration : cette entreprise a une très forte culture de la collaboration qui a été essentielle au succès de la démarche. En effet, cela implique un alignement des visions de différents acteurs poursuivant des objectifs et des enjeux variés. Les équipes marketing qui construisent une identité de marque, les équipes design qui cadrent le brief design et produisent les éléments d’interface, et les équipes Produit qui intègrent ces éléments et doivent les adapter pour satisfaire à cette nouvelle exigence. Une collaboration étroite et fréquente est nécessaire entre tous ces acteurs pour négocier et valider à chaque étape de ce processus créatif et d’implémentation.
- La standardisation : qui est nécessaire à la fois sur le plan technique et fonctionnel des Produits. Techniquement, l’utilisation des mêmes frameworks, implémentés avec des règles communes, facilite l’établissement de règles de design et leur implémentation. Fonctionnellement, un alignement sur des chaînes de valeur et des processus opérationnels communs entre tous les versions des Produits (pour les clients B2C, sur les différents pays, avec les partenaires B2B), permet d’établir une expérience utilisateur unifiée entre tous les Produits.
- La planification stratégique : l’investissement dans l’amélioration de l’expérience utilisateur est une décision qui est prise au regard des autres opportunités d’investissements existantes. Elle doit alors être défendue et comprise par l’ensemble des décideurs de l’entreprise afin d’être lancée et soutenue dans le temps. Dans le cas de notre client, cet investissement a été décidé à un moment opportun, où une masse critique en termes de Produits, typologies d’utilisateurs, et complexité technique existante justifiait la mise en place d’un cadre supplémentaire pour obtenir des économies d’échelle sur l’implémentation tout en maximisant la satisfaction des utilisateurs.
Conclusion
Le design system et l’atomic design sont des outils puissants pour aligner le design des fronts applicatifs d’une entreprise. Tandis que le design system structure les éléments communs, l’atomic design fournit une méthodologie claire pour construire des interfaces flexibles et modulaires. Leur mise en œuvre exige des efforts initiaux, mais les bénéfices en termes de cohérence, de rapidité et de collaboration en font des incontournables pour toute entreprise souhaitant professionnaliser son approche de design.
