Chez Peloton, le transfert des designs est cinq fois plus rapide grâce à Figma

Résumé :

Peloton, leader mondial du fitness connecté, combine du matériel d'avant-garde à un contenu immersif pour créer des expériences qui inspirent et engagent des millions d'utilisateurs dans le monde entier. À mesure que son portefeuille de produits s'est élargi, maintenir la cohérence du design et favoriser une collaboration fluide entre les designers et les ingénieurs est devenu une priorité absolue.

Pour répondre à ces demandes, Peloton s'est tourné vers Figma Enterprise. En unifiant son design system, Peloton a rationalisé les workflows et amélioré la collaboration entre les équipes. Grâce au Dev Mode, l'équipe a considérablement amélioré le transfert entre le design et le développement, réduisant les inefficacités et pouvant livrer cinq fois plus rapidement des expériences utilisateur cohérentes et de qualité.

Défi : développer des produits à grande échelle en passant des annotations manuelles à une collaboration sans faille

Alors que l'écosystème de fitness connecté de Peloton s'étendait – englobant du matériel, des logiciels et une vaste bibliothèque de cours en direct et à la demande, assurer une expérience client cohérente à chaque point de contact est devenu de plus en plus essentiel.

Avant Figma, les outils de design et de collaboration de l'industrie étaient fragmentés. Il en résultait des silos entre les designers et les développeurs, rendant la collaboration inefficace et la cohérence du design difficile à maintenir. Sans une plateforme centralisée, les designers et les développeurs devaient compter sur des points de contact supplémentaires pour s'aligner sur l'interaction des états et des comportements. Adopter Figma a été la solution qui a permis à Peloton d'améliorer la collaboration.

« Figma a facilité l'adoption d'un workflow de design system entre le design et l'ingénierie, favorisant la cohérence dans l'organisation des propriétés et des composants de design », déclare Joe Spadafora, ingénieur logiciel senior à Peloton.

Bien que Kinetic, le design system de Peloton, ait fourni une base pour la cohérence, il restait des opportunités de définir et de partager davantage les spécifications de design. Auparavant, les ingénieurs consacraient un temps significatif àannoter les designs, soulignant le besoin d'une solution plus globale pour aligner les équipes, simplifier la collaboration et évoluer efficacement.

Solution : connecter les workflows avec Figma

Peloton a poursuivi ses progrès pour améliorer son workflow de design en migrant vers Figma il y a presque quatre ans. La première année, l'accent a été mis sur la standardisation de l'IU existante, en construisant des composants et des styles partagés via les bibliothèques Figma pour structurer le workflow de design.

Le passage à Figma a abouti à de nouvelles fonctionnalités, telles que les variables, offrant une opportunité de repenser l'approche des composants partagés.

Consolider les processus en un seul endroit a réduit le besoin de réunions longues et de workflows manuels, libérant les équipes pour qu'elles se concentrent sur la création d'expériences utilisateur convaincantes.

« Avant Figma, nous avions besoin d'organiser des réunions supplémentaires pour le transfert et les discussions collaboratives sur les états d'interaction et les comportements des composants », explique Oliver Dumoulin, concepteur principal de design systems à Peloton. « Aujourd'hui, nous gérons une grande partie de ces tâches de manière asynchrone par le biais du Dev Mode. »

Le Dev Mode a transformé les workflows de Peloton en veillant à ce que les spécifications soient claires, accessibles et exemptes d'erreurs. Même des améliorations mineures (par exemple, réduire le temps passé à trouver le bon fichier de design) ont fait une grande différence – ce qui prenait auparavant cinq minutes n'en prend plus qu'une seule, grâce au Dev Mode.

Évoluer pour une cohérence du design dans toute la gamme de produits avec Figma

Lorsque Peloton a introduit des produits, maintenir un langage de design cohérent à travers les plateformes matérielles et numériques est devenu de plus en plus complexe. Le développement de Peloton Row et de Peloton Guide soulignait la nécessité d'un design system centralisé, mais Kinetic n'avait pas encore été construit au moment du lancement de ces plateformes.

Il a à la place été progressivement intégré à ces applications au cours des deux dernières années par le biais de mises à jour de fonctionnalités et d'optimisations. Peloton Strength+, en revanche, a été construit de A à Z en utilisant Kinetic, étant ainsi le premier produit Peloton à tirer pleinement parti du design system dès le début.

Évoluer pour la visibilité

Alors que l'équipe de design se développait, Peloton a vu une opportunité d'apporter un système plus structuré à l'organisation des fichiers de design. Avant Figma, les équipes avaient une visibilité limitée sur le travail des unes et des autres, rendant difficile le maintien de la cohérence et la rationalisation de la collaboration.

