Así usó Volkswagen Group Services GmbH Figma y FigJam para mejorar la comunicación entre los equipos de diseño e ingeniería

Volkswagen Group Services, una empresa del Grupo Volkswagen con sede en Wolfsburg, Alemania, ofrece una amplia gama de servicios a las marcas de Volkswagen, desde investigación y desarrollo (I+D) hasta compras. Su equipo de Servicios de Desarrollo Empresarial tiene una misión muy estratégica: crear nuevos modelos de negocio, traducirlos en productos y prepararlos para entrar en nuevos mercados.

Proyectos tan ambiciosos como este requieren una gran colaboración entre equipos multidisciplinarios, y no es fácil poner a todos de acuerdo. Además, había otra dificultad: Volkswagen Group Services había comenzado recientemente a experimentar con una mayor flexibilidad en los lugares y horarios de trabajo.

Así que cuando comenzaron un proyecto importante, querían encontrar una nueva forma de colaborar que evitara los problemas habituales que suelen surgir en el desarrollo de productos. Con Figma y FigJam, lo consiguieron.

Figma y FigJam conectan el diseño y la ingeniería

Volkswagen Group Services se propuso crear una plataforma de cliente a cliente que ayudara a las personas a alquilar espacios de almacenamiento. La idea era crear un mercado en el que los usuarios pudieran tanto publicar espacios de almacenamiento disponibles como buscar soluciones de almacenamiento en todo el país.

“Nuestro objetivo es crear una red global para empresas de todos los sectores cuya creación de valor depende de la logística”. Stefanos Tsoutis, creador de empresas y mentor empresarial en Worage, Volkswagen Group Services.

Pero primero, necesitaban diseñar y crear un MVP para la nueva plataforma, al tiempo que definían los elementos de la marca y el modelo de negocio principal. Para ello, se requirió una importante contribución por parte de los equipos de diseño, experiencia de usuario, experiencia del cliente e ingeniería.

“El objetivo era crear desde cero un modelo de negocio y un producto escalables, establecer una marca en el mercado, lanzar un MVP e iterar continuamente el producto y el modelo de negocio”. Simon Elvers, emprendedor interno y propietario de producto en Worage, Volkswagen Group Services.

Con tanta gente involucrada, sería fácil cometer errores, y corregirlos resultaría muy costoso. Volkswagen Group Services necesitaba perfeccionar el proceso de transferencia entre los equipos de diseño e ingeniería.

El equipo de diseño creó un prototipo de la aplicación en Figma, que incluye un sistema de diseño, páginas detalladas y animaciones. También planificaron meticulosamente cada operación y condición que afectaba al flujo, proporcionando una guía visual para desarrolladores, diseñadores y partes interesadas.

“El reto consistía en crear una visualización de la aplicación y un entendimiento común de cómo funcionará la plataforma en términos de flujo, transferencia de datos y garantía de calidad”. Hendrik Surma, arquitecto de software principal en Worage, Volkswagen Group Services.

Fue un gran comienzo, pero los líderes del proyecto necesitaban una forma de plasmar las primeras ideas de los equipos y obtener comentarios. Y para ello, necesitaban una comunicación en vivo significativa entre las diferentes ubicaciones. La pizarra colaborativa en línea de Figma, FigJam, fue la solución perfecta, ya que conectaba a la perfección las pantallas de los usuarios en diferentes ubicaciones. Los ingenieros pudieron aportar su opinión desde el principio para identificar los retos operativos que afectarían a la funcionalidad y poder trabajar juntos en la búsqueda de soluciones. Esta colaboración estrecha evitó una serie de problemas.

El uso de FigJam junto con Figma también introdujo formas innovadoras de visualizar el diseño del producto. El equipo documentó los complejos flujos de usuarios en FigJam y los conectó con los archivos, páginas y marcos maestros de Figma, lo que facilitó a los diferentes equipos la comprensión de los flujos y el acceso a más detalles.

“La visualización mediante FigJam y Figma desempeñó un papel fundamental a la hora de coordinar a diseñadores, desarrolladores, propietarios de productos y partes interesadas, lo que fomentó una comprensión común de las complejidades del proyecto”. Laura Lake, diseñadora de productos en un puesto directivo en Worage, Volkswagen Group Services.

Remediar la falta de comunicación y la brecha tecnológica

La combinación de la representación visual de las interacciones del producto con la documentación integrada permitió a los ingenieros comprender con precisión cómo se mueve la información entre las diferentes fuentes y destinos de datos. Esto les permitió optimizar los procesos y minimizar la necesidad de solicitudes al servidor, lo que mantuvo bajos los costos operativos.

