Comment l’étroite collaboration entre le développement et les expertises UX/UI améliore la qualité d’un projet ?

Dans une équipe digitale, il est essentiel que chaque métier soit impliqué de manière forte afin de répondre à ces objectifs. Une forte cohésion entre les équipes UX/UI et l’équipe de développement permet de s’aligner autour des mêmes enjeux de production.

La qualité d’une interface repose sur plusieurs critères au-delà des exigences techniques. Elle doit répondre à un besoin utilisateur précis par le biais d’un design ergonomique, facilement utilisable et manipulable. Donner du sens graphiquement à cette ergonomie permet de minimiser l’effort cognitif et d’avoir un impact positif sur l’expérience utilisateur. Dans une équipe digitale, il est essentiel que chaque métier soit impliqué de manière forte afin de répondre à ces objectifs. Une forte cohésion entre les équipes UX/UI et l’équipe de développement permet de s’aligner autour des mêmes enjeux de production. 

Pour illustrer notre propos, nous faisons un retour d’expérience sur le développement d’une application métier à destination des conseillers de vente d’une maison de joaillerie. Leur processus de vente mondiale, alors complexe et peu optimisé, avait besoin d’être totalement revu et retravaillé. L’objectif a été de le transposer au travers d’une interface facile à utiliser et auto-apprenante.
 

Gestion de projet : le choix de l’agilité

L’agilité est une approche de gestion de projet qui vient s’opposer à des approches plus traditionnelles (comme les méthodes de cycle en V ou en cascade). Elle place le commanditaire et le livrable au centre de la conception et de la production technique et graphique. Cette approche permet d’éviter l’effet tunnel des autres méthodes dans lesquelles le commanditaire exprime et valide un besoin en amont du projet. On parle d’effet tunnel lorsque l’on a peu de visibilité en ce qui concerne l’avancement d’un projet et par conséquent qu’on ne peut pas rebondir pendant cette phase d’avancement.

Avec cette méthode, nous avons pu mettre en place une structure de projet propice à la collaboration car elle implique de faire évoluer le design et le développement en parallèle, afin de répondre au besoin évolutif.

Lors de chaque nouvelle étape du projet (un sprint en méthode agile Scrum), toute l’équipe se réunissait pour préparer la production de nouvelles fonctionnalités. L’objectif était de répondre à des problématiques de conception en ayant à la fois le point de vue de l’équipe de développement et de l’équipe de création. À l’issue de chaque sprint, d’une durée de 2 semaines, nous avons mis en place des rétrospectives permettant d’échanger sur les aspects positifs et négatifs survenus sur cette période. Cette manière de procéder s’inscrit dans un des principes essentiels de la philosophie agile : l’amélioration continue.
 

Un objectif commun : la qualité

Dès le début du projet, nous avions l’ambition de créer une interface très qualitative. Tout d’abord parce qu’il fallait rester dans les codes du luxe empruntées par la marque et les conseillers de vente, ces derniers étant nos utilisateurs cibles. Il fallait donc réaliser une interface claire et facile à utiliser, tout en y insufflant un univers luxueux.

Cette ambition a été gérée de plusieurs manières. Il y a d’abord eu une réunion de présentation du concept et de l’univers graphique à tous les intervenants du projet. L’idée était de s’aligner à la fois sur notre ambition en termes de design, mais également au niveau du design d’interaction. Le design d’interaction permet de rythmer l’enchaînement des contenus et de rendre plus attrayant le déroulé des pages en valorisant les contenus et messages clés. Il offre également une logique de guide visuel et confère à l’utilisateur le sentiment d’une expérience qualitative et sans couture.

Pour répondre techniquement à ce besoin, nous avons utilisé la bibliothèque GreenSock (GSAP). Notre choix s’est porté sur cet outil car il permet de travailler sur des mouvements complexes tout en conservant des performances optimales et en étant compatible avec tous les navigateurs récents. Il permet de séquencer les mouvements, ce qui génère un rendu naturel et fluide. Nous avons utilisé cette bibliothèque avec Angular 7.

 

