Comment Volkswagen Group Services GmbH a amélioré la communication design-dev avec Figma et FigJam

Volkswagen Group Services, une entreprise du groupe Volkswagen basée à Wolfsburg, en Allemagne, fournit une gamme de services aux marques Volkswagen, de la R&D à l'approvisionnement. Leur équipe de développement commercial a une mission très stratégique : créer de nouveaux business models, les transformer en produits et les préparer à entrer sur de nouveaux marchés.

Des projets d'une telle envergure nécessitent une collaboration transverse intense, et il n'est pas facile de mettre tout le monde sur la même longueur d'onde. Autre souci : Volkswagen Group Services avait récemment commencé à mettre en place une plus grande flexibilité des lieux et des horaires de travail, à titre expérimental.

Ainsi, lors du lancement d'un projet majeur, il est devenu nécessaire de trouver une nouvelle façon de collaborer à même d'éviter les écueils entravant habituellement le développement de produits. Avec Figma et FigJam, cet objectif a été atteint.

Figma et FigJam fluidifient la communication design-dev

Volkswagen Group Services s'est donné pour mission de créer une plateforme de client à client pour la location d'espaces de stockage. L'idée était de construire une marketplace où les utilisateurs peuvent à la fois proposer et rechercher des espaces de stockage disponibles dans tout le pays.

« Notre objectif est de construire un réseau mondial pour les entreprises de tous les secteurs, et dont la création de valeur dépend de la logistique. » – Stefanos Tsoutis, venture builder and business mentor chez Worage, Volkswagen Group Services.

Mais d'abord, il fallait concevoir une interface et créer un MVP pour la nouvelle plateforme, tout en définissant les attributs de marque ainsi que le modèle économique de base. Cela nécessitait des contributions importantes de leurs équipes de design, d'expérience utilisateur, d'expérience client et de développement.

« L'objectif était de créer à partir de zéro un modèle commercial et un produit à faire évoluer continuellement, de positionner une marque sur le marché et de lancer un MVP. » – Simon Elvers, intrapreneur and product owner chez Worage, Volkswagen Group Services.

Avec autant de personnes impliquées, les erreurs allaient être faciles à faire et coûteuses à corriger. Volkswagen Group Services devait optimiser le handoff entre les équipes de design et développement.

L'équipe design a créé un prototype de l'application dans Figma, incluant un design system, des pages détaillées et des animations. De plus, elle a cartographié méticuleusement chaque opération et condition impactant le parcours et fournit un guide visuel pour les développeurs, les designers et les parties prenantes.

« Le défi a été de créer une visualisation de l'application et d'atteindre une compréhension commune du fonctionnement de la plateforme en termes de parcours, de transfert de données et d'assurance qualité. » – Hendrik Surma, lead software architect chez Worage, Volkswagen Group Services.

C'était un bon début, mais les chefs de projet avaient besoin d'un moyen de brainstormer avec les équipes dès le début et d'obtenir des retours. Pour ce faire, une communication soutenue et en temps réel entre les différents sites était nécessaire. Le tableau blanc collaboratif en ligne de Figma, FigJam, s'est avéré idéal, car il relie facilement les écrans aux équipes réparties sur différents sites. Les développeurs ont pu intervenir tôt et identifier les défis opérationnels qui pouvaient impacter la fonctionnalité, afin de pouvoir chercher des solutions ensemble. Cette collaboration étroite a permis d'éviter de nombreux problèmes.

L'utilisation de FigJam en parallèle avec Figma a également permis de visualiser le design du produit de manière innovante. L'équipe a documenté des parcours utilisateur complexes dans FigJam et les a liés aux fichiers, pages et frames de référence dans Figma. Cela facilite la compréhension des parcours et l'accès à davantage d'information pour les différentes équipes.

« La visualisation via FigJam et Figma a joué un rôle crucial dans la coordination entre designers, développeurs, product owners et parties prenantes, ce qui favorise une compréhension partagée des subtilités du projet. » – Laura Lake, product designer chez Worage, Volkswagen Group Services.

Rapprocher le design du développement

En combinant la représentation visuelle des interactions du produit et la documentation intégrée, les développeurs ont pu comprendre précisément comment l'information circule entre les différentes sources et destinations de données. Cela leur a permis d'optimiser les processus et de minimiser le besoin de requêtes au serveur, limitant ainsi les coûts opérationnels.

