Comment Dev Mode fait gagner 1h30 à HP sur son workflow design-to-code

Véritable poids-lourd de son secteur, HP a été à la pointe de la technologie avec ses imprimantes, des ordinateurs portables, ses systèmes de jeux vidéo, et tant d'autres produits. À tel point que le petit garage de Palo Alto où l'entreprise a fait ses premiers pas est devenu un monument historique californien, et est considéré comme le lieu de naissance de la Silicon Valley. Mais avoir une gamme de produits si larges, chacune avec sa clientèle, rend difficile la conservation d'une expérience cohérente pour tous alors que l'entreprise continue à innover. C'est là que le design system de HP, Veneer, entre en jeu. Nous avons rencontré l'équipe pour découvrir comment elle avait :

• Construit un design system multi-couches pour subvenir aux besoins de 70 produits, et brisé les silos organisationnels entre les équipes
• Utilisé Dev Mode pour faire gagner 98 minutes par semaine en moyenne aux développeurs et aux designers
• Implémenté Code Connect pour généraliser l'adoption de Veneer et réduire les changements de contexte pour les développeurs
• Atteint un ROI de 500 % grâce au gain de temps annuel et réduit le temps de développement de 50 % avec Veneer

Pouvez-vous nous parler de votre équipe et de la manière dont vous veillez à la qualité des produits HP ?

Gilson Hoffmeister, design systems strategist chez HP :Notre équipe gère l'expérience de bout en bout pour le design system d'HP, de la mise en œuvre du design jusqu'aux plateformes spécifiques comme Android, iOS, Windows et le web.

Nous aidons les équipes d'HP à créer efficacement des expériences exceptionnelles, très qualitatives et cohérentes. Ce n'est pas une mince affaire – HP est une grande entreprise, avec plus de 100 gammes de produits distinctes. Chaque produit HP a son propre ADN. Pour les PC d'entreprise, le produit doit être élégant et suffisamment fonctionnel pour l'usage quotidien, et donner confiance aux utilisateurs. Les accessoires pour jeux vidéos doivent être amusants et qualitatifs, pour que les gens soient fiers de les porter et de les montrer.

Andrei Garcia, senior design manager chez HP : Le nombre de divisions commerciales nous a donné du fil à retordre. Chacune a sa propre direction et ses propres besoins. La plupart travaillent chacune de leur côté, sans qu'il n'y ait beaucoup de coordination sur le look and feel numérique d'HP. Même si ce n'est pas volontaire, nous avons dû réunir tout le monde sous la même bannière.

Que pouvez-vous nous dire à propos de Veneer, le design system d'HP ?

Gilson : L'objectif principal de HP est de satisfaire ses clients. Avec Veneer, nous nous assurons que tous nos logiciels sont cohérents et qu'ils fonctionnent bien les uns avec les autres. Veneer aide tout le monde à appliquer les mêmes lignes directrices, ce qui facilite la vie de nos différents clients.

