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

Resumen:

Peloton, líder global en 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 consistencia 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 Enterprise. 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 la entrega entre 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 rápido.

Desafío: escalar 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, que abarca hardware, software y una amplia biblioteca de clases en vivo y bajo demanda, se volvió más esencial garantizar una experiencia cohesiva para los clientes en todos los puntos de contacto.

Antes de Figma, las herramientas de diseño y colaboración de la industria que utilizaban estaban fragmentadas. Esto creaba silos entre diseñadores y desarrolladores, lo que provocaba que la colaboración fuera ineficaz y que resultara difícil mantener la consistencia en el diseño. Al no contar con una plataforma centralizada, los diseñadores y desarrolladores tenían que recurrir a puntos de contacto adicionales para coordinar 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 facilitado la adopción de un flujo de trabajo de sistema de diseño entre el diseño y la ingeniería, lo que ha impulsado la consistencia en la forma en que se organizan 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, ya proporcionaba una base para mantener la consistencia, aún existían oportunidades para definir y compartir mejor las especificaciones de diseño. Anteriormente, los ingenieros dedicaban una cantidad significativa de tiempo aanotar diseños, lo que evidenciaba la necesidad de una solución más integral para alinear a los equipos, simplificar la colaboración y escalar de manera 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 UI existente, creando componentes y estilos compartidos a través de bibliotecas de Figma para estructurar el flujo de trabajo de diseño.

El cambio a Figma les abrió nuevas capacidades, como las variables, que ofrecieron una oportunidad de replantearse su enfoque respecto a 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 que permitió a los equipos centrarse en crear experiencias de usuario impactantes.

"Antes de Figma, necesitábamos reuniones adicionales para la entrega y para discutir de forma colaborativa los estados de interacción y el comportamiento de los componentes", comenta Oliver Dumoulin, diseñador staff de sistemas de diseño en Peloton. "Ahora, lo manejamos de forma asincrónica a través de Dev Mode".

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

Escalamiento de la consistencia de diseño en toda la gama de productos con Figma

Cuando Peloton lanzó sus productos, mantener un lenguaje de diseño consistente en todas las plataformas digitales y de hardware se volvió cada vez más complejo. Aunque el desarrollo de Peloton Row y Peloton Guide puso de manifiesto 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 apps durante los últimos dos años mediante actualizaciones y mejoras de las funciones. Por otro lado, Peloton Strength+ se creó desde cero utilizando Kinetic, lo que lo convierte en el primer producto de Peloton que aprovecha al máximo el sistema de diseño desde el principio.

Escalabilidad para mayor visibilidad

A medida que el equipo de diseño se ampliaba, Peloton vio una 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 consistencia y optimizar la colaboración.

La actualización a Figma Enterprise 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 app, el comercio electrónico y el hardware, lo que garantiza que los equipos trabajen con bibliotecas de diseño relevantes y actualizadas. El espacio de trabajo "Central Design", gestionado por el equipo de Kinetic, alberga las bibliotecas principales a las que todos pueden acceder de manera automática, lo que crea una única fuente de información veraz.

Creación de un sistema escalable y multiplataforma con variables

Las variables han ayudado a mejorar la consistencia en toda la creciente cartera de productos de Peloton. Antes de Figma Enterprise, la cuenta de Figma de Peloton estaba limitada a cuatro modos de variables, lo que obligaba a los equipos a realizar actualizaciones manuales en todas las plataformas. Ahora, con 12 temas y 24 modos de variables, los equipos pueden cambiar de manera instantánea entre plataformas, adaptarse a diferentes estilos visuales y aplicar actualizaciones de manera fluida 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 introdujo 10 temas adicionales, lo que permite a los usuarios asignar un color único al crear un equipo en la app de Peloton. Para admitir los modos claro y oscuro, se implementaron modos de variables, creando 24 modos de color dinámicos que se ajustan en función del tema seleccionado.

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

"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 en todo el sistema de manera automática, lo que reduce el esfuerzo manual y garantiza la precisión en cada punto de contacto.

Reducción del 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 tener acceso rápido 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 de forma manual las capas agregaba 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 tomaba cinco minutos ahora se hace en uno. La inspección manual, que antes tomaba 15 minutos, ahora es cinco veces más rápida, lo que reduce el proceso a solo tres. Identificar componentes reutilizables, otra tarea que antes tomaba 15 minutos, ahora toma el mismo tiempo, gracias a los enlaces directos al sistema de diseño.

"Antes dependíamos de varias 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 una vez que 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 los tickets utilizando la integración con JIRA, marcar los componentes como "ready for dev" y gestionar la disponibilidad con varios estados", afirma Oliver. "Nuestro proceso de gobernanza interna garantiza 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 las actualizaciones de variables directamente desde JSON a Figma, lo que permite reducir las actualizaciones manuales en sus 24 modos de variables.

A medida que continúan perfeccionando sus procesos, Peloton está en posición de avanzar aún más rápido en la creación de la próxima generación de experiencias de fitness conectado.