Cinq idées pour une meilleure collaboration entre designers et développeurs

Le développement d’une application est un sport d’équipe qui nécessite la coopération de nombreux acteurs, y compris l’équipe de développement et l’équipe de design. Comme l’a dit Roger Staubach, célèbre quarterback des Dallas Cowboys dans les années 70 : « Dans tout sport d’équipe, les meilleures équipes font preuve de constance et d’alchimie. »

Le manque de collaboration entre l’équipe de design et l’équipe de développement entraîne une baisse d’efficacité et un allongement des délais de réalisation des projets. Des KPI contradictoires, le manque de compréhension du mode de pensée de l’autre, l’absence de réunions régulières et l’utilisation d’outils de collaboration qui favorisent une équipe au détriment de l’autre ne font qu’aggraver le problème. Analysons plus en détail tous ces facteurs et découvrons comment les entreprises peuvent améliorer la collaboration entre designers et développeurs.

Au lieu de s’appuyer sur des KPI traditionnels, les équipes de design et de développement ont tout intérêt à utiliser des KPI centrés sur l’utilisateur tels que le taux de conversion, les statistiques d’engagement, la durée de la session, le taux de rebond, etc. Ces KPI permettront aux deux groupes de se mettre d’accord et de se concentrer sur ce qui est vraiment important : l’expérience utilisateur.

Prenez le taux de conversion comme KPI pour un projet visant à créer des landing pages pour une nouvelle campagne. Au lieu de livrer le design de la landing page en X jours (design) et de la mettre en ligne en X jours (développement), les deux équipes se concentreront sur sa qualité du point de vue de l’utilisateur.

Les KPI traditionnels de ces deux équipes prennent rarement en compte le temps de collaboration ou d’attente, ce qui crée des conflits inutiles.

Voici quelques-uns des KPI courants pour l’équipe de design :

• Le temps nécessaire pour terminer le projet
• Le temps passé sur les révisions
• Les retours internes et externes sur le design
• Le nombre de projets achevés par trimestre

Avec ces KPI, les retours de l’équipe de développement sont préjudiciables à l’équipe de design, car cette dernière doit délaisser de nouveaux projets pour retravailler des écrans déjà rendus. Dans ce cas, leurs KPI les mettent en porte-à-faux avec l’équipe de développement.

D’autre part, voici quelques-uns des KPI courants pour l’équipe de développement front-end :

• Le nombre de lignes de code et de déploiements
• Le temps de cycle : le temps consacré à une seule tâche
• La stabilité et la simplicité du code

Les designs complexes et riches en fonctionnalités demandent plus d’efforts de codage à l’équipe de développement. Ainsi, chaque fois que l’équipe de design insiste sur de nouvelles fonctionnalités nécessitant un codage complexe, l’équipe de développement y voit un obstacle.

Si les KPI traditionnels ont leurs avantages, il faut s’assurer que les indicateurs d’une équipe n’entrent pas en conflit avec le travail de l’autre. Pour cela, il est possible d’accorder plus d’importance aux KPI partagés et centrés sur l’utilisateur.

Si l’équipe de design comprend les bases du développement front-end, elle sera capable de voir les choses du point de vue des personnes en charge du développement. Il en va de même pour l’équipe de développement. De plus, une équipe de design ayant une connaissance de base du HTML et du CSS créera également des designs en tenant compte des contraintes techniques. Comprendre le fonctionnement en coulisses d’une application, même s’il ne s’agit que des bases et des capacités de l’API, peut aider l’équipe de design à mieux appréhender les limites techniques.

En suivant quelques cours de base dans la discipline de l’autre, les équipes de développement et de design pourront parler le même langage. Ce type de formation croisée améliore la collaboration et amène les deux groupes à travailler ensemble pour trouver de meilleures solutions aux problèmes.

Coursera et Career Foundry proposent des cours spécifiques pour l’équipe de design qui souhaite apprendre le développement front-end. Ces cours couvrent les bases du développement web et enseignent le HTML, le CSS et le JavaScript : les trois langages que tous les professionnels du front-end utilisent dans leur travail. Ces cours abordent également le design UX et UI du point de vue du développement. L’équipe de design qui suit ces cours en ressortira avec une meilleure compréhension de la façon dont l’équipe de développement donne vie aux designs.

