La stratégie de VIOOH pour concrétiser notre vision produit

Dans cette édition de notre newsletter Open, Lisa, Senior Product Designer chez Source, partage des enseignements tirés de sa récente collaboration avec VIOOH : une plateforme d’achat/vente d’espaces publicitaires digitaux premium en extérieur (DOOH), lancée en 2018 par le groupe JCDecaux, pour transformer leur logiciel de gestion de campagnes publicitaires.

Peux-tu nous parler un peu de VIOOH et de ton travail avec eux ?

Pendant une année, l’équipe de Source.paris et moi-même avons eu la chance de collaborer avec VIOOH, entreprise pionnière qui propose une plateforme numérique reliant les annonceurs aux propriétaires d’espaces publicitaires physiques, en gérant intelligemment le processus d’achat et de vente.

Ensemble, nous avons travaillé à améliorer l’expérience utilisateur, affiner l’interface, et définir la stratégie de mise en œuvre de leur plateforme numérique.

Cela semble être un projet ambitieux. Quels étaient les objectifs ?

L’objectif initial était d’établir une vision unifiée, permettant d’améliorer l’offre existante tout en intégrant de manière fluide de nouvelles fonctionnalités, et en apportant un rafraîchissement visuel. Il s’agissait de regrouper trois outils existants, chacun s’adressant à une population d’utilisateurs différente.

Nous avons ensuite poursuivi la collaboration avec VIOOH pour concrétiser le projet : création d’une bibliothèque de design, lancement du processus d’implémentation en collaboration directe avec l’équipe produit et la talentueuse équipe design de VIOOH.

Quel regard portes-tu sur ce projet ?

Pour moi, c’était une aventure enthousiasmante : nous avions la liberté de concevoir une vision idéale centrée sur l’expérience utilisateur, le temps nécessaire pour bien comprendre le produit et construire des convictions fortes, et enfin, la satisfaction de résoudre le casse-tête de la mise en œuvre, une étape souvent traitée en interne.

Design to Code

Avec Source en charge du design et VIOOH responsable du développement, peux-tu nous expliquer les défis du passage du design au code dans ce type d’environnement ?

Il est courant pour les agences de livrer un concept de vision. Cependant, le plus grand problème, c’est que cette vision est souvent difficile à mettre en œuvre correctement.

Bien sûr, des facteurs évidents comme le temps, les finances, les ressources ou la résistance au changement peuvent avoir un impact important. Mais il y a un aspect souvent négligé : l’entreprise ne saisit pas toujours pleinement la vision derrière les designs proposés par l’agence.

Cela peut entraîner des malentendus ou une dilution du concept initial lors de la phase de développement.

Comment avez-vous évité ce genre de malentendu ou de dilution avec VIOOH ?

Pour résoudre ce problème, deux approches sont possibles : fournir une documentation très détaillée, ou maintenir une relation continue entre l’entreprise et l’agence.

Dans ce projet, nous avons opté pour la seconde option : nous avons poursuivi notre collaboration avec VIOOH pour entamer la phase de traduction des designs en code, et co-construire une approche de transformation.

Après une courte pause, nous avons repris en main le sujet avec des discussions approfondies et une planification minutieuse de la manière dont nous allions convertir les écrans designés en composants fonctionnels.

Peux-tu nous en dire plus sur le processus de planification ?

Nous avons planifié une série d’écrans introduisant les changements de manière progressive, sous forme de "releases". Chaque release visait à faire évoluer l’expérience de façon fluide, sans brusquer les utilisateurs ou générer une courbe d’apprentissage trop abrupte.

Suite à nos échanges avec l’équipe front-end de VIOOH, ces écrans ont ensuite été ajustés pour s’aligner à la fois sur leur roadmap et sur leurs méthodes de travail.

Il semble que vous ayez dû faire des compromis en design pour tenir compte des contraintes et des priorités. Comment avez-vous abordé cela ?

Oui, à ce stade, le plus difficile est de ne pas être perfectionniste. Je vois bien comment, d’un point de vue design, un simple texte ou un composant peut contribuer à créer une expérience utilisateur idéale. Mais les contraintes techniques ou les priorités produit ne sont pas toujours parfaitement alignées.

