En buena compañía: los minoristas usan Figma para mejorar el comercio electrónico

Ya sea promoviendo economías circulares o traduciendo a través de diferentes puntos de contacto digitales, el mundo del comercio electrónico se ha vuelto más sofisticado. Para generar confianza, facilitar una experiencia fluida del cliente y contar una historia de marca convincente, es imprescindible ofrecer una experiencia digital coherente y atractiva.

Hablamos con equipos de marcas líderes para saber cómo están alcanzando estos objetivos y evolucionando sus procesos con Figma. Aquí compartimos cómo Nuuly asa la logística del alquiler de ropa, cómo Ruggable conecta sus puntos de contacto de comercio electrónico y marketing, y cómo Design Business Company trabajó en estrecha colaboración con GitHub para crear una tienda decididamente dirigida a los desarrolladores.

Cómo Nuuly optimiza la experiencia de usuario en el alquiler de ropa

Si bien algunas empresas han normalizado el alquiler de ropa para ocasiones especiales, otras más recientes, como Nuuly, lanzada en 2019, están tratando de convertirlo en algo habitual para el uso diario. “Nuuly celebra la idea del cambio”, dice Laura Petrini, directora de Experiencia de Usuario en Nuuly. “Ofrecemos a los clientes la posibilidad de cambiar su estilo para que puedan expresarse y ser creativos con su guardarropa”.

Para cumplir esta promesa, Nuuly ha creado una experiencia de alquiler sin inconvenientes que los suscriptores han llegado a conocer y amar. Dado que los servicios de suscripción de ropa aún están en sus inicios, Nuuly también ha desarrollado gran parte de su propia tecnología para gestionar la otra cara del alquiler: la gestión circular del inventario, la limpieza y las reparaciones. Esto supuso crear dos sistemas de diseño desde cero: uno para los clientes y otro para la logística del alquiler, ambos con objetivos únicos y una empresa en expansión en mente. “Configuramos nuestro sistema de diseño con tokens de color y tipografía que se pueden intercambiar fácilmente, dando a la marca espacio para crecer a medida que cambian las estaciones, del mismo modo que damos a nuestros clientes espacio para flexibilizar su estilo”, dice Laura.

Aunque la tecnología que sustenta la logística del alquiler es compleja, el objetivo de Nuuly es facilitar al máximo la adaptación de los clientes a una nueva forma de comprar. “Hemos simplificado la experiencia al máximo, hasta convertirla en algo muy intuitivo”, dice Laura. Por ejemplo, la función My Nuuly del sitio web representa la bolsa Nuuly del cliente y le guía a través de más de 26 estados de alquiler posibles, desde lo que ocurre en ese momento hasta lo que puede esperar a continuación.

Gestionar y escalar los sistemas de diseño que hay detrás de toda esta complejidad llevó al equipo a adoptar Figma en 2023. “Nuestros sistemas de diseño originales se fragmentaron debido a las limitaciones del tamaño de los archivos y, como tenían que sincronizarse con nuestro servidor, el rendimiento era lento”, dice Erica Benamy, diseñadora de UX principal en Nuuly. “Acabamos gestionando un total de 16 archivos. Aprovechamos la migración a Figma como una oportunidad para consolidar y reconstruir dos bibliotecas sencillas de Figma”.

El uso de Figma ha acelerado considerablemente los flujos de trabajo. “Estamos diseñando a un ritmo mucho más rápido”, afirma Erica. El uso de las herramientas nativas de creación de prototipos de Figma también ha ayudado a los diseñadores a comunicar mejor los patrones de interacción esperados a los desarrolladores durante la entrega del diseño, dice: “Nos ha hecho mucho más ágiles y nos sentimos realmente en sintonía unos con otros como organización”.

La migración de UX de Nuuly a Figma ha llevado a otros departamentos a hacer lo mismo. Los equipos de diseño de contenidos y fotografía de estudio ahora diseñan en Figma junto con el equipo de UX. Y con herramientas de colaboración como FigJam y Figma Slides, el resto de la empresa Nuuly también se ha sumado a la iniciativa para colaborar, intercambiar ideas y revisar mejoras en la experiencia del cliente, como The Thrift Shop, que ofrece a los suscriptores acceso a estilos en liquidación que no tienen que alquilar para comprar.