L’équipe de développement peut aussi tirer parti des cours de Canva et LinkedIn Learning. Ces cours couvrent la typographie et les associations de couleurs, mais abordent surtout les étapes du processus créatif et la façon de penser de l’équipe de design. L’équipe de développement qui suit ces cours acquerra une meilleure compréhension de ce qu’implique le design.

Ces cours demanderont du temps et des efforts supplémentaires aux deux équipes, mais cette formation croisée sera payante en matière d’efficacité. De plus, toutes les personnes qui suivront ces cours acquerront de nouveaux skills et de nouvelles certifications.

Un design system se compose d’un guide de style et d’une bibliothèque de modèles. Il s’agit d’une source unique de vérité remplie de composants réutilisables (menus déroulants, boutons de CTA, formulaires de lead…) et d’instructions claires sur la façon de les utiliser, qui réduit les écarts et les allers-retours entre les équipes de design et de développement. Avoir un système défini de composants réutilisés permet également de réduire la dette technique d’ingénierie que vous pourriez accumuler inutilement. Cela se produit lorsque l’on crée les mêmes éléments d’interface utilisateur à plusieurs reprises. La réutilisation des ressources permet d’accélérer les délais de livraison et d’assurer la cohérence de l’application.

Un guide de style est un ensemble de normes concernant tous les identifiants de la marque, tels que le logo de l’entreprise, la palette de couleurs, la police de caractères et le design du modèle. La plupart des entreprises commencent par un guide de style et évoluent vers une bibliothèque de modèles au fur et à mesure de leur croissance.

Un Une bibliothèque de modèles est une collection de tous les composants interactifs de votre design, notamment les boutons, les barres de navigation et les carrousels. Elle comprend également les définitions et descriptions de tous ces composants, indique clairement leurs usages et contient le code qui leur est associé.

Un design system combine ces deux éléments et fournit à l’utilisateur des informations complètes sur tout ce qui est inclus dans le guide de style et la bibliothèque de modèles, ainsi que les bonnes et mauvaises pratiques de design et les directives de mise en œuvre. L’équipe de design peut créer des concepts directement dans le design system par simple glisser-déposer de composants préenregistrés. L’équipe de développement peut alors voir le code associé à chaque composant et faire des retours à l’équipe de design dans le même espace.

Parmi les outils populaires de gestion de design system en ligne, on retrouve material.io, supernova.io, zeroheight.com et PatternFly.

Les réunions d’équipes transversales permettent de résoudre les conflits, d’améliorer la communication et d’accroître la compréhension entre les deux groupes. La mise en place de réunions récurrentes, hebdomadaires ou bihebdomadaires, entre les équipes de design et de développement les aidera à discuter des projets en cours, à lancer de nouveaux projets et à collaborer efficacement. 

Dans une webinar sur la collaboration entre design et développement, Nicki Snyder, manager de l’expérience design chez Pathwire, a souligné l’importance des réunions entre les équipes de design et de développement :

« Dans l’équipe de design, nous aimons vraiment créer des choses et nous partons du principe qu’elles vont fonctionner. Nous n’avons pas fait intervenir l’équipe d’ingénierie assez tôt dans le processus, ce qui a entraîné beaucoup de travail inutile. Cela aurait pu être évité si nous avions passé une heure à revoir ce que nous voulions, à définir le résultat final et à en discuter avec elle. »

Un product manager serait la personne idéale pour animer ces réunions et s’assurer que les deux groupes se concentrent sur l’amélioration de l’expérience utilisateur. Le product manager définirait également l’ordre du jour de ces réunions, qu’il s’agisse d’un problème spécifique ou d’un obstacle lié à un projet, de l’examen des designs d’une nouvelle fonctionnalité de produit ou d’une page web, ou d’une conversation sur une landing page peu performante. Cette réunion peut également se transformer en une session de travail au cours de laquelle un petit groupe composé de personnes du design et du développement résout un problème précis.

L’organisation de réunions de lancement et de sessions de travail permet à l’équipe de développement de savoir s’il est possible de réaliser ce qui est demandé dans l’application. Cela lui laisse le temps d’effectuer des recherches approfondies, si nécessaire, pour identifier les conditions requises afin de concrétiser la fonctionnalité ou le design. Se réunir au début du projet aide les product managers à définir des délais de livraison réalistes et fournit d’emblée des exigences à l’équipe de design.