Cela dit, j’ai trouvé beaucoup de satisfaction dans la collaboration avec les équipes produit et front-end pour trouver les solutions les plus adaptées. Ces échanges étaient non seulement intéressants, mais aussi très stimulants, avec des personnes curieuses et motivées à explorer différentes options avec moi.

Tu mentionnais plus tôt la résistance au changement comme une raison fréquente des échecs de mise en œuvre. Comment cela s’est-il passé avec les équipes produit, business et autres chez VIOOH ?

VIOOH est une entreprise ambitieuse, avec des collaborateurs qui accueillent volontiers les évolutions et les nouvelles idées, et surtout, qui sont impliqués dans les processus de création. Résultat : très peu de résistance, à condition que les changements n’entravent pas la roadmap déjà définie.

Ce niveau d’adhésion de la part des équipes est vraiment rafraîchissant, et ça nous a permis de gagner beaucoup de temps pour initier rapidement la phase de transition.

Pour passer du design au code, avez-vous pu vous appuyer sur l’existant ou avez-vous dû repartir de zéro pour construire un nouveau front-end ?

Nous avons travaillé à partir de la base technique existante de VIOOH, car reconstruire un front-end complet représente un coût et un temps considérables. L’objectif était d’itérer à partir des frameworks actuels, en mettant progressivement à jour le code.

En collaborant étroitement avec l’équipe front-end, nous avons pris le temps de comprendre les frameworks utilisés, la structure des composants et les préférences de workflow à venir. Cela nous a permis d’élaborer une stratégie d’implémentation efficace, sans avoir besoin de tout reprendre depuis le début.

Release 1 – The Small Things

Peux-tu nous donner quelques exemples concrets du travail réalisé dans cette première release, que tu as appelée The Small Things ?

Des ajustements ont été faits sur des éléments comme le système de couleurs et la typographie, en affinant certaines zones spécifiques du produit pour renforcer la cohérence globale.

Cette première release avait pour objectif de poser des bases solides, en éliminant les erreurs les plus visibles, afin que les étapes suivantes en design et en développement ne soient pas ralenties par des problèmes existants.

Le résultat : une interface plus lisible, plus agréable à utiliser, et un code plus propre, qui fera gagner du temps à l’équipe VIOOH à long terme.

Comment s’est passée cette première release avec ces petits ajustements ?

Même si nous étions confiants dans la logique de notre plan de transition, le plus difficile a été de lancer les premiers changements de manière cohérente et bien alignée avec le design system, il fallait donc trouver le bon process.

Pour surmonter cette difficulté, le mieux a été de se lancer, de commencer à cartographier les changements en détail, jusqu’à ce qu'une solution adaptée émerge. En tant que designer, collaborer de si près avec un client dans ce type de moment peut être un peu inconfortable, mais chez VIOOH, l’environnement de travail était particulièrement favorable à ce type de processus dynamique.

Comment les Small Things ont un grand impact

On peut prendre l’exemple de la gestion du système de couleurs pour illustrer comment démarrer un projet de transformation, même avec une toute petite pièce du puzzle, peut avoir des répercussions bien plus larges.

Pour celles et ceux qui ne sont pas familiers avec le sujet, que recouvre exactement la notion de gestion du système de couleurs ?

Il s'agit de la manière dont est construite la palette de couleurs du produit, de sa mise en œuvre dans le code et de son utilisation concrète.

Cela implique de choisir entre différents frameworks, tels que l’échelle de couleurs de Tailwind (de 50 à 950) ou celle de MUI (de 50 à 900), entre autres, et de s’assurer que cette logique est bien intégrée dans la base de code.

Quels problèmes un système de couleurs permet-il de résoudre ?

Créer une palette structurée et un processus clair simplifie grandement la gestion côté VIOOH. Apporter de la structure est crucial, car les bibliothèques de code et de design ont tendance à devenir désorganisées au fil du temps. Cela permet d’éviter cet écueil.

Utiliser un framework apporte une structure aux designers dans Figma, et son intégration propre dans le code le rend plus lisible pour les développeurs.