Para los clientes de Nuuly, esto significa mejoras e innovaciones más rápidas en su experiencia. Para el equipo de Nuuly, significa más tiempo dedicado a la colaboración, la exploración creativa y el tipo de pensamiento de diseño centrado en el cliente que ayuda a fomentar la relación que Nuuly tiene con sus suscriptores.

Cómo Ruggable garantiza superficies digitales uniformes

Cuando la directora de Diseño de Producto UX, Alicia Clapper, se incorporó a Ruggable hace seis años, tuvo que lidiar con varios flujos de trabajo paralelos y compartimentados. Esto dio lugar a experiencias discordantes en todas sus plataformas digitales, desde los anuncios en las redes sociales hasta la página de inicio y las páginas de detalles de productos, y, por lo tanto, a una experiencia del cliente inconexa. Dado que los compradores de Ruggable suelen tardar 10 días o más en adquirir una alfombra después de navegar por la página, era fundamental crear coherencia entre todos estos puntos de contacto, especialmente en un panorama cada vez más competitivo.

“Históricamente, los equipos de UX y comercio electrónico habían estado bastante separados de los equipos de marca y creatividad”, dice Alicia. Una campaña en redes sociales presentaba un conjunto de imágenes, mientras que el sitio web utilizaba otro. “Nunca teníamos muchos datos sobre lo que hacían, y viceversa, hasta que las cosas se ponían en marcha”.

Esto se debía, en parte, a que su trabajo estaba distribuido en varias herramientas y luego se compartía manualmente en Google Drive. Sin una biblioteca de componentes centralizada, era difícil gestionar elementos como colores, estilos de fuente, botones y pies de página. “Simplemente copiábamos y pegábamos de una página a otra y los editábamos en función del proyecto y el contenido”, explica Alicia. “Era un proceso muy manual y daba lugar a muchos errores de un proyecto a otro. No existía el control de versiones, por lo que teníamos que asegurarnos de copiar los archivos más recientes. No sé si yo calificaría esto como ‘gestionar‘ un sistema de diseño”.

Hace cinco años, el equipo de UX se embarcó en una migración a Figma para conseguir una mayor alineación. Ahora pueden diseñar, crear prototipos y probar nuevos diseños, todo en un solo lugar. Además, pasar del diseño al desarrollo es diez veces más rápido que antes gracias a Dev Mode. En lugar de crear anotaciones manualmente, los diseñadores pueden marcar una casilla para preparar los archivos. “La sensación era: ‘Esto es perfecto. No necesitamos nada más‘.” dice Alicia. Ahora hay menos idas y venidas entre diseñadores y desarrolladores, y queda claro qué versión de un diseño es la más actualizada.

Tras ser invitados a participar en Figma como colaboradores, los equipos de marca, creatividad, retención y adquisición de Ruggable también se han unido a la plataforma. “Pudimos involucrar al equipo creativo compartiendo enlaces fácilmente y permitiéndoles comentar cualquier detalle que consideraran más acorde con la marca”, dice Alicia. “La facilidad con la que pudimos actualizar e implementar nuestro sistema de diseño en Figma tras el cambio de imagen de 2024 inspiró a otros equipos a querer utilizarlo. Esto fue un gran catalizador para una adopción más amplia”. Ahora, Alicia también reúne a varios equipos en FigJam para celebrar reuniones multifuncionales y sesiones de brainstorm. “Uno de nuestros gerentes de producto incluso ha comentado lo divertidas, interesantes y productivas que son las reuniones”, señala.

Este nuevo estándar de compromiso y colaboración ha sido esencial para crear una experiencia de cliente coherente, lo cual es clave para construir la marca. “Hay una familiaridad que resuena en la gente”, dice Alicia. “Y eso realmente fortalece la confianza en la marca y les permite encontrar lo que buscan y realizar la compra”.

Cómo GitHub y Design Business Company hacen las delicias de los desarrolladores

