«Shift-Left» sur le design : améliorer la collaboration entre le développement et le design

Dans le monde en constante évolution du développement de produits logiciels, le concept de «shift-left» prend de l'ampleur. Traditionnellement associé au développement et aux tests de logiciels, cette pratique consiste à aborder les problèmes potentiels plus tôt que tard dans le cycle de développement. Toutefois, cette pratique ne se limite pas à la programmation et à l'assurance qualité (dont j'ai déjà parlé ici) ; elle s'applique également à la phase de design. Les organisations peuvent réduire les risques, améliorer l'expérience des utilisateurs et, en fin de compte, gagner du temps et économiser des ressources en encourageant une collaboration proactive entre l'équipe de développement et les designers.

Dans le cadre d'un projet de codéveloppement avec Newforma, j'ai eu l'occasion de collaborer avec Yannick, dont l'expertise en matière de design de produits et de collaboration a été inestimable. Il a gentiment accepté de partager ses idées pour cet article, apportant une perspective précieuse sur la collaboration entre les équipes de développement et les designers.

«Chaque entreprise fonctionne avec un mélange unique de processus et de stratégies, qui sont régulièrement réévalués et mis à jour dans par souci d'efficacité et de productivité. Notre entreprise, qui regroupe plusieurs équipes composées de designers UX/UI, d'analystes de l'assurance qualité, de gestionnaires de produits et de développeurs et développeuses, avait auparavant adopté une approche de travail basée sur les fonctionnalités ou les récits utilisateurs. Cette façon de faire impliquait des revues par les pairs, des revues d'assurance qualité et des revues de design pour chaque fonctionnalité, ce qui était bien intentionné, mais présentait des défis.

L'équipe de développement se retrouvait souvent dans une sorte de flou, jonglant avec plusieurs tâches en raison des revues asynchrones, ce qui prolongeait le délai d'exécution des récits utilisateur ou des tâches. Il était donc souvent nécessaire de modifier le code, parfois des semaines, voire des mois après l'écriture initiale. Cela constituait une source importante de frustration pour l'équipe de développement, qui devait répéter le processus pour chaque modification de l'assurance qualité ou du design, ce qui augmentait le temps d’exécution et laissait certains bogues non résolus en raison du cycle laborieux de correction du code post-fusion.» 

- Yannick Prévost, designer UX/UI chez Newforma

L'importance du «shift-left» dans la collaboration entre le développement et le design

L'expression «shift-left» est souvent associée au rapprochement du développement avec les tests ou la sécurité. Pourtant, dans le contexte du développement de logiciels et de la collaboration avec les designers, on entend par là briser le modèle traditionnel de transfert et intégrer plus tôt l'équipe de développement dans les discussions sur le design, tout en gardant les designers impliqués tout au long du développement. Au lieu d'un processus de travail séquentiel où le design est achevé avant le début du développement, le «shift-left» encourage un alignement continu entre les deux équipes.

L'accent mis sur la collaboration entre l'équipe de développement et les designers, principalement par des sessions de travail en binôme, présente plusieurs avantages :

• Alignement précoce : Des sessions de travail régulières en binôme développement-design garantissent que les deux équipes sont alignées sur les objectifs, les contraintes et les besoins des utilisateurs dès le départ, ce qui réduit la probabilité d'interprétations erronées par la suite.

• Économies de temps et d'argent : Il est beaucoup plus rentable de s'attaquer aux problèmes de design et de faisabilité technique dès le départ que de les résoudre après le début du développement. Les sessions de travail en binôme permettent une itération rapide et une rétroaction immédiate.

• Amélioration de la communication : Encourager une collaboration continue et structurée entre l'équipe de développement et les designers favorise une compréhension commune, ce qui conduit au développement d'un produit plus cohérent.

• Amélioration de l'expérience utilisateur : Donner la priorité aux efforts conjoints dès le début permet de créer des produits intuitifs et techniquement réalisables qui répondent aux attentes des clients, ce qui se traduit par des taux de satisfaction et de fidélisation plus élevés.

«Pour améliorer encore le processus, nous avons introduit deux réunions distinctes impliquant les gestionnaires de produits, les responsables de la qualité et les designers. L'objectif était de suivre les bogues ouverts, d'identifier les améliorations potentielles et de résoudre les problèmes éventuels. Ces réunions ont été complétées par des tests hebdomadaires en groupe afin de détecter les bogues mineurs, les corrections ou les cas particuliers qui auraient pu être négligés dans le processus précédent. Cette approche a permis de garantir l'intégration transparente de toutes les sections du code, réduisant ainsi la génération de bogues lors de la fusion.»

- Yannick Prévost, designer UX/UI chez Newforma

Initiatives que nous avons essayées pour «shift-left» sur le design

Pour améliorer l'efficacité et assurer une validation proactive des décisions de conception, nous avons mis en œuvre plusieurs initiatives visant à «shift-left» sur le design. L'intégration de la validation plus tôt dans le cycle de développement a permis de réduire les reprises, d'améliorer la collaboration et de simplifier l'ensemble du processus.

Faciliter la validation du design et la rendre plus efficace

Pour simplifier et accélérer la validation du design, nous avons exploité plusieurs outils qui ont optimiser le processus et amélioré l'efficacité:

1. Storybook : Exposer notre bibliothèque de composants dans Storybook a fourni un environnement interactif et centralisé où les designers et l'équipe de développement ont pu voir et tester les composants de l'interface utilisateur de manière isolée. Cela a permis d'accélérer l'itération et la validation des éléments de conception sans avoir à déployer une application complète.

2. Déploiement automatisé des demandes de fusion : Cet outil a permis le déploiement automatique de branches de demandes de fusion dans des environnements dédiés, permettant aux designers et aux parties prenantes de valider rapidement les changements sans intervention manuelle. Cela a permis de réduire considérablement les délais d'exécution et de garder les boucles de rétroaction restent courtes et efficaces.

3. Playwright : Nous avons introduit une solution de test automatisé de bout en bout, Playwright, pour permettre aux responsables de la qualité d'élaborer des tests E2E faciles à maintenir. Elle leur a permis de valider efficacement les flux d'utilisateurs critiques sans dépendre de l'équipe de développement, garantissant ainsi une rétroaction plus rapide et une meilleure couverture de tests.

4. DSM (Design System Manager) : DSM a permis à l'équipe de développement de construire des solutions sans avoir besoin de maquettes exactes en fournissant un système de conception structuré avec des composants réutilisables et des lignes directrices. Cela a permis une plus grande autonomie et une plus grande cohérence dans la mise en œuvre du design.

5. Slack : En tant que plateforme de communication centralisée, Slack a facilité la rétroaction instantanée, la collaboration et la résolution de problèmes entre les équipes. Il a permis de réduire les silos et d'assurer l'alignement de toutes les parties prenantes.

Ces outils ont contribué à :

• Des itérations plus rapides : Les outils automatisés de validation du design ont réduit le temps nécessaire aux vérifications manuelles, permettant aux designers de se concentrer sur l'amélioration de l'expérience utilisateur.

• Amélioration de la précision : Des solutions de tests personnalisées ont permis de s'assurer que les éléments de design répondaient aux exigences techniques et aux normes d'accessibilité dès le début du processus.

• Réduction des coûts : L'investissement dans des outils de validation dès le départ a permis de minimiser le risque de révisions et de remaniements coûteux à un stade ultérieur du cycle de développement.

• Simplification de la collaboration : Les outils de validation du design ont aidé l'équipe de développement à comprendre clairement les exigences des designers, réduisant ainsi les allers-retours et les malentendus potentiels.

En adoptant ces outils, notre équipe a pu simplifier le processus de validation du design, réduire les goulots d'étranglement et favoriser une meilleure collaboration entre l'équipe de développement et les designers. Cette approche nous a permis de livrer plus efficacement des produits de meilleure qualité tout en garantissant l'alignement sur les attentes en matière de design.

Utilisation de plateformes de maquettes centralisées

Pour améliorer la collaboration en matière de design, nous avons d'abord utilisé des plateformes de maquettes centralisées telles qu'InVision, qui offraient un moyen efficace de partager, de réviser et de commenter le design en temps réel. Cependant, au fur et à mesure que nos besoins évoluaient, nous avons migré vers Figma, qui offrait un environnement plus dynamique et collaboratif avec des capacités d'édition en temps réel, un contrôle des versions et une meilleure intégration avec les processus de développement. Cette transition a permis d'améliorer la collaboration et d'accélérer les itérations, rendant ainsi le processus de validation du design plus efficace. En conséquence, InVision a été progressivement abandonné au profit des fonctionnalités tout-en-un de Figma.

Rédaction de récits utilisateur efficaces pour le design

Nous avons adopté une approche structurée pour rédiger des récits utilisateur afin d'assurer un processus de développement harmonieux. Nos récits utilisateur suivaient le format classique en incluant le contexte, les critères d'acceptation (CA), les captures d'écran, les inclusions et les exclusions. Au départ, les captures d'écran ont été largement utilisées pour fournir des références visuelles. Cependant, nous avons découvert que les captures d'écran étaient des aperçus statiques dans le temps, ce qui conduisait souvent à l'implantation d'éléments de design désuets ou obsolètes si le récit utilisateur était repris plus tard.

Pour remédier à ce problème, nous avons remplacé les captures d'écran statiques par des liens Figma. Les liens Figma garantissent que les maquettes les plus récentes sont toujours accessibles, éliminant ainsi le risque d'implanter un design obsolète. Supposons qu'un récit utilisateur devienne désuet en raison de l'évolution des besoins en design. Dans ce cas, le lien peut être revu et le récit utilisateur peut être supprimé immédiatement, plutôt que de découvrir des incohérences plus tard dans le processus de validation. Ce changement a permis un implantation plus précise et une efficacité accrue dans la validation du design.

Automatisation de la livraison continue pour la validation du design

Le déploiement manuel d'une branche pour tester les éléments UI et UX était un processus fastidieux qui consommait un temps et des ressources précieux. Pour simplifier ce processus, nous avons développé des outils qui déploient automatiquement le logiciel dans son environnement dédié chaque fois qu'une demande de fusion (MR) est ouverte. Cette automatisation permet aux designers de valider leur travail sans effort en ouvrant la demande de fusion et en accédant à l'environnement déployé via un lien. D'un simple clic, ils peuvent rapidement tout tester sans les inconvénients d'un déploiement manuel. Cette automatisation a considérablement amélioré l'efficacité du processus de validation design et réduit les délais d'exécution.

Le «shift-left» est un investissement. La mise au point d'outils permettant de développer des logiciels plus rapidement conduit à fournir des logiciels de qualité plus efficacement. Les entreprises ne devraient pas hésiter à investir dans de telles pratiques. Comme le montre l'exemple de la livraison continue, sans investissement, les équipes peuvent se retrouver piégées dans des cycles inefficaces qui nuisent au progrès et ralentissent l'innovation. Les investissements proactifs dans l'automatisation et la validation garantissent que le logiciel est développé correctement dès le départ, ce qui minimise les erreurs coûteuses et augmente la productivité globale.

Encourager les rétroactions et les revues mutuelles

Pour favoriser une meilleure collaboration, nous avons encouragé les designers à répondre aux demandes de fusion (MR) de l'équipe de développement, en veillant à ce que l'intention de la conception soit maintenue tout au long du développement. De même, l'équipe de développement a appris à laisser des commentaires précieux dans les maquettes Figma, ce qui permet un processus de design plus itératif et cohérent. Cette boucle de rétroaction transversale permet de détecter rapidement les problèmes potentiels, d'aligner les attentes et de garantir une vision commune entre les équipes.

«Consciente de ces problèmes, notre équipe a entrepris de redéfinir le processus. L'objectif principal était de "shift-left" avec l'implication de l'assurance qualité et des designers, en les intégrant à l'étape de la demande de fusion. Cela a conduit à une transformation radicale, en simplifiant le processus et en réduisant considérablement les délais.

Cette nouvelle approche a rendu obligatoire la participation de l'assurance qualité à chaque demande de fusion. Les designers ont également été inclus en fonction de la nécessité de tester l'interface utilisateur ou l'expérience utilisateur. Cette stratégie a conduit à une amélioration significative des performances, marquée par une diminution du temps passé dans les boucles de processus, une baisse des niveaux de frustration et une augmentation notable de la détection et de la résolution des bogues.»

- Yannick Prévost, designer UX/UI chez Newforma

L'approche de l'équipe unique

Un principe clé pour favoriser une collaboration efficace est l'approche «One Team», qui met l'accent sur le fait qu'un rôle est un ensemble de responsabilités, et non une personne unique. Les responsabilités en design peuvent et doivent être réparties entre plusieurs membres de l'équipe, plutôt que d'être confiées à un seul designer. Cet engagement partagé favorise la responsabilisation collective pour livrer une interface utilisateur et une expérience utilisateur de haute qualité. En adoptant cet état d'esprit, l'ensemble de l'équipe devient responsable du succès du produit, ce qui crée un processus de développement plus dynamique et plus résilient.

Les avantages des sessions de travail en binôme

Ces efforts ont finalement abouti à une prise de conscience sur la valeur inestimable des sessions de travail en binôme entre l'équipe de développement et les designers. Au lieu de travailler en silos, nous avons réuni les deux disciplines pour qu'elles collaborent en temps réel sur des fonctionnalités réelles.

Par exemple, lors du développement d'une fonctionnalité essentielle, nous avons remarqué que l'équipe de développement et les designers avaient souvent des interprétations différentes de l'expérience utilisateur. Plutôt que de faire des allers-retours asynchrones, ce qui conduisait à un désalignement des attentes et à un remaniement, nous avons abordé le problème de front en organisant une session de travail en binôme.

Pendant la session :

• Le designer a guidé l'équipe de développement sur la dispositionç l'espacement et les modèles d'interaction.

• L'équipe de développement a testé la faisabilité et ajusté le desigb en temps réel en fonction des contraintes techniques.

• Le responsable du produit a clarifié les besoins de l'entreprise et s'est assuré de l'alignement avec les objectifs des utilisateurs.

Cette approche pratique nous a permis d'éliminer immédiatement les ambiguïtés et des problèmes qui auraient pu prendre des jours ou des semaines à résoudre de manière asynchrone. Au lieu d'attendre des boucles de rétroaction, nous avons itéré en direct, testé les interactions instantanément et sommes repartis avec une solution validée et prête à être développée.

Au-delà de la résolution de problèmes urgents sur design, les sessions de travail en binôme ont encouragé le partage des responsabilités en qualité UI/UX. Elles ont également favorisé le design exploratoire, ce qui nous a permis de tester rapidement de nouvelles idées sans les processus rigides qui peuvent ralentir l'innovation. En nous concentrant d'abord sur ce qui apporte le plus de valeur ajoutée (par exemple, les interactions avec l'utilisateur plutôt que la logique parfaite du back-end), nous avons livré de meilleures solutions plus rapidement et avec moins d'itérations.

«Lorsque notre processus existant a commencé à créer des frictions entre les équipes de développement, de design et d'assurance qualité, nous savions qu'un changement s'imposait. Notre première solution a consisté à mettre en place une réunion d'alignement hebdomadaire avec les gestionnaires de produit, les spécialistes de l'assurance qualité, les designers et les Team Lead des équipes de développement, ce qui a permis d'établir de meilleurs canaux de communication.

Nous avons ensuite transféré toutes les interactions à DevOps, pensant ainsi simplifier le processus. Cependant, nous avons découvert un problème majeur : les designers n'étaient pas systématiquement inclus dans les bons récits utilisateur, car il n'y avait pas de déclencheur clair pour l'implication du design.

La solution est apparue lorsque nous avons créé un canal de validation UI/UX dédié dans Slack. Ce canal est devenu notre point de départ central pour les discussions sur la conception, où les questions simples pouvaient être résolues par message tandis que les questions complexes donnaient lieu à une réunion. Cette approche flexible nous a finalement permis de mettre en place le processus efficace et clair dont nous avions besoin.»

- Yannick Prévost, designer UX/UI chez Newforma

Travail en binôme au-delà de Newforma : le cas d'Axify

Les avantages du travail en binôme ne se limitent pas à notre expérience chez Newforma. Un autre excellent exemple nous vient du développement d'Axify, où l'équipe a utilisé une approche hautement collaborative pour faire face à l'incertitude autour d'une nouvelle fonctionnalité.

Petite mise en contexte : Nexapp a développé Axify pour aider les leaders de l'ingénierie à obtenir rapidement une visibilité sur la productivité de leurs équipes et à transformer les goulots d'étranglement en initiatives d'optimisation de l'efficience.

Au cours du développement d'Axify, l'équipe a souhaité offrir aux utilisateurs une meilleure visibilité sur le cycle de vie de leurs tâches. Pour ce faire, elle a exploré la stratégie de cartographie de la chaîne de valeur (Value Stream Mapping ou VSM). Bien que prometteuse en théorie, ils n'avaient pas la certitude qu'elle répondrait réellement aux besoins des utilisateurs. À ce stade, leur idée n'est qu'une hypothèse.

Pour valider cette hypothèse, ils auraient pu adopter une approche conventionnelle : concevoir des maquettes, consulter les utilisateurs, recueillir leurs commentaires, itérer et finalement développer (ou non) la fonctionnalité. Au lieu de cela, ils ont choisi une approche plus collaborative et axée sur le travail d'équipe : développer un prototype ensemble. Pendant une demi-journée, quatre développeurs, un designer, un chargé de projet et un coach ont travaillé sur un seul écran pour concevoir la fonctionnalité.

Chaque personne avait un rôle précis à jouer au cours de la session :

• Le chargé de projet et le coach ont veillé à ce que la conception corresponde aux besoins des utilisateurs et au concept VSM.

• Les développeurs ont élaboré les bases techniques de la fonctionnalité.

• Le designer les a guidés dans la création d'une interface visuellement attrayante et intuitive.

À la fin de cette session de collaboration, la première version de la fonctionnalité de cartographie de la chaîne de valeur avait déjà été déployée en production.

Cette méthode de travail présente un avantage considérable : elle permet à l'équipe d'apporter de la valeur aux utilisateurs bien plus tôt dans le cycle de vie des tâches. La différence essentielle réside dans la collaboration synchrone et simultanée plutôt que dans un flux de travail séquentiel et échelonné.

Conseil : Au cours de ce type d'activité, l'équipe de développement doit mettre de côté les détails de l'implémentation et se concentrer sur ce qui apporte le plus de valeur ajoutée aux autres parties prenantes. Par exemple, lors de la programmation et du design en binôme, donnez la priorité aux aspects visuels et interactifs du code plutôt qu'à l'origine des données. Utilisez des données fictives si nécessaire pour valider efficacement les composants visuels et les éléments de design.

Conclusion

«Shift-left» sur le design, c'est plus qu'une simple approche ; c'est un état d'esprit qui favorise la collaboration, l'efficacité et l'innovation. Les organisations peuvent créer des produits de haute qualité qui répondent aux besoins leur entreprise et des utilisateurs en intégrant le design plus tôt dans le cycle de développement, en investissant dans l'automatisation et en favorisant la responsabilisation partagée. La clé du succès réside dans l'amélioration continue, la collaboration transversale et l'engagement à fournir la meilleure expérience utilisateur possible.

«Le nouveau processus de l'équipe a été un succès révolutionnaire, transformant notre façon de travailler en redéfinissant la collaboration, en réduisant la frustration et en améliorant l'efficacité. Cette réussite témoigne de notre engagement en faveur de l'amélioration continue et de l'innovation. Pour la suite, nous restons déterminés à affiner nos processus, à favoriser une culture de travail d'équipe et à livrer les meilleurs résultats possibles.»

- Yannick Prévost, designer UX/UI chez Newforma

Co-écrit par :

Vincent "Rocko" Bernier, développeur senior et Scrum Master chez Nexapp

Yannick Prévost, designer UX/UI chez Newforma