Los diseñadores utilizaron visualizaciones para crear una experiencia de usuario fluida y coherente. Podían ver qué interacciones se activaban con las diferentes llamadas a la acción para localizar cualquier pantalla que faltara y detectar rápidamente las áreas que necesitaban mejoras.

El equipo de gestión de proyectos también se benefició. Normalmente, el seguimiento de alto nivel de la gestión de proyectos de Volkswagen Group Services era solo un punto de referencia: las personas tenían que interpretar con precisión las tareas y luego averiguar dónde acudir para obtener contexto y recursos. En esta ocasión, el equipo de Volkswagen Group Services utilizó el complemento JIRA de Figma Atlassian Suite Integration para vincular los tickets de gestión de proyectos a pantallas y funciones específicas. Fue un gran avance en términos de eficiencia.

Anteriormente, el enlace de las pantallas tenía que copiarse manualmente en los tickets de JIRA, lo que resultaba tedioso para los desarrolladores, que tenían que alternar entre JIRA, Figma y VS Code. La nueva integración de JIRA facilitó el acceso a todo el contexto relevante que necesitaban. Esto permitió a los propietarios de productos, desarrolladores y gestores de proyectos supervisar fácilmente el estado de los componentes y funciones individuales, lo que agilizó aún más la gestión de proyectos.

Los propietarios de productos consideraron que las visualizaciones eran un atajo para tomar decisiones informadas sobre qué características y funcionalidades priorizar. En general, este enfoque integrado fue mejor que utilizar herramientas que no estaban conectadas entre sí. Las visualizaciones fueron una forma intuitiva para que los equipos perfeccionaran su visión y comunicaran los detalles a todos los que dieron vida a Worage.

Dev Mode mejora la entrega entre diseñadores y desarrolladores

Muchos de los desafíos en la entrega entre diseñadores y desarrolladores se resolvieron en 2023 con la introducción por parte de Figma de Dev Mode, un espacio en Figma con funciones que ayudan a los diseñadores y desarrolladores a traducir los diseños en código más rápidamente. Cuenta con un área de pruebas de componentes que permite al equipo de ingeniería de Volkswagen Group Services previsualizar diferentes componentes y sus variaciones antes del desarrollo, lo que elimina las incertidumbres sobre el comportamiento de los componentes.

En la sección de recursos, los desarrolladores de Volkswagen Group Services pueden descargar fácilmente íconos, imágenes y videos para las pantallas pertinentes, lo que elimina la necesidad de intercambiar paquetes de recursos adicionales. Esto centraliza todo, lo que convierte a las pantallas y páginas listas para el desarrollo en una fuente definitiva tanto para diseñadores como para desarrolladores.

El equipo de Volkswagen Group Services descubrió que el nuevo modo de comparación reducía los errores de desarrollo al mostrar claramente los cambios realizados en las pantallas, lo que eliminaba las conjeturas y la sobrecarga cognitiva del equipo de desarrollo y, en última instancia, ahorraba tiempo. Además, la capacidad de extraer código para elementos en varios lenguajes ha facilitado la inspección y la implementación al equipo de desarrollo, lo que ha ahorrado tiempo y reducido los errores.

En general, Volkswagen Group Services descubrió que Dev Mode fomentaba la colaboración al reducir significativamente las fricciones en los traspasos entre diseñadores y desarrolladores.

“Usamos la colaboración como una herramienta para innovar y agregar valor a nuestras ideas. Y Figma facilita esa colaboración dentro de nuestro equipo a la perfección. Es una configuración increíble”, afirma Parth Pandya, diseñador de productos e impulsor de Figma, Volkswagen Group Services.

El crecimiento de la visión de Worage con Figma.

El proyecto Worage estaba muy avanzado y se preparó para ayudar a las pequeñas empresas a acceder al espacio de almacenamiento que necesitan. Entró en funcionamiento a finales de 2024.

“La claridad en la toma de decisiones y feedback regular pueden tener un impacto medible en nuestros KPI de CX. La combinación de Figma y FigJam nos ayudó a comunicarnos mejor con todas las partes interesadas desde el inicio del proceso de diseño. Esta alineación creó un producto centrado en el cliente y de mayor fidelidad, y nos ayudó a pasar a la producción de forma más rápida y rentable”, afirma Sandra Schaus, experta principal en UX de Volkswagen Group Services.