La mise à niveau vers Figma Enterprise a introduit des espaces de travail dédiés qui ont aidé à structurer et à développer la collaboration. Chaque espace de travail est adapté à des zones de produit spécifiques, telles que l'application, le commerce électronique et le matériel, garantissant que les équipes utilisent des bibliothèques de designs pertinentes et à jour. L'espace de travail Central Design, géré par l'équipe Kinetic, abrite les bibliothèques principales qui sont automatiquement accessibles à tous, créant une source unique de vérité.

Construire un système évolutif et multiplateforme avec des variables

Les variables ont aidé à améliorer la cohérence à travers le portefeuille grandissant de Peloton. Avant Figma Enterprise, le compte Figma de Peloton était limité à quatre modes de variables, ce qui obligeait les équipes à effectuer des mises à jour manuelles sur les plateformes. Désormais, avec 12 thèmes et 24 modes de variables, les équipes peuvent instantanément passer d'une plateforme à une autre, s'adapter à différents styles visuels et diffuser des mises à jour sans heurts à travers les produits.

Le thème de base de Peloton constitue une fondation pour la plupart des produits, tandis que Strength+ comporte un thème dédié caractérisé par une couleur jaune de signature. Une nouvelle fonctionnalité sociale a introduit 10 thèmes supplémentaires, permettant aux utilisateurs d'assigner une couleur unique lors de la création d'une équipe dans l'application Peloton. Pour prendre en charge les modes clair et sombre, des modes de variables ont été mis en œuvre, créant 24 modes de couleur dynamiques qui s'ajustent en fonction du thème sélectionné.

Au-delà de la couleur, les variables de typographie simplifient également les styles de type spécifiques à la plateforme. Grâce aux modes de variables, les designers peuvent facilement passer d'une police à une autre (par exemple, SF Pro sur iOS et Inter sur Android) sans ajuster manuellement les styles de type.

« Avec les variables, nous pouvons basculer entre les plateformes et apporter des mises à jour aux couleurs, aux styles et à l'espacement dans un seul fichier source », affirme Oliver. Ces mises à jour se propagent automatiquement dans tout le système, réduisant l'effort manuel et garantissant l'exactitude à chaque point de contact.

Réduire le temps d'itération de 15 minutes à trois avec le Dev Mode

La vitesse est cruciale dans l'environnement dynamique de Peloton. Pour suivre le développement rapide des produits, les ingénieurs ont besoin d'un accès rapide aux derniers designs, de spécifications claires et d'un processus de transfert efficace. Avant le Dev Mode, trouver des fichiers de design, clarifier les spécifications et inspecter manuellement les calques ajoutait de la complexité au workflow.

Avec le Dev Mode, les ingénieurs peuvent localiser le bon fichier de design en une fraction de temps – ce qui prenait cinq minutes n'en prend à présent plus qu'une seule. L'inspection manuelle, qui prenait auparavant 15 minutes, se fait maintenant cinq fois plus rapidement, réduisant le processus à seulement trois minutes. Identifier les composants réutilisables, une autre tâche nécessitant 15 minutes, prend désormais le même temps, grâce aux liens directs vers le design system.

« Nous avions l'habitude de compter sur plusieurs outils pour le transfert aux développeurs », déclare Oliver. « Un outil pour gérer le design et un autre pour créer les spécifications de transfert aux développeurs. Mais une fois le Dev Mode lancé, il a remplacé toutes les fonctionnalités offertes par les autres outils. »

Peloton a également intégré des tickets Jira directement dans le Dev Mode pour apporter un contexte aux équipes et rationaliser la communication entre les équipes produit, design et ingénierie.

« Avec le Dev Mode, nous pouvons suivre l'avancement par le biais de tickets en utilisant l'intégration JIRA, marquer des composants comme étant à l'état « ready for dev » et gérer la disponibilité avec plusieurs statuts », indique Oliver. « Notre processus de gouvernance interne garantit que tous les ajouts ou modifications au design system sont approuvés dans la bibliothèque de design systems avant que les développeurs n'implémentent de nouveaux composants ou mettent à jour des variables. »

Avec le Dev Mode rationalisant les workflows clés, Peloton explore maintenant de nouvelles façons d'améliorer encore la collaboration entre le design et le développement. Certains de leurs développeurs Android ont commencé à explorer Code Connect comme prochaine étape potentielle pour optimiser le processus de transfert.

Au-delà, l'automatisation continuera à jouer un rôle croissant. L'équipe explore des moyens de tirer parti de l'API REST de Figma pour synchroniser les mises à jour des variables directement de JSON vers Figma, soutenant la réduction des mises à jour manuelles à travers ses 24 modes de variables.

En continuant à optimiser ses processus, Peloton est prêt à avancer encore plus rapidement en construisant la prochaine génération d'expériences de fitness connecté.