Design collaboratif

Au niveau du design, nous avions également à cœur d’utiliser des outils collaboratifs afin de faciliter le travail de chacun. Pour cela nous avons réalisé l’intégralité de notre design sous Sketch.
Ce logiciel maintenant devenu incontournable possède bon nombre de plugins qui donnent la possibilité de faire des passerelles entre les designers et les développeurs.

Concernant notre projet, nous avons utilisé MarvelApp qui, pluggé à Sketch permet de visualiser via un mode « handoff » le détail de chaque composant de l’écran. L’utilisation de MarvelApp nous a fait gagner beaucoup de temps au niveau du développement front tous les détails du type tailles des éléments, margin, couleurs, typographie utilisée et ses variations de graisses qui sont très accessibles. Cela nous a également fait gagner du temps côté design car les phases de recette ont été vraiment minimes. Nous avons également réalisé de nombreux tests, parfois en design, parfois en développement front afin de répondre aux demandes de chacun et d’aboutir à un résultat à la hauteur de nos ambitions.

 

Stack technique : le développement modulaire

Atomic design

L’atomic design est une approche modulaire qui permet d’appréhender une nouvelle manière de concevoir des interfaces d’application. Cette approche s’oppose aux processus de création linéaires, et permet de penser l’interface comme un ensemble cohérent d’éléments. Le découpage de chaque élément d’une interface permet de les assembler dans un contexte et de leur donner du sens.

Afin d’optimiser la qualité de notre production, nous avons fait le choix de cette approche car elle satisfait notre besoin de développer notre interface comme un ensemble graphique cohérent. En adéquation avec la méthode agile, l’atomic design a permis une évolution constante de l’interface en réponse à l’ajout de chaque nouvelle fonctionnalité. Nous avons ainsi développé une application visuellement constante et homogène.

Développement en modules

Les frameworks JavaScript comme React.js (2013), Vue.js (2014) et Angular 2+ (2016) ont permis l’évolution de nos manières de structurer le développement front-end des interfaces. Ils proposent une approche par composant qui conçoit l’application comme un ensemble d’éléments réutilisables. C’est ce concept, similaire à celui du design moléculaire, qui nous a permis de faire cohabiter Angular 7 et l’atomic design dans notre stack technique.

Un exemple en pratique 

Cette manière de découper l’interface en différentes particules a permis d’isoler des éléments récurrents de notre application afin de les rendre génériques et de les réutiliser dans différents contextes. Concrètement, en prenant l’exemple d’une carte produit, on constate que c’est un élément que l’on retrouve dans le catalogue mais également dans des écrans de wishlist, de gestion d’événements, de commande, etc.

Cette carte devient alors un composant que l’on contextualise en fonction du besoin tout en conservant le même design.

 

La synergie avant tout

La synergie entre les équipes passe d’abord par un bon état d’esprit et surtout par une bonne communication ! Malgré un projet assez complexe et multi-acteurs, le fait d’avoir été identifiées comme les interlocutrices principales pour nos équipes a rendu les échanges fluides et efficaces sur les différentes problématiques.

Au-delà des rituels principaux liés à la méthode Agile, nous avons créé un slack dédié au projet afin d’avoir un espace commun où échanger. Cela nous permettait à la fois de demander rapidement des sources comme des pictogrammes par exemple, mais également de prévoir des points de synchronisation en réel. Nous faisions également des points recette design/intégration au fur et à mesure de l’intégration des écrans afin de toujours garder un œil sur la qualité du livrable.

La synergie entre les designers et les développeurs est très souvent délaissée lorsqu’il s’agit de constituer un environnement de projet. C’est pourtant la réponse à de nombreuse problématiques de qualité et de productivité. En mettant en place différentes méthodes afin d’impliquer chaque domaine d’expertise tout au long du développement, toutes les compétences sont mutualisées, et ce au service de la qualité. 
​​​​​​​

Mélanie Guillot (Directrice artistique) & Héloïse Blin Dray (Ingénieur en conception et développement)

Article initialement paru dans Programmez! n°238