UI review : comment synchroniser les process dev et design ?

1) Introduction

Dans cet article, Chloé et Justine, nos designeuses UX/UI présentent une étape essentielle du process design : l’UI review 🔍. Aborder ce sujet nous paraissait important car il s’inscrit dans l’une des principales valeurs de KNP : la qualité. En effet, les review d’interfaces permettent de :

• réduire les éventuels décalages entre les maquettes et l’intégration finale
• délivrer des interfaces harmonieuses (proportions, hiérarchie visuelle, etc.)
• renforcer la collaboration designer/dev
• développer l’acquisition de connaissances techniques pour les designers

2) Notre environnement

2.1) Contexte multi projet

KNP travaille avec plusieurs clients. Nous sommes deux designeuses et nous intervenons chacune sur deux projets.

Avant, le design intervenait en amont pour la conception des grandes lignes de l’application (identité visuelle et maquettes) et pour quelques grands ajouts fonctionnels.

Aujourd’hui, nous sommes intégrées en continu dans les équipes projet et nous participons aux différentes cérémonies Scrum (daily, sprint planning, rétro etc.). Cette approche agile améliore significativement la collaboration entre dev et designers.

2.2) Temporalités différentes

Nous intervenons sur les projets avec des rythmes différents :

• projet 1 (3 semaines) / projet 2 (1 semaine)
• projet 3 (2 semaines) / projet 4 (2 semaines)

Les développeurs et développeuses, contrairement à nous, sont à temps plein sur les projets.

💥 Premier obstacle : le planning
La plupart du temps, une UI review n’est pas bloquante sauf problème d’utilisabilité majeur. Tous ensembles, nous nous sommes posés différentes questions :

• Comment les UI review peuvent-elles s’intercaler dans les process dev ?
• Est-ce qu’il y aura un allongement de la durée de déploiement sur les features ?
• Est-ce qu’il y aura une latence supplémentaire sur les cartes dans Jira ou Trello ?

2.3) Contraintes techniques

💥 Deuxième obstacle : l’accès à l’intégration

Un·e designer UX/UI doit posséder quelques connaissances techniques de base pour s’intégrer dans un projet 🙌  Il est nécessaire de comprendre le processus de déploiement pour intercaler les UI review avec pertinence :

• les différents environnements de travail : local, staging, prod, etc.
• les différentes notions git : pull request (PR), branch, merge, etc.

L’environnement local sur lequel développe un ou une dev n’est pas accessible pour nous designeuses avant le déploiement de sa PR sur la staging (l’environnement de test).

Cela pose deux questions :

• Comment visualiser facilement le développement en cours pour donner du feedback ?
• Quel est le moment le plus opportun pour la revue d’interface ? 🤔

3) Nos propositions

Solution #1 : Heurio (Extension Chrome)

Outil de feedback UX, commenter directement sur les interfaces

✅ Avantages

• Précision des commentaires UX (critères ergonomiques, degré d’importance, etc.)
• Outil collaboratif
• Exhaustivité des feedbacks
• Review en autonomie sur la staging

❌ Inconvénients

• Chronophage
• Prise en main d’un outil supplémentaire
• Manque de spontanéité

Solution #2 : UI review en direct

Call designer/développeur; le dev passe en revue l’intégration avec la designeuse

✅ Avantages

• Rapide (15-30min)
• Feedback instantané
• Échanges sur les contraintes techniques
• Acquisition de connaissances techniques pour la designeuse
• Review en pair

❌ Inconvénients

• Visibilité sur l’interface (partage d’écran)
• Feedback pouvant être moins exhaustif

Solution #3 : intégrer une étape “UI amélioration continue”

Ajout d'une colonne ou tag dans le tableau de gestion de projet (Trello, Jira, Taiga, etc.)

✅ Avantages

• Temps de révision dédié
• Exhaustivité des feedbacks
• Review en autonomie sur la staging par la designeuse

❌ Inconvénients

• Interruption possible quand nous sommes sur un autre projet
• Traitement des retours après le déploiement sur la staging

4) Notre process dev/design

Les devs ont aussi leur moment de revue en pair aka la code review 🔍. L’objectif de cette étape est de s’assurer à plusieurs de la qualité du code d’une feature avant de l’inclure sur la master (branche principale). Un·e ou plusieurs dev relisent le code et commentent la PR.

L’UI review suit le même principe, l’intégration de l’interface est passée en revue et commentée par la designeuse pour vérifier la qualité visuelle. Cette étape peut donc se faire au même moment que la revue de code. Bingo 🎉 Ce moment est optimal car il permet de mutualiser les deux niveaux de contrôle de la qualité ! Il peut aussi arriver que l’UI review intervienne après le déploiement sur la staging, ce n’est pas figé.

⬆️ Update : depuis, nous réalisons régulièrement des UI review en direct avec partage d’écran. Ce format fonctionne bien, il est naturel et convivial ☀️

5) Conclusion

L’objectif était double : réfléchir au moment le plus propice pour caler les UI review afin d’améliorer les qualités graphiques et ergonomiques du produit final (proportions, cohérence, hiérarchie visuelle, etc.) et développer un autre point de convergence entre les deux disciplines.

Nos autres axes en cours pour développer la collaboration :

• passage de Sketch à Figma
• mise en place et enrichissement continu d’UI kit pour chaque projet
• développement de la compétence designOps
• développement des connaissances techniques des designers
  Certains de ces axes pourront faire l’objet d’autres articles 🚀

Si vous avez bien aimé cet article envoyez-nous un ❤ KUDO-Tweet sur 🐦