Ainsi, lorsqu’un nouveau designer ou développeur rejoint le projet, il peut comprendre la logique derrière les choix effectués sans avoir à poser une multitude de questions.

Quels bénéfices cela apporte-t-il à l’équipe actuelle ?

On observe aussi des avantages nets pour les designers et développeurs déjà en place. Une gestion efficace du système de couleurs réduit les incompréhensions entre la maquette et le produit final.

S’accorder sur un framework, utiliser une nomenclature cohérente et produire une documentation claire permet à toutes les équipes de “parler le même langage”. Cela a déjà permis de fluidifier les échanges et de réduire les allers-retours.

La conséquence directe, c’est une meilleure précision et cohérence dans l’implémentation. Les designers de VIOOH savent à quoi s’attendre en termes de rendu, et les développeurs ont une documentation claire qui leur dit précisément quoi construire.

Et en quoi cette fluidité bénéficie-t-elle à l’entreprise ?

Pour l’entreprise, l’avantage immédiat, c’est un gain de vitesse dans la mise en production. Mais tout aussi important : cela prépare l’avenir. En effet, à mesure que le produit évolue, une bonne gestion du système de couleurs permet de faire évoluer la palette et les usages facilement, tout en gardant une trace claire dans la documentation.

Release 2 - The Medium Changes

Après avoir mis en place ces petits ajustements et solidifié notre mode de collaboration, nous sommes passés à l’implémentation de nouvelles fonctionnalités et à la transition vers l’interface utilisateur cible, une phase que nous avons appelée The Medium Changes.

Comment ces fonctionnalités ont-elles été identifiées, et quel processus a été suivi pour leur mise en œuvre ?

Les fonctionnalités ont été définies selon la roadmap et les besoins à la fois de l’équipe produit et de l’entreprise. Nous avons analysé ces besoins et les avons comparés à notre plan de transition, mais aussi, point crucial, à l’état actuel du produit, afin de déterminer quelles évolutions étaient pertinentes à ce moment-là.

Des écrans détaillés ont été conçus, en collaboration étroite entre l’équipe design et les développeurs front-end, pour anticiper et gérer les éventuelles contraintes. Une fois les designs validés, le passage en développement s’est fait de manière fluide, avec un accompagnement continu de l’équipe design.

Une fois le processus de transformation défini et enclenché pour les petites et moyennes évolutions, comme convenu, Source est sorti du projet.

Comment VIOOH poursuit-il la transformation en autonomie ?

Cette phase collaborative pendant la mise en œuvre a permis un transfert de connaissances fluide, donnant à l’équipe VIOOH une feuille de route claire pour continuer la transformation en toute autonomie.

Aujourd’hui, l’équipe VIOOH applique méthodiquement ce processus à chaque nouvelle fonctionnalité. Elle avance progressivement vers la vision produit, tout en limitant les perturbations et en respectant les contraintes et les besoins spécifiques de chaque équipe.

Release 3 - The Big Changes

Et enfin, peux-tus nous en dire plus sur la dernière phase, The Big Changes ?

La version finale du produit VIOOH intégrera des fonctionnalités majeures. À ce stade, le produit aura avancé selon le plan de transformation, permettant à l’équipe d’intégrer naturellement ces nouvelles fonctionnalités ambitieuses dans l’interface.

Par ailleurs, la bibliothèque de composants de VIOOH aura été enrichie, ce qui permettra d’intégrer rapidement les composants nécessaires lors du développement de ces fonctionnalités.

Pour conclure, quels ont été les principaux enseignements pour toi ?

Toutes les entreprises ne s’engagent pas dans des projets de transformation de cette ampleur, mais cette approche, à la fois rigoureuse et audacieuse, a permis d’unifier la vision produit en intégrant les idées émanant de toute l’entreprise.

Elle a suscité un véritable enthousiasme en interne, amélioré la qualité de l’implémentation, et renforcé la confiance des parties prenantes et des clients.

C’est un vrai plaisir de voir le travail de design de Source appliqué de cette manière, et nous sommes impatients de suivre la suite de l’aventure VIOOH.