Travaux › Design System
Role
Timeline
Lead Designer
2018-2022
Contexte
Une divergence d'UI et d'UX préoccupante
Après le rachat de l'entreprise nantaise e-doceo en 2016, nous avons fait le constat d'importantes incohérences entre les produits de la suite Talentsoft, dans lesquels existaient déjà plusieurs années de dette graphique. Un audit mené en interne nous a permis d'identifier une dizaine de de chartes graphiques plus ou moins éloignées les unes des autres, et tout autant d'expériences utilisateur divergentes, dans une solution pourtant vendue comme étant une suite de produits SIRH intégrés.
Ayant déjà réalisé en amont le Design System d'e-doceo, c'est tout naturellement que je me suis porté volontaire pour conduire le projet.
↑ Ci-dessus : l'état des lieux en 2018 présentait l'évolution des divergences de designs au fil des années et leur représentation dans l'ensemble de la solution Talentsoft.
Première itération : Hyrule
Fondation du Design System en équipe réduite
« Hyrule » est le nom de code donné au Design System que nous avons initié en 2018 suite à l'audit, en référence au monde vidéo-ludique de Zelda constitué d'une multitude de territoires reliés par la plaine d'Hyrule au centre du royaume. À ce stade, notre équipe autour du projet se constituait seulement d'un développeur Front-end et d'un second designer UI, avec un ratio de 50% de notre temps alloué.
Malgré ces ressources limitées, notre détermination et nos expériences respectives ont facilité la conduite d'un inventaire de l'existant et de mettre à disposition une première plateforme en quelques semaines, qui évolua rapidement vers une vingtaine de composants fonctionnels accessibles à toutes les équipes produits.
↑ Ci-dessus : avant la pandémie, la communication autour du Design System à l'ensemble des collaborateurs passait (entre autres) par des écrans dans les locaux.
Deuxième itération : Morpho
Consécration du Design System en tant que produit
Fort des retours et de l'appréciation des premières équipes produits qui utilisèrent Hyrule, le besoin de faire évoluer le Design System revenait de plus en plus souvent au premier plan, en particulier car il existait encore d'importants freins techniques à l'adoption pour de nombreuses autres équipes. Le projet fut alors sponsorisé par le Chief Architect auprès du top-management, ce qui nous permis d'obtenir des ressources supplémentaires fin-2019, dont un architecte Front-end, deux développeurs Front-end, et un Product Owner.
Grâce à ce renforcement de l'équipe, le Design System a pu migrer rapidement vers Material-UI et React, et devenir un produit à part entière, partagé à tous via une plateforme Storybook. Afin de marquer la césure avec Hyrule qui était dorénavant déprécié, le projet fut renommé « Morpho », inspiré du papillon bleu qui se libère de sa chrysalide. Pour en assurer l'amélioration continue, nous nous sommes tournés vers un modèle contributif permettant aux autres équipes produits de participer, en instaurant des procédures de versioning et des réunions bimensuelles avec des développeurs-intégrateurs issus d'autres équipes.
↑ Ci-dessus : les guidelines de Morpho détaillent les bonnes pratiques qui permettent d'assurer une cohérence globale entre les produits.
De Sketch à Figma
Passé à temps-plein sur le projet, j'ai pu me consacrer à accompagner mes collègues designers sur l'utilisation de la librairie de composants grandissante sur Sketch, ainsi qu'à rédiger les guidelines qui accompagnent l'ensemble des collaborateurs.
Toutefois, à la fin de l'été 2020 j'ai pu profiter de notre transition vers Figma pour reprendre à zéro la conception de la librairie graphique pixel-perfect et parfaire la mise-en-place des conventions d'usage et de contribution.
En quinze jours j'ai pu produire 55 types de composants différents ainsi que leurs multiples déclinaisons, tout en exploitant les fonctionnalités les plus avancées de Figma afin d'améliorer le confort et la productivité des designers dans leur travail sur les maquettes. Cet effort à ensuite perduré avec les nombreuses améliorations successives du logiciel, nous permettant de garder une librairie riche et toujours plus facile d'accès.
↑ Ci-dessus : quelques-uns des composants de base de Morpho optimisés pour les Auto-Layouts et Variants de Figma.
Vous avez un Match !
Afin d'améliorer toujours plus la co-conception et de mettre en lumière les réussites du projet, j'ai soumis la proposition de poursuivre le développement de Morpho en étroite collaboration avec l'équipe en charge d'un nouveau produit en phase de recherche, « Match », qui serait à la fois un moteur et une vitrine pour notre Design System.
C'est ainsi que nous avons pu nous concentrer en 2020 et 2021 sur des sujets connexes qui étaient encore peu matures, tels que les micro-interactions et plus particulièrement l'accessibilité, avec pour objectif de remplir les critères AA des normes WAGC.
↑ Ci-dessus : Talentsoft Match (devenu Cegid Match) est historiquement le premier produit a avoir adopté à 100% les composants et directives du Design System.
Talentsoft rejoint Cegid
Les défis d'une convergence à grande échelle
A la rentrée 2021, le rachat de Talentsoft par Cegid nous a fait remettre en question beaucoup de choix pour constituer la base du « Cegid Design System » : en effet, l'un des nouveaux défis consiste à faire adopter le Design System à quatre fois plus d'équipes produits qu'auparavant, dont un grand nombre travaillent déjà avec Angular. Toutefois, il a finalement été retenu de conserver Material-UI et React comme standard et de donner la priorité à l'importation de la marque Cegid sur les fondations de Morpho.
Au cours du second trimestre 2022, la transition progressant convenablement avec la participation de nos nouveau collaborateurs, j'ai pu m'orienter en parallèle vers notre nouvel enjeu stratégique en effectuant des recherches pour décliner le Design System aux besoins et contraintes des applications mobiles Android et iOS.