Peloton acelera 5 veces la entrega de diseño con Figma

Resumen:

Peloton, un líder mundial del fitness conectado, combina hardware de primera clase con contenido inmersivo para crear experiencias que inspiran y atraen a millones de usuarios en todo el mundo. A medida que su cartera de productos se ampliaba, mantener la coherencia en el diseño y fomentar una colaboración fluida entre diseñadores e ingenieros se convirtió en una prioridad absoluta.

Para satisfacer estas demandas, Peloton recurrió a Figma Empresa. Al unificar su sistema de diseño, Peloton optimizó los flujos de trabajo y mejoró la colaboración entre equipos. Gracias a Dev Mode, el equipo ha mejorado significativamente las entregas entre las fases de diseño y desarrollo, lo que ha reducido las ineficiencias y ha permitido al equipo ofrecer experiencias de usuario coherentes y de alta calidad 5 veces más deprisa.

Reto: ampliar el desarrollo de productos desde las anotaciones manuales hasta una colaboración fluida

A medida que el ecosistema de fitness conectado de Peloton crecía, abarcando hardware, software y una amplia biblioteca de clases en directo y a la carta, se volvió más esencial garantizar una experiencia cohesionada para los clientes en todos los puntos de contacto.

Antes de Figma, las herramientas de diseño y colaboración del sector estaban fragmentadas. Esto creaba aislamientos entre diseñadores y desarrolladores, haciendo que la colaboración fuera ineficaz y que resultara difícil mantener la coherencia en el diseño. Sin una plataforma centralizada, los diseñadores y desarrolladores tenían que depender de puntos de contacto adicionales para coordinarse con respecto a la interacción de estados y comportamientos. La incorporación de Figma fue la solución de Peloton para facilitar una mejor colaboración.

«Figma ha facilitado la adopción de un flujo de trabajo de sistema de diseño entre el diseño y la ingeniería, fomentando la coherencia en la organización de las propiedades y los componentes del diseño», afirma Joe Spadafora, Ingeniero de Software Sénior en Peloton.

Aunque Kinetic, el sistema de diseño de Peloton, proporcionaba una base de coherencia, aún quedaban posibilidades de definir y compartir mejor las especificaciones de diseño. Los ingenieros antes dedicaban mucho tiempo aanotar los diseños, lo que ponía de manifiesto la necesidad de una solución más integral para armonizar los equipos, simplificar la colaboración y escalar de forma eficaz.

Solución: conectar los flujos de trabajo con Figma

Peloton continuó mejorando su flujo de trabajo de diseño al migrar a Figma hace casi cuatro años. Durante el primer año, se centraron en estandarizar la IU existente, creando componentes y estilos compartidos a través de las bibliotecas de Figma para estructurar el flujo de trabajo de diseño.

El cambio a Figma desbloqueó nuevas capacidades, como las variables, que ofrecieron la oportunidad de reconsiderar el tratamiento de los componentes compartidos.

La consolidación de los procesos en un solo lugar redujo la necesidad de reuniones que requerían mucho tiempo y flujos de trabajo manuales, lo cual permitió a los equipos centrarse en crear experiencias de usuario impactantes.

«Antes de Figma, teníamos que celebrar reuniones adicionales para la entrega y las discusiones colaborativas sobre los estados de interacción y los comportamientos de los componentes», comenta Oliver Dumoulin, Diseñador de Sistemas de Diseño de Personal en Peloton. «Ahora lo gestionamos en gran medida de forma asíncrona a través del Dev Mode».

Dev Mode transformó los flujos de trabajo de Peloton consiguiendo que las especificaciones fueran claras, accesibles y sin errores. Incluso pequeñas mejoras, como reducir el tiempo dedicado a encontrar el archivo de diseño adecuado, marcaron una gran diferencia: lo que antes llevaba cinco minutos, ahora solo lleva uno, gracias a Dev Mode.

Escalar con Figma para que el diseño de toda la gama de productos sea coherente

Cuando Peloton introdujo sus productos, mantener un lenguaje de diseño coherente en todas las plataformas digitales y de hardware se hizo cada vez más complejo. Aunque el desarrollo de Peloton Row y Peloton Guide puso de relieve la necesidad de un sistema de diseño centralizado, Kinetic aún no se había creado cuando se lanzaron esas plataformas.

En cambio, se integró gradualmente en estas aplicaciones durante los últimos dos años mediante actualizaciones y mejoras de las funciones. Peloton Strength+, por otro lado, se creó desde cero utilizando Kinetic, convirtiéndose en el primer producto de Peloton en beneficiarse plenamente del sistema de diseño desde el principio.

Escalar para mejorar la visibilidad

A medida que el equipo de diseño se fue expandiendo, Peloton vio la oportunidad de implementar un sistema más estructurado para organizar los archivos de diseño. Antes de utilizar Figma, los equipos tenían una visibilidad limitada del trabajo de los demás, lo que dificultaba mantener la coherencia y optimizar la colaboración.

