Ruggable consigue que el proceso de diseño al desarrollo sea 10 veces más rápido con Figma

Resumen:

Ruggable, la empresa innovadora detrás de las alfombras que pueden lavarse a máquina, ha transformado la decoración del hogar con una solución práctica y elegante. A medida que la empresa pasó de ser una pequeña empresa a convertirse en una marca global que opera en ocho mercados, se enfrentó al reto de escalar sus operaciones de diseño de manera eficiente, sin descuidar la coherencia en todos los puntos de contacto.

Con Figma, Ruggable unió a los equipos, optimizó los flujos de trabajo y revolucionó su proceso del diseño al desarrollo, logrando una entrega 10 veces más rápida y fortaleciendo la colaboración entre los equipos de UX, creativos y de desarrollo.

Reto: crecimiento rápido, herramientas fragmentadas

A medida que Ruggable se expandía a nivel mundial, sus flujos de trabajo de diseño y desarrollo tuvieron que adaptarse al aumento de la demanda. Anteriormente, los equipos de Ruggable utilizaban múltiples herramientas inconexas para el diseño y la creación de prototipos. Este flujo de trabajo fragmentado ralentizaba la colaboración, generaba trabajo adicional y dificultaba la coherencia de los diseños.

La falta de visibilidad entre los equipos agravaba aún más estos retos, lo cual dificultaba la coordinación y la coherencia de la experiencia de marca. «Históricamente, los equipos de UX y comercio electrónico estaban separados de los equipos creativos y de marca, y teníamos poca visibilidad de los flujos de trabajo de los demás», dice Alicia.

Sin un sistema unificado, surgieron inconsistencias en la experiencia del cliente. Los colores de los botones, los tamaños de fuente y las disposiciones variaban entre los correos electrónicos, las páginas de destino y los anuncios en redes sociales, lo que debilitaba la confianza en la marca.

«Lo que los clientes veían en un correo electrónico podía parecer diferente en una página de destino y aún más diferente en las redes sociales. Las inconsistencias, pequeñas pero notables, hacían que la experiencia pareciera inconexa», afirma Alicia Clapper, Directora de Diseño de Producto UX en Ruggable.

Solución: estructuración de equipos y permisos para la escalabilidad en Figma

El plan Organización de Figma proporcionó a Ruggable una plataforma centralizada para unificar sus operaciones de diseño y mejorar la colaboración entre los equipos. Con equipos ilimitados y permisos estructurados, Ruggable creó espacios de trabajo dedicados para los equipos de marketing, marca y producto, eliminando los silos y manteniendo la coherencia entre los proyectos y las campañas.

Una parte fundamental de esta transformación es la plataforma unificada de Figma, que se convirtió en la única fuente de información veraz para los componentes, estilos, disposiciones y variables de Ruggable. Gracias a los permisos para toda la organización, las actualizaciones ya no interrumpen los proyectos en curso y, en lugar de duplicar archivos o realizar un seguimiento manual de los cambios, ahora las actualizaciones se sincronizan automáticamente entre los equipos, con el consiguiente ahorro de tiempo y la eliminación de inconsistencias.

Gracias al sistema de diseño centralizado de Figma, Ruggable escaló sus operaciones sin perder la coherencia de la marca en todas las campañas y experiencias de producto. Antes, los diseñadores tenían que copiar y pegar manualmente los elementos entre archivos y dedicar tiempo a comprobar el control de versiones para asegurarse de que todo fuera correcto.

«Antes de Figma, copiábamos y pegábamos páginas entre proyectos. El control de versiones era prácticamente inexistente, por lo que siempre teníamos que comprobar dos veces que estábamos utilizando los archivos más recientes», afirma Alicia.

Figma eliminó estos obstáculos con la sincronización automática de las actualizaciones en todos los archivos. Además, con Dev Mode, los desarrolladores ahora tienen acceso directo a las especificaciones y los diseños finalizados, evitando intercambios innecesarios y facilitando más que nunca el proceso de entrega.

De actualizaciones semanales a modificaciones en el mismo día más rápidamente

La integración del sistema de diseño con el sistema de gestión de contenidos (CMS) de Ruggable también ha dado a los que no son diseñadores la posibilidad de actualizar contenidos y crear páginas de destino, y ha reducido la dependencia de los diseñadores, además de garantizar la coherencia de la marca.

Este enfoque optimizado ha supuesto un importante ahorro de tiempo, especialmente en las campañas de alta prioridad. «Las actualizaciones para el Black Friday solían tardar más de una semana. Ahora, esos cambios se realizan en menos de un día», dice Alicia.

Figma también ha ayudado a estandarizar los recursos de marca de Ruggable a medida que escalan en los mercados internacionales. Gracias a las fuentes compartidas, los equipos ya no pierden tiempo buscando recursos de marca o solucionando problemas relacionados con fuentes que faltan. Ahora, todos los colaboradores, incluidos los contratistas y los equipos internacionales, pueden acceder al tipo de letra correcto inmediatamente.