Les designers ont également utilisé des visualisations pour créer une expérience utilisateur cohérente et aboutie. Ils ont pu voir quelles interactions étaient associées à différents call-to-action pour localiser les écrans manquants et identifier rapidement les zones nécessitant une amélioration.

L'équipe de gestion de projet en a également bénéficié. En règle générale, le suivi rigoureux des projets par Volkswagen Group Services ne servait que de référence : les équipes devaient interpréter correctement les tâches à accomplir, puis déterminer où trouver le contexte et les ressources nécessaires. Cette fois-ci, l'équipe de Volkswagen Group Services a utilisé le plugin JIRA de Figma et Atlassian Suite pour lier les tickets de gestion de projet à des écrans et fonctionnalités spécifiques. L'efficacité a fait un bond en avant.

Auparavant, le lien pour les écrans devait être copié manuellement dans les tickets JIRA. Cela rendait la tâche fastidieuse pour les développeurs, qui devaient alterner entre JIRA, Figma et VS Code. La nouvelle intégration JIRA a rendu le contexte nécessaire facilement accessible. Cela a permis aux product owners, aux développeurs et aux chefs de projet de surveiller facilement l'état des composants individuels et des fonctionnalités, rationalisant davantage la gestion de projet.

Les product owners considéraient les visualisations comme un outil pour prendre rapidement des décisions éclairées sur les fonctionnalités à prioriser. Globalement, cette approche intégrée s'est avérée plus efficace que l'utilisation d'outils dissociés. Les visualisations étaient un moyen intuitif pour les équipes d'affiner leur vision et de communiquer l'ensemble des informations à toutes les personnes qui contribuaient à la création de Worage.

Dev Mode améliore le handoff aux développeurs

De nombreux défis liés au handoff ont été résolus en 2023 avec l'arrivée de Dev Mode, un espace dans Figma doté de fonctionnalités qui aident les designers et les développeurs à traduire les designs en code plus rapidement. Dev Mode dispose d'un espace playground qui permet à l'équipe de développement de Volkswagen Group Services d'obtenir un aperçu des différents composants et de leurs variantes avant le développement, ce qui élimine les incertitudes liées à leur comportement.

Dans la section des ressources, les développeurs de Volkswagen Group Services peuvent facilement télécharger des icônes, des images et des vidéos pour les écrans concernés. Ainsi, il n'est plus nécessaire d'échanger d'assets supplémentaires. L'outil centralise tout, faisant des écrans et des pages prêtes au développement une source fiable pour les designers et les développeurs.

L'équipe Volkswagen Group Services a également découvert que le nouveau mode de comparaison réduisait les bugs de développement en montrant clairement les modifications apportées aux écrans. Cela permet d'éliminer les suppositions et la surcharge cognitive pour l'équipe de développement, et au final, de gagner du temps. De plus, la capacité d'extraire du code pour des éléments dans diverses langues a facilité l'inspection et la mise en œuvre, accélérant ainsi le travail tout en réduisant les erreurs.

Ainsi, Volkswagen Group Services a découvert que Dev Mode encourageait la collaboration en réduisant considérablement les frictions lors des handoffs entre designers et développeurs.

« Nous utilisons la collaboration comme un outil pour innover et augmenter la valeur de nos idées. Figma est un outil efficace pour fluidifier et favoriser cette collaboration au sein de notre équipe. C'est vraiment l'idéal pour nous ! » – Parth Pandya, product designer and Figma advocate, Volkswagen Group Services.

Développer la vision de Worage avec Figma

Le projet Worage est bien avancé, et il est prêt pour aider les petites entreprises à accéder au stockage dont elles ont besoin. Il sera lancé en 2024.

« La clarté du processus décisionnel et le feedback régulier peuvent avoir un impact mesurable sur nos KPI relatifs l'expérience client. » Allier Figma et FigJam nous a aidés à mieux communiquer avec toutes les parties prenantes dès le début du processus de design. Cet alignement a mené à la création d'un produit centré sur la clientèle, de haute fidélité, ce qui nous a aidés à passer en production plus rapidement et de manière plus rentable », dit Sandra Schaus, lead UX expert, Volkswagen Group Services.