Volkswagen Group Services GmbH utilizó Figma y FigJam para cerrar la brecha de comunicación entre diseño e ingeniería

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

Proyectos de tal envergadura requieren mucha colaboración entre equipos multidisciplinarios, y no es fácil conseguir que todos estén de acuerdo. Había otro problema: Volkswagen Group Services había empezado recientemente a introducir más flexibilidad en los lugares y horarios de trabajo.

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

Figma y FigJam cierran la brecha de comunicación entre diseño e ingeniería

Volkswagen Group Services se propuso crear una plataforma de cliente a cliente que ayudara a la gente a alquilar espacios de almacenamiento. La idea era crear un mercado en el que los usuarios pudieran tanto anunciar 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 dependa de la logística“. – Stefanos Tsoutis, creador de empresas y mentor empresarial en Worage, Volkswagen Group Services.

Pero primero tenían que diseñar y crear un MVP para la nueva plataforma, mientras decidían los elementos de marca y el modelo de negocio principal. Para ello fue necesaria una importante colaboración por parte de sus equipos de diseño, experiencia de usuario, experiencia de cliente e ingeniería.

“El objetivo era crear un modelo de negocio y un producto escalables partiendo de cero, consolidar una marca en el mercado, lanzar un MVP e ir perfeccionando continuamente tanto el producto como el modelo de negocio”. – Simon Elvers, emprendedor y propietario de producto en Worage, Volkswagen Group Services.

Con tanta gente involucrada, sería fácil cometer errores, y corregirlos saldría muy caro. Volkswagen Group Services necesitaba perfeccionar la coordinación entre los equipos de diseño e ingeniería en la entrega.

El equipo de diseño creó un prototipo de la aplicación en Figma, que incluía un sistema de diseño, páginas detalladas y animaciones. Además, 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 llegar a un entendimiento común sobre cómo funcionará la plataforma en cuanto a flujos, transferencia de datos y control de calidad”. – Hendrik Surma, arquitecto jefe de software en Worage, Volkswagen Group Services.

Fue un gran comienzo, pero los responsables del proyecto necesitaban una forma de plasmar en una pizarra las primeras ideas de los equipos y recabar comentarios. Y para ello, necesitaban una comunicación eficaz en tiempo real entre diferentes ubicaciones. La pizarra colaborativa en línea de Figma, FigJam, fue la solución perfecta, ya que conectó a la perfección las pantallas de los usuarios en diferentes ubicaciones. Los ingenieros pudieron opinar desde el principio, identificando los retos operativos que afectarían a la funcionalidad para poder trabajar juntos y encontrar soluciones. Esta colaboración codo con codo evitó una serie de problemas.

El uso de FigJam junto con Figma también aportó formas innovadoras de visualizar el diseño del producto. El equipo documentó flujos de usuario complejos en FigJam y los conectó a los archivos, páginas y marcos principales de Figma, de modo que los distintos equipos pudieran entender fácilmente los flujos y acceder a más detalles.

“La visualización con FigJam y Figma fue clave para alinear a los diseñadores, desarrolladores, propietarios de producto y partes interesadas, fomentando una comprensión común de las complejidades del proyecto”. – Laura Lake, diseñadora de productos con un rol destacado en Worage, Volkswagen Group Services.

Superando la brecha entre la ingeniería y las comunicaciones

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 se tradujo en una reducción de los costes operativos.

Los diseñadores también utilizaron visualizaciones para crear una experiencia de usuario coherente y pulida. Así pudieron ver qué interacciones se activaban con las distintas llamadas a la acción para detectar cualquier pantalla que faltara, e identificar rápidamente las áreas que necesitaban pulirse.

El equipo de gestión de proyectos también se benefició. Normalmente, el seguimiento de la gestión de proyectos de alto nivel de Volkswagen Group Services solo servía como punto de referencia: la gente tenía que interpretar con precisión las tareas y después averiguar dónde buscar contexto y recursos. Esta vez, el equipo de Volkswagen Grupo Services utilizó el plugin de JIRA para la integración de Figma con Atlassian Suite para vincular los tickets de gestión de proyectos a pantallas y funciones específicas. Fue todo un avance en cuanto a eficiencia.

Antes, había que copiar manualmente el enlace de las pantallas en los tickets de JIRA, lo que resultaba tedioso para los desarrolladores, que tenían que estar cambiando constantemente entre JIRA, Figma y VS Code. La nueva integración con JIRA hizo que todo el contexto relevante al que necesitaban acceder fuera fácilmente accesible. Esto permitió a los propietarios de producto, desarrolladores y gerentes de proyectos supervisar fácilmente el estado de los componentes y funciones individuales, optimizando aún más la gestión de proyectos.

Los propietarios de producto consideraron que las visualizaciones eran un atajo para tomar decisiones fundamentadas sobre qué características y funcionalidades priorizar. En general, este enfoque integrado resultó mejor que usar herramientas que no se conectaban entre sí. Las visualizaciones fueron una forma intuitiva para que los equipos perfeccionaran su visión y comunicaran los detalles a todos los que dan vida a Worage.

Dev Mode mejora la entrega del diseñador al desarrollador

Muchos de los retos que planteaba la entrega del diseñador al desarrollador se resolvieron en 2023 con la introducción por parte de Figma de Dev Mode, un espacio dentro de Figma con funciones que ayudan a diseñadores y desarrolladores a convertir los diseños en código más rápidamente. Incluye un entorno 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 correspondientes, lo que elimina la necesidad de intercambiar paquetes de recursos adicionales. Esto permite centralizarlo todo, convirtiendo 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, eliminando las conjeturas y la sobrecarga cognitiva para el equipo de desarrollo, y ahorrando tiempo en definitiva. Además, la posibilidad de extraer código para elementos en varios lenguajes ha facilitado la revisió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 dificultades en las entregas entre diseñadores y desarrolladores.

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

Desarrollo de la visión de Worage con Figma.

El proyecto Worage está muy avanzado y se está preparando para ayudar a las pequeñas empresas a conseguir el espacio de almacenamiento que necesitan. Estará disponible a finales de 2024.

“La claridad en la toma de decisiones y el intercambio regular de comentarios pueden tener un impacto cuantificable en nuestros indicadores clave de rendimiento de la CX. La combinación de Figma y FigJam nos ayudó a comunicarnos mejor con todas las partes interesadas desde el principio del proceso de diseño. Esta alineación dio lugar a un producto más fiel y centrado en el cliente, y nos ayudó a pasar a la fase de producción de forma más rápida y rentable”, afirma Sandra Schaus, experta principal en UX de Volkswagen Group Services.