Andrei : Veneer fournit une base de travail à tous (designers, développeurs, rédacteurs, et d'autres) et les aide tout au long du processus de développement de logiciel . Ce qui fut au départ une simple « bibliothèque de composants front-end » est devenu un système riche et complexe, qui permet de gagner du temps, d'éviter les doublons, et de gagner en cohérence.

Comment mesurez-vous l'adoption de Veneer ?

Gilson : Nous mesurons l'adoption de Veneer via un mélange d'indicateurs quantitatifs et qualitatifs. Nous analysons les données d'engagement que nous donne Figma et nous suivons les téléchargements de nos packages de développement, ce qui nous permet d'avoir des informations sur la diffusion du système et l'efficacité avec laquelle il est utilisé. Par exemple, dans notre bibliothéque d'icônes, nous voyons que 915 composants sont utilisés par 320 équipes au sein de HP, avec une moyenne de 85 000 insertions par semaine, ce qui témoigne de l'ampleur de son usage. Fait amusant : l'icône ellipse est la plus utilisée, avec plus de 1,2 millions d'inserts.

En quoi est-il important d'encourager l'adoption de Veneer ?

Gilson : Utiliser Veneer est essentiel : cela accélère notre processus de développement et nous permet une grande cohérence au sein de HP. Avec Veneer, les designers et les développeurs ont une base sur laquelle construire. Créer des composants à partir de zéro prend du temps. Nous épargnons une partie du travail à nos collègues : les bonnes pratiques concernant les états des composants et l'accessibilité sont intégrées, et il n'est pas nécessaire de développer et de tester ce que nous avons déjà testé pour Veneer. Ainsi, les équipes ont plus de temps pour réfléchir à leurs missions et pour se concentrer sur ce qu'elles ont à livrer.

Gilson : Par exemple, de janvier à décembre 2023, nous avons réalisé que l'utilisation de Veneer nous permettait de gagner cinq fois plus de temps qu'il ne nous en a fallu pour le construire. Au lieu de passer du temps à construire des composants pour son projet, chaque équipe a utilisé ceux, tout prêts, de Veneer. Cela montre à quel point Veneer nous a aidés à diminuer nos coûts et améliorer notre efficacité, générant un retour sur investissement cinq fois supérieur.

Andrei: Lorsqu'une équipe ne se sert pas de Veneer, cela entrave la cohérence du produit, la capacité à scaler et l'efficacité du développement. Selon notre VP of engineering Gaurav Roy, Veneer a diminué le temps de développement de moitié sur certains projets. Ce benchmark fait écho à des comparaisons externes, notamment à une étude d'IBM qui a constaté une accélération de 47 % du développement de formulaires simples avec un design system par rapport à une création ex nihilo.

Avant Dev Mode, quels défis votre équipe a-t-elle dû relever pour encourager l'adoption de Veneer ?

Andrei : Le nombre de marques secondaires de HP a été – et reste – un problème important. Il n'est pas possible de subvenir aux besoins de chacune avec un design system monocouche. Il a fallu du temps pour que Veneer devienne suffisamment flexible pour s'adapter à notre stratégie multi-marques. Sans de multiples niveaux d'adoption, nous ne pourrions pas garantir l'alignement et la cohérence entre les différents produits et segments.

Gilson : Faire en sorte que les designers utilisent Veneer n'a pas été facile car les utilisateurs et les produits sont très importants pour eux. Quand un élément extérieur essaye de toucher à ce qu'ils créent, ils s'en méfient parce qu'ils craignent que la nouvelle approche n'endommage le rapport qu'ils ont avec les utilisateurs.

Notre plus grand challenge a été de montrer aux gens ce que pouvait apporter un design system unifié. La plupart avaient l'habitude de prendre eux-mêmes les décisions en ce qui concerne le design, notamment sur les composants ou les couleurs à utiliser. Nous avons dû leur montrer que s'ils étaient d'accord pour ne plus se charger de ces tâches et utiliser Veneer, ils pourraient mieux se concentrer sur les parties les plus stimulantes et créatives de leurs projets, comme l'aspect commercial et les modèles de design.

Pour les développeurs, qui ont compris les avantages liés à la réutilisation du code, Veneer a été plus facile à adopter. Mais nous devions toujours nous assurer que Veneer s'accordait avec les plus de 40 frameworks UI et technologies front-end utilisés au sein de HP.

Comment avez-vous utilisé Dev Mode avec votre design system ?

Dev Mode a amélioré la façon dont les développeurs accèdent aux spécifications des designs au sein de Figma. Les longues réunions et les discussions approfondies sont moins nécessaires, et le passage du design au code est plus fluide que jamais.

Andrei : Nous avons par exemple amélioré la prise en charge des composants en forme de pilule, et nous avons eu besoin d'ajuster les marges intérieures et extérieures. Avec les annotations dans Dev Mode, il était plus facile pour les designers de signaler les mises à jour aux développeurs et d'optimiser le workflow.

La fonctionnalité de comparaison des changements est très utile pour voir ce qui change d'une version d'un design à une autre, surtout lorsque nous mettons à jour des produits existants. Cela permet à tout le monde de rester sur la même longueur d'onde et fluidifie les mises à jour.

La possibilité de classer des parties du design comme Ready for development est un autre élément intéressant. Grâce à cela, nos développeurs savent exactement sur quoi travailler, ce qui diminue la confusion et aide tout le monde à se concentrer sur ce qu'il y a à faire.

Comment utilisez-vous les variables avec Dev Mode pour faire face aux difficultés posées par la multitude des produits ?

Andrei : Nous utilisons les variables en lien avec nos tokens primaires ou sémantiques, ce qui passe très bien à l'échelle sur tous les thèmes et sur les modes clair, sombre et fort contraste.

Et surtout, ces variables forment un lien essentiel entre les éléments de design et l'environnement de code. Notre équipe Foundation gère les éléments essentiels de Veneer, y compris la façon dont nous tirons parti de l'automatisation pour fluidifier la transition du design au code. Ils ont réussi à construire un pont solide entre design et développement en utilisant l'API Figma pour lire ces variables directement depuis le design. Cela signifie que les variables utilisées dans le design sont directement traduites dans le code, ce qui garantit une excellente compréhension mutuelle entre designers et développeurs.

Cet alignement fluidifie le processus de développement, mais améliore aussi la communication entre les équipes, permettant du même coup une implémentation plus précise des spécifications du design. En maintenant cette correspondance directe entre les éléments de design et de code, nous réduisons drastiquement les incohérences et améliorons la qualité globale et la faculté à passer à l'échelle de nos produits numériques.

Vous avez été parmi les premiers à adopter Code Connect. Comment ça se passe pour vous ?

Gilson : Code Connect est la fonctionnalité qui nous a le plus enthousiasmés. La configuration a été très facile, il n'a fallu que deux semaines à un de nos ingénieurs pour tout mettre en place.

Pour gagner encore plus de temps, nous automatisons davantage le processus pour les changements apportés aux composants, entre autres. Par exemple, nous avons un fichier source où toutes les icônes sont dans leur version éditable (avec plusieurs couches, différents éléments comme la ligne, le rectangle, le cercle, etc.). Nous surveillons les changements apportés au fichier source via l'automatisation, c'est-à-dire que nous les aplatissons et nous créons un dictionnaire avec le code SVG, que nous utilisons pour créer notre bibliothèque iconographique dans Figma, et que nous partageons avec les développeurs pour qu'ils l'ajoutent à leurs propres bibliothèques. Dès qu'une icône est ajoutée au fichier source, elle est automatiquement ajoutée à la bibliothèque d'icônes, à Code Connect, et aux bibliothèques de développement.

Gilson : Nous avons un énorme site avec la documentation de chaque composant, où les développeurs peuvent en voir les propriétés et même accéder à des démos en direct avec des extraits de code. Auparavant, ils auraient dû aller sur un site et passer du temps à les chercher. Maintenant, avec Code Connect, ils ont juste à cliquer sur un composant dans Figma pour voir des extraits de code avec tous les bons paramètres. Cela accélère réellement le développement et l'intégration de Veneer.

Andrei : Code Connect a aussi été d'une grande aide pour nos designers : ils comprennent mieux comment fonctionne le code, ce qui les aide à créer des prototypes plus précis. Cela va plus loin que ce que les fonctionnalités de prototypage de Figma nous permettent déjà de faire.

Quels sont les retours de votre équipe concernant Dev Mode ?

Gilson : Nous avons mené un sondage auprès de 400 utilisateurs de Dev Mode au sein de HP, la majorité d'entre eux étant des développeurs. Les retours ont été extrêmement positifs. Un développeur a déclaré : « Dev Mode réduit le temps que je passe sur mes tâches quotidiennes. J'ai donc pu me concentrer sur l'amélioration de la fonctionnalité. » Un autre remarque : « La faculté de générer et d'utiliser directement des extraits de code a vraiment accéléré nos cycles de développement. »

Ils ont aussi gagné en moyenne 98 minutes chacun par semaine, car ils n'ont plus besoin de sans cesse changer de contexte ou d'aller sur un autre site pour trouver les bons extraits de code.

Ces chiffres montrent clairement que la majorité des sondés ont constaté des améliorations importantes de leurs workflows après avoir adopté Dev Mode, notamment à travers une augmentation de l'efficacité, de la vitesse et de la qualité de leur travail. Ces retours quantitatifs soulignent les avantages tangibles de Dev Mode, ce qui renforce la valeur que la fonctionnalité apporte au processus de développement de HP.

Andrei : Notre manière de voir les choses a beaucoup changé. Dev Mode aide les designers et les développeurs à parler la même langue, et nous aide à repenser le processus de création de nos produits. Le concept de handoff n'existe plus, et les gens commencent à parler du « design-to-development workflow » , qui est plus fluide, et dont la partie développement s'est accélérée.