Comment Customer.io simplifie le transfert des designs avec les variables et le Dev Mode

Durée de lecture : 4 minutes

Résumé : La fonctionnalité a toujours été une priorité dans le monde de la technologie marketing (MarTech). Customer.io a révolutionné l'industrie par une approche différente : le design et l'expérience utilisateur sont ses principes directeurs dans la création de produits destinés aux clients. Fondée en 2012, l'entreprise alimente aujourd'hui des campagnes de messagerie automatisées pour des marques leader telles que Notion, Clearbit et IMAX.

Dans le cadre du forfait Organisation de Figma, Customer.io a amélioré ses transferts design-développement en utilisant des variables et le Dev Mode, et peut ainsi livrer son travail plus rapidement.

Défi : Des bibliothèques de composants déconnectées créent des frictions entre le design et le développement

Bien que Customer.io utilise Figma depuis un certain temps, elle a atteint un point d'inflexion où l'absence d'une gouvernance du design system et de composants ad hoc ont commencé à affecter son travail. Aiden Bordner, directeur senior, responsable du design produit à Customer.io, explique : « Nous sommes arrivés à un point où les composants n'avaient pas tous une représentation canonique dans Figma. Il n'y avait pas de continuité partagée entre le design et le développement car les spécifications n'étaient pas facilement reliées à l'intention du design system. »

Ce décalage a engendré des incohérences entre les tâches entamées. Bien que l'impact ait été subtil à première vue (un bouton présentant la mauvaise bordure, un séparateur trop sombre, un espacement désaligné de quelques pixels), ces divergences entre le design et le développement s'accumulaient rapidement, causant des tensions sérieuses et une expérience utilisateur désordonnée.

« Quand ces erreurs sont constatées, quelqu'un dans le service d'assurance qualité doit les étiqueter, ensuite un ticket est créé et le front-end est recréé », note Aiden. « Ce temps et les coûts des modifications pour corriger les problèmes ont un véritable impact sur les nouvelles fonctionnalités que nous pouvons offrir aux clients. »

Avec des workflows incertains et une friction accrue entre les équipes, Aiden savait qu'un changement devait être opéré avant que ces négligences n'affectent l'expérience utilisateur à plus grande échelle.

Solution : Les Variables et le Dev Mode entrent en jeu

Customer.io a adopté les nouvelles fonctionnalités de Figma en commençant à mettre à jour son design system. « Le coup d'envoi a été Config 2023 – le Dev Mode et les variables ont été lancés et je me suis dit que c'était l'outillage que j'attendais », déclare Aiden. L'équipe du design produit a mis en place des variables dans Figma pour prendre en charge les couleurs, l'espacement, la taille des caractères, le rayon des angles et les styles typographiques. Désormais, les développeurs n'ont plus à deviner le nombre précis de pixels d'une gouttière ou le bon code couleur.

Avec les variables, l'équipe a pu standardiser les propriétés de design dès le départ. « Un développeur n'a pas à se soucier d'interpréter lui-même un design. Avec les spécifications présentes à 60-70 % sous leurs yeux, les nouveaux développeurs pourront traduire plus facilement une maquette en implémentation » affirme Aiden. Grâce à ces cadres uniformes désormais en place, les développeurs constatent une réduction des erreurs et peuvent travailler plus rapidement dans leur processus.

De plus, l'adoption du Dev Mode a changé la donne pour les workflows de Customer.io. « Cela peut faire beaucoup lorsqu'il s'agit de déterminer ce qui est prêt à être créé » indique Aiden. « Grâce au Dev Mode, les annotations permettent à un designer de mettre en évidence une section spécifique pour qu'un développeur puisse commencer à travailler immédiatement. »

Impact : Les équipes du design et du développement établissent un nouveau standard d'efficacité

Le transfert design-développement renouvelé a porté ses fruits pour la productivité de l'équipe. Avec les fichiers de design maintenant annotés, les développeurs peuvent inspecter facilement, comprendre la structure sous-jacente et commencer immédiatement l'implémentation.

Ce gain de vitesse bénéficie également à l'équipe du design. « Les designers adoptent cet état d'esprit orienté sur la croissance » indique Rennie Abraham, responsable du Brand Studio à Customer.io. « Ils peuvent itérer, tester et ajuster au lieu de consacrer six mois à deux ou trois pages d'accueil majeures sans savoir s'ils atteindront les objectifs commerciaux. Peu d'entreprises bénéficient de la collaboration et de l'esprit d'innovation que Figma nous offre. »

En tirant parti des variables et du Dev Mode, Customer.io a non seulement amélioré ses processus internes mais s'est également positionnée comme un leader orienté sur le design dans l'industrie de la technologie marketing. Les designers rendent les détails et les révisions mineurs plus faciles à suivre lorsqu'ils marquent leurs fichiers comme prêts pour le développement, atteignant un degré de raffinement plus élevé dans le travail qu'ils livrent aux côtés des développeurs. Grâce à cet engagement de l'entreprise dans ce niveau de raffinement, les utilisateurs ont confiance dans la capacité des produits à transformer leurs communications clients.

« Nous nous concentrons avec une précision extrême sur la livraison d'un niveau de raffinement UX et UI de qualité grand public à nos clients », déclare Aiden. « Pour connecter nos environnements de design et d'ingénierie, ce sont les fondations qui nous donnent un avantage concurrentiel. »

Customer.io illustre parfaitement les résultats positifs obtenus en optimisant les transferts design-développement. Le résultat final non seulement s'accompagne de gains d'efficacité et d'une meilleure expérience utilisateur, mais offre également de nouvelles opportunités pour l'innovation créative. Grâce à cette approche collaborative, l'entreprise continuera à construire des solutions orientées sur le design qui apportent à ses utilisateurs les données leur permettant d'impliquer leurs clients.