Como plataforma de desarrollo muy apreciada, GitHub vio la oportunidad de usar su tienda en línea para amplificar la marca y crear una comunidad. Para lograrlo, GitHub formó un equipo con el estudio creativo Design Business Company para crear una experiencia de compra destacada en Shopify que ofrece coleccionables, ropa y productos de estilo de vida relacionados con la programación. El proyecto requería un nuevo sistema de diseño, productos de marca, fotografía de productos y embalaje, y todo ello se completó en Figma. El rediseño no solo evitó al equipo de GitHub tener que realizar tediosas actualizaciones manuales en la tienda, sino que también dejó espacio para la diversión en forma de “claves” centradas en los desarrolladores que dicen mucho sobre la identidad de marca de GitHub.

Fundada por Stewart Scott-Curran, Judson Collier y Jordan Egstad, DBCo se integra en los equipos de los clientes para cada proyecto, alejándose del marco de “la agencia sabe más” que antes dominaba el sector del diseño. En lugar de presentar ideas cada pocas semanas o meses, DBCo ofrece visibilidad sobre qué y cómo está diseñando para crear una conversación continua con sus clientes, que suelen ser startups en fase inicial y media que esperan flujos de trabajo ágiles y muy adaptativos. “Los clientes nos ayudan a corregir la dirección mucho más rápidamente”, dice Jordan. “Eso supone un enorme ahorro de tiempo”.

Tan pronto como comienza un proyecto, DBCo invita a los clientes a un mood board compartido en Figma donde todos pueden aportar ideas y dejar comentarios. “Esa es nuestra primera línea de defensa a la hora de recopilar comentarios debido al contexto y la granularidad que nos brinda”, dice Judson. En el rediseño de la tienda participaron más de dos docenas de personas, entre las que se encontraban partes interesadas de los equipos de la tienda, la marca, el diseño y la web de GitHub, así como consultores de accesibilidad. Al mapear todo en el archivo, estos colaboradores pudieron incorporarse fácilmente en cualquier momento y orientarse en el proyecto.

Después de la fase de brainstorming, era hora de desarrollar el sistema de diseño. Para agilizar el proceso, DBCo parte de una base universal que ha creado, denominada Sistema de diseño Construct, que se configura con variables de Figma. Como marco inicial, Construct logra “el equilibrio perfecto entre disponer de un sistema lo suficientemente completo como para resultar útil y tener demasiadas limitaciones”, dice Jordan, quien comparte que esto condensa un día y medio de trabajo en solo 30 minutos.

La creación de prototipos también fue una parte clave del proceso, especialmente a la hora de dar vida a las páginas de productos. Estos diseños solían incluir ocho variantes (desde el tamaño hasta el color, pasando por la personalización) que requerían una IU condicional y “momentos frikis y peculiares de los desarrolladores”, como lo describe Jordan. Por ejemplo, cuando alguien introduce el código Konami, las imágenes del sitio se convierten en arte ASCII. “Los desarrolladores usan palabras y letras como herramientas, así que pensamos: ‘Tenemos que encontrar una manera de animar y dar vida a estas palabras’”, afirma. “Desarrollamos diferentes estudios de movimiento y los incorporamos a los prototipos para poder hacernos una idea real de cómo respondería la interfaz con diferentes transiciones, estados de desplazamiento del cursor sobre los botones y cosas por el estilo. Ayudar a GitHub a visualizar los diseños y hacerlos tangibles fue realmente útil para tomar una decisión.

Al final, poder colaborar tan estrechamente con varios equipos en el mismo archivo dio lugar a una experiencia minorista cohesionada, desde la navegación hasta el pago y la entrega, para el público altamente exigente de GitHub. “Los desarrolladores son buenos detectores de tonterías”, dice Judson. “Teníamos el reto de asegurarnos de ser fieles a la forma y al trabajo de los desarrolladores, porque, independientemente de lo que hiciéramos, queríamos hacerlo a un nivel muy alto”.

Hoy en día, el comercio electrónico es mucho más que conseguir que un cliente haga clic en “añadir al carrito”. A medida que el mercado crece, las experiencias digitales excepcionales en todas las etapas de la experiencia del cliente, desde el conocimiento de la marca hasta la compra real, cobrarán cada vez más importancia. Es fundamental crear un espacio para que los equipos puedan intercambiar ideas ambiciosas, crear prototipos rápidamente y presentarlos a los clientes. Obtén más información sobre cómo los equipos utilizan Figma, y ponte en contacto para solicitar una demostración.