Cómo Spendesk utilizó Figma para completar un rediseño de la marca

Para Spendesk, un unicornio fintech con sede en París y líder en gestión de gastos y adquisiciones, evolucionar de una startup a una marca prémium fue una revisión estratégica que les obligó a eliminar las barreras entre equipos.

A medida que la empresa avanzaba en el mercado para dirigirse a los clientes del mercado medio, el equipo de diseño vio la oportunidad de reinventar la identidad y la IU del producto de Spendesk y de colaborar más estrechamente con el equipo de producto. La idea alcanzó su máximo potencial cuando otros departamentos, como ingeniería, investigación de usuarios, análisis y datos, se unieron, lo que demuestra que la innovación prospera cuando los equipos trabajan al unísono.

Un proyecto al servicio de nuevas ambiciones

La identidad de marca original de Spendesk, creada durante los confinamientos por la COVID-19, utilizó un sistema de ilustraciones alojado en Figma. Compuesto por rostros, posiciones corporales y fondos, este kit modular se adaptaba a diversas necesidades y se dirigía a startups y pequeñas empresas.

Sin embargo, la empresa y su propuesta evolucionaron: «Spendesk requería una imagen más sofisticada y de primera calidad para reflejar la empresa completa y potenciada por IA en la que se había convertido», explica Michyl Culos, Director de Marketing.

Para crear un tono visual más auténtico y cercano, el director de diseño de marca, Quentin Chuzeville, y su equipo comenzaron a trabajar en una nueva identidad de marca y pasaron a una biblioteca de imágenes basada en la fotografía que pudiera comunicar el valor del producto con mayor claridad. Fue una gran oportunidad para que los equipos de marca y producto empezaran a trabajar más estrechamente y a crear más sinergia. «Necesitábamos unir fuerzas para crear la próxima identidad de marca de Spendesk», explica Quentin

Para asegurar la aceptación, Diseño de producto se asoció con Finanzas para cuantificar el valor del proyecto. Al medir el tiempo ahorrado en los flujos de trabajo de los usuarios y la reducción de las incidencias de asistencia, demostraron cómo una IU modernizada podría reducir costes y mejorar la satisfacción del cliente.

La transformación comenzó con un taller que unió a los equipos de diseño de marca y de producto. Usando Figma, evaluaron lo que ya existía e imaginaron el aspecto y la sensación de la nueva identidad de Spendesk. El segundo taller, celebrado en FigJam, fue una sesión de brainstorming dedicada a los atributos de la marca y a una renovación general de la identidad.

Marca, producto, tecnología y marketing unidos alrededor de un proceso común

El equipo de marca lleva usando Figma desde su creación. «Ha sido increíble ver a mi equipo trabajar junto con personas de diferentes departamentos y zonas geográficas, colaborando y mejorando nuestro proceso y creatividad. Figma es, con diferencia, la mejor herramienta para lograrlo», asegura Quentin.

El cambio de marca fue un esfuerzo interfuncional, guiado por los valores fundamentales de Spendesk, su nueva propuesta de valor de marca y una navegación del sitio web renovada centrada en una mejor experiencia de usuario. Para esta importante actualización de la IU, los equipos tenían un objetivo en mente: servir mejor a los clientes mediante una interfaz más clara y accesible y un descubrimiento de productos más intuitivo. Para lograrlo, organizaron sesiones de brainstorming y recopilaron exploraciones que exigían a todos pensar en grande, sin limitaciones. "Trabajar con FigJam y Figma facilitó enormemente la colaboración entre los equipos de diseño de productos y marcas", recuerda Mahedine Yahia, directora de diseño de productos.

Producción de recursos a gran escala

Para mantener la coherencia de la marca, el equipo de diseño de marca de Spendesk creó plantillas de Figma para los profesionales del marketing, permitiendo a aquellos que no fueran diseñadores actualizar el contenido cumpliendo las pautas. «Podían cambiar los anuncios o las publicaciones en las redes sociales ellos mismos. Solo teníamos que aprobarlo. Nos ahorró tiempo a todos», afirma Quentin. Esta combinación de control y libertad permitió a los equipos de diseño de marca trabajar en problemas complejos, mientras que los miembros del equipo de marketing tenían las herramientas para crear los recursos que imaginaban: un beneficio mutuo.

Escalabilidad mediante el sistema de diseño

Con la actualización de la IU facilitada por la creación de un equipo dedicado de sistemas de diseño, también se presentó una oportunidad para mejorar la alineación. El equipo trabajó arduamente para ampliar la cobertura del sistema de diseño, pasando del 67 % al 99 % en menos de un año. Usando variables de Figma como tokens de diseño, el sistema de diseño ahora está listo para incluir el modo oscuro.

Ahora hay bibliotecas comunes para el diseño de marca y de producto que unen las bases comunes de ambos equipos, como la tipografía, los colores y los iconos. La extracción de estos nuevos iconos, cuyo rediseño fue liderado por la diseñadora de marca de marca de Spendesk, Seimour Darbandi, se automatizó. Es una base sólida para asegurar la coherencia en todas las plataformas y un ahorro de tiempo para todos los que participan en el diseño y la codificación. Para Marie-Aline Millot, gerente de producto y diseñadora de productos/sistema de diseño, «crear este sistema basado en la API de Figma (entre otros elementos) ahorrará muchas horas de productividad al diseño de marca, al diseño de producto y a los ingenieros».

Dev Mode: la clave para una entrega eficiente

Una vez que se estableció la nueva dirección de arte, los desarrolladores empezaron a explorar los diseños utilizando Dev Mode, lo que facilitó mucho la colaboración con los diseñadores. A medida que se acercaba la fecha de lanzamiento, la función ayudó a acelerar el proceso y el uso de Figma por parte de los desarrolladores.

El nuevo diseño fue un éxito. Como ingeniero de front-end del sistema de diseño, Thibaut Patois explica: «Cuando se publicó la nueva IU, el equipo de ingeniería tenía una sala de batalla lista para corregir los bugs, ¡pero no había ninguno! Casi no me lo podía creer». En las dos primeras semanas, de entre más de 30 000 inicios de sesión, los usuarios solo enviaron siete comentarios negativos.

Éxito y orgullo compartidos

Esta estrecha colaboración entre el equipo de diseño de marca y más de 100 contribuidores de todos los departamentos ayudó a fomentar una cultura de propiedad compartida y demostró lo que pueden lograr los equipos multifuncionales.

Yana Sanzhapova, diseñadora sénior de productos, está satisfecha con este logro: «Estoy muy orgullosa del resultado». Fue un trabajo en equipo: sistema de diseño, desarrollo, dirección de IU... Me siento afortunada de estar rodeada de estas personas increíbles». Un éxito celebrado por una nominación a los Awwwards en diciembre de 2024.

Desde que los equipos de Spendesk pudieron liderar este ambicioso proyecto de rediseño, reuniendo marca, producto, tecnología y marketing, han podido confiar en la alineación multifuncional lograda durante la intensa colaboración que el proceso requirió. El equipo de front-end ya estaba familiarizado con las herramientas de Figma y usó el Dev Mode para implementar con éxito las creaciones de los equipos de diseño, fortaleciendo su colaboración con los equipos de producto y marketing.

Por último, pero no menos importante, las potentes herramientas creadas durante este proyecto facilitarán enormemente la creación e implementación de la próxima identidad gráfica de Spendesk, algo que los equipos ya están deseando que ocurra.