Il incombera au product manager de veiller à ce que ces réunions ne se transforment pas en points d’étape, et à ce qu’elles n’aient lieu que lorsqu’un ordre du jour prédéfini aborde clairement un problème que les personnes participantes tenteront de résoudre.

Les principales conclusions de ces réunions peuvent servir à mettre à jour le design system. Dans l’idéal, ces réunions passeront d’un rythme hebdomadaire à bihebdomadaire, puis mensuel, et enfin ponctuel à mesure que le design system gagnera en fiabilité.

Le processus traditionnel de collaboration consiste en une transmission du projet de l’équipe de design à l’équipe de développement. Par exemple, l’équipe de design crée des écrans et partage le fichier image avec l’équipe de développement. Celle-ci fait ensuite part de ses commentaires sur ce qu’il est possible de faire ou non. L’équipe de design révise (ou refait) alors les écrans selon les besoins et les transmet à nouveau à l’équipe de développement, et ainsi de suite. Ce processus est très chronophage et implique de nombreux allers-retours avant la moindre mise en ligne.

Les outils de collaboration entre design et développement visent à transformer ce passage de relais en une véritable coopération. Les deux équipes pourront regarder le même écran dans un environnement où il peut être modifié en temps réel, ce qui éliminera les allers-retours de ce processus.

Il existe également des outils de collaboration entre design et développement tels qu’ Adobe XD qui sont davantage axés sur les besoins de l’équipe de design et facilitent le processus de transition, des maquettes filaires aux designs complets. Certains outils comme zeplin.io sont axés sur le développement et répondent à ses besoins en centralisant des extraits de code, des ressources et des spécifications pour différentes tailles d’écran. Zeplin s’intègre à Adobe XD, il peut donc être utilisé en complément pour aider l’équipe de développement.

Lors du webinar mentionné précédemment, Nicki a évoqué certains des défis liés au processus de transmission de projet. L’un de ces défis consistait à obtenir les retours de l’équipe de développement trop tard dans le processus. Elle a également expliqué comment InVision les a aidés à transformer cette transmission en une véritable coopération.

Outre InVision, il existe des outils tels que Bit et Figma qui aident les équipes de développement et de design à collaborer en temps réel. Ces outils peuvent également être intégrés à JIRA ou à d’autres outils de gestion de projet. Les tarifs varient en fonction du nombre d’utilisateurs et de projets, la fourchette de prix allant de 9,95 $ à 20 $ par utilisateur et par mois pour un abonnement professionnel.

En général, les discussions sur la collaboration entre design et développement portent sur les pages web et les applications, mais l’email peut également en tirer parti.

Grâce à une meilleure collaboration entre l’équipe de design et de développement :

• Les emails fonctionneront avec tous les types de boîtes de réception et d’appareils.
• La délivrabilité augmentera grâce à un code plus propre et plus simple.
• Les taux de clics augmenteront grâce à de meilleures mises en page.
• Les taux de désinscription diminueront en raison d’un engagement accru.

De plus, la mise en place d’un design system, associée à une formation au front-end et aux fonctionnalités conviviales de Pathwire, aidera l’équipe de design à créer des modèles d’emails ajustables et réutilisables à l’infini. Par exemple, la personne en charge du design peut configurer un modèle de newsletter, tandis que celle au développement peut s’assurer qu’il fonctionne avec toutes les tailles d’écran à l’aide d’outils tels que l’Inbox Display d’Email on Acid ou la prévisualisation des emails de Mailjet, et l’équipe marketing peut simplement ajouter de nouvelles images et remplacer le texte dans le même modèle chaque mois.

En parlant de newsletters, n’hésitez pas à vous inscrire à la nôtre. Nous vous enverrons des articles comme celui-ci, des guides détaillés, des nouveautés passionnantes de Pathwire et bien plus encore tous les mois.

Regardez notre webinar diffusé en direct : « Optimiser la relation entre le développement et le design grâce à Pathwire et InVision. »

Les personnes suivantes ont participé à cette discussion :

• Nicki Snyder, manager de l’expérience et du design chez Mailgun by Pathwire.
• Lawrence Norton, ingénieur logiciel chez Mailgun by Pathwire.
• Nick Karavas, consultant en solutions chez InVision.

Auteur·trice: Nicki Snyder Nicki Snyder is the Director of Experience Design for the CPaaS Design Group at Sinch. She leads our Product Design team and focuses on the UX and visual interface to optimize our product. She writes about design and brings insight into collaborating with developers on projects.