La actualización a Figma Empresa introdujo espacios de trabajo dedicados que ayudaron a estructurar y escalar la colaboración. Cada espacio de trabajo se adapta a áreas de productos específicas, como la aplicación, el comercio electrónico y el hardware, para garantizar que los equipos trabajan con bibliotecas de diseño relevantes y actualizadas. El espacio de trabajo «Central Design», gestionado por el equipo de Kinetic, alberga las bibliotecas principales que son automáticamente accesibles para todos, generando una única fuente de información veraz.

Creación de un sistema multiplataforma y escalable con variables

Las variables han ayudado a mejorar la coherencia en toda la amplia cartera de Peloton. Antes de Figma Empresa, la cuenta de Figma de Peloton estaba limitada a cuatro modos variables, lo que obligaba a los equipos a realizar actualizaciones manuales en todas las plataformas. Ahora, con 12 temas y 24 modos variables, los equipos pueden cambiar instantáneamente entre plataformas, adaptarse a diferentes estilos visuales y aplicar actualizaciones sin problemas en todos los productos.

El tema básico de Peloton sirve de base para la mayoría de los productos, mientras que Strength+ tiene un tema específico con un característico color amarillo. Una nueva función social introducida recientemente ha añadido 10 temas adicionales, lo que permite a los usuarios asignar un color único cuando crean un equipo en la aplicación Peloton. Para permitir los modos claro y oscuro, se han implementado modos variables, creando 24 modos de color dinámicos que se ajustan en función del tema seleccionado.

Más allá del color, las variables tipográficas también optimizan los estilos tipográficos específicos de cada plataforma. Mediante el uso de modos variables, los diseñadores pueden cambiar fácilmente entre fuentes (por ejemplo, SF Pro en iOS e Inter en Android) sin tener que ajustar manualmente los estilos tipográficos.

«Con las variables, podemos alternar entre plataformas y realizar actualizaciones en colores, estilos y espaciado en un único archivo fuente», afirma Oliver. Estas actualizaciones se aplican automáticamente en todo el sistema, lo que reduce el esfuerzo manual y garantiza la precisión en cada punto de contacto.

Reducir el tiempo de iteración de 15 minutos a tres con Dev Mode

La velocidad es fundamental en el entorno dinámico de Peloton. Para seguir el ritmo del desarrollo rápido de productos, los ingenieros necesitan acceder rápidamente a los últimos diseños, especificaciones claras y un proceso de entrega eficiente. Antes de Dev Mode, localizar archivos de diseño, aclarar especificaciones e inspeccionar manualmente las capas creadas añadía complejidad al flujo de trabajo.

Con Dev Mode, los ingenieros pueden localizar el archivo de diseño adecuado en una fracción del tiempo: lo que antes llevaba cinco minutos, ahora se hace en uno. La inspección manual, que antes llevaba 15 minutos, ahora es cinco veces más rápida, recortando el proceso a solo tres. Identificar componentes reutilizables, otra tarea que llevaba 15 minutos, ahora lleva el mismo tiempo, gracias a los enlaces directos al sistema de diseño.

«Antes utilizábamos múltiples herramientas para la entrega al desarrollador», explica Oliver. «Una para gestionar el diseño y otra para crear las especificaciones de entrega al desarrollador, pero en cuanto se lanzó Dev Mode, esta herramienta sustituyó a todas las demás».

Peloton también ha integrado los tickets de Jira directamente en Dev Mode para proporcionar contexto a los equipos y optimizar la comunicación entre los equipos de producto, diseño e ingeniería.

«Con Dev Mode, podemos realizar un seguimiento del progreso a través de tickets utilizando la integración JIRA, marcar componentes como «ready for dev» y gestionar la disponibilidad con múltiples estados», dice Oliver. «Nuestro proceso de gobernanza interna asegura que cualquier adición o modificación al sistema de diseño se apruebe en la biblioteca del sistema de diseño antes de que los desarrolladores implementen nuevos componentes o actualicen variables».

Con Dev Mode optimizando los flujos de trabajo clave, Peloton está explorando ahora nuevas formas de mejorar aún más la colaboración entre el diseño y el desarrollo. Algunos de sus desarrolladores de Android han comenzado a explorar Code Connect, como un posible siguiente paso para perfeccionar el proceso de entrega.

Además, la automatización seguirá desempeñando un papel cada vez más importante. El equipo está explorando formas de aprovechar la API REST de Figma para sincronizar actualizaciones variables directamente desde JSON a Figma, lo que permite reducir las actualizaciones manuales en sus 24 modos variables.

Mientras continúan perfeccionando sus procesos, Peloton está listo para avanzar aún más deprisa a medida que crean la próxima generación de experiencias de fitness conectadas.