Alicia afirma: «Tener las fuentes integradas en Figma ha sido de gran ayuda. Antes, los contratistas y los equipos internacionales me pedían constantemente archivos de fuentes solo para editar texto. Ahora, todo está integrado, y la colaboración es mucho más fácil».

Optimizar las entregas es 10 veces más rápido con Dev Mode

Dev Mode ha transformado la forma en que los equipos de diseño y desarrollo de Ruggable trabajan juntos, cerrando la distancia entre la intención del diseño y la implementación del código. Anteriormente, las entregas eran lentas y propensas a errores: los diseñadores anotaban los archivos manualmente, mientras que los desarrolladores tenían que revisar múltiples versiones hasta dar con el diseño más actualizado.

«Era difícil saber qué versión de un diseño utilizar cuando se podían ver varias iteraciones en una sola página», afirma Tia Rexine, Ingeniera de Software en Ruggable.

Esta falta de claridad solía provocar retrasos, malentendidos y reuniones adicionales. Ahora, con Dev Mode, los desarrolladores pueden acceder al instante a especificaciones detalladas (fuentes, colores, espaciado) directamente en los archivos de diseño, lo que reduce la necesidad de realizar anotaciones manuales.

Para optimizar aún más el proceso, los equipos utilizan la función «Ready for Dev» para realizar un seguimiento de los diseños finalizados y asegurarse de que los desarrolladores trabajen siempre con las últimas versiones aprobadas, minimizando así los intercambios innecesarios.

Otra mejora importante en eficiencia proviene de la integración de código incorporada en Dev Mode. Los desarrolladores pueden inspeccionar y extraer propiedades CSS directamente de los archivos de diseño, obteniendo fuentes, estilos de texto y valores de espaciado al instante.

Más allá de las especificaciones y el código, Dev Mode también centraliza los recursos de diseño esenciales. Ahora los desarrolladores pueden acceder a SVG, archivos de fuentes y guías de estilo en un solo lugar, sin necesidad de buscar en múltiples herramientas.

Estas mejoras han tenido un profundo impacto en el flujo de trabajo de Ruggable. Las tareas que antes requerían horas de anotaciones manuales e intercambios de comunicaciones ahora se completan casi al instante, lo que da lugar a entregas 10 veces más rápidas.

«Los desarrolladores solían preguntarnos por cada pequeño detalle, pero ahora son mucho más autónomos durante la experiencia y la entrega. Esto ha optimizado nuestro flujo de trabajo y nuestra relación», afirma Alicia.

Esto no solo ha ahorrado tiempo valioso, sino que también ha mejorado la calidad del resultado. «Cuando todos los detalles más pequeños (como el espaciado, las fuentes, los colores y similares) son más accesibles gracias a Dev Mode, el tiempo dedicado al control de calidad para corregir el diseño disminuye. Diría que nuestro proceso de control de calidad es al menos un 50 % más rápido», afirma Tia.

Brainstorming con equipos multifuncionales en FigJam

A medida que Ruggable ampliaba sus procesos de diseño y desarrollo con Figma, el equipo vio la oportunidad de ampliar la colaboración más allá de los equipos de diseño. Para ello, recurrieron a FigJam, incorporando a más personas al proceso antes y haciendo que el trabajo en equipo multifuncional fuera más eficiente.

Antes de FigJam, el proceso de brainstorming de Ruggable era lento e ineficaz, lo que impedía organizar las ideas de forma eficaz. Las reuniones solían alargarse y las tareas pendientes tenían que transcribirse manualmente, a veces varias veces, antes de poder convertirlas en tickets para llevarlas a cabo. Esto retrasaba la transición de la concepción al diseño, y a veces se tardaba hasta dos semanas en poder empezar a trabajar.

«FigJam redujo el tiempo que dedicábamos desde el brainstorming hasta el diseño de una o dos semanas a tan solo uno o dos días. Ahora podemos organizar las ideas al instante y pasar directamente a ejecutarlas», afirma Alicia.

Lo que comenzó como una herramienta para el equipo de UX rápidamente se convirtió en algo esencial para los equipos creativos, de marketing y de producto. «Todos los nuevos miembros tienen acceso a FigJam. Se ha convertido en una parte esencial de nuestro flujo de trabajo», afirma Alicia.

Por ejemplo, después de que los usuarios probasen un nuevo tipo de funda para alfombras, el equipo utilizó las plantillas predefinidas de brainstorming y la función de temporizador de FigJam para encauzar las discusiones. Los resúmenes generados por IA optimizaron los seguimientos, y garantizaron la claridad de los siguientes pasos.

Al incorporar más equipos al proceso desde el principio, FigJam ha ayudado a Ruggable a convertir las ideas en acciones más rápidamente. A medida que Ruggable sigue creciendo, la plataforma unificada de Figma (FigJam, Figma y Dev Mode) seguirá siendo fundamental para la forma en que sus equipos colaboran, iteran y dan vida a nuevos productos.