CommBank apuesta por la colaboración con Figma

Tiempo de lectura: 4 minutos

Resumen: CommBank, el banco más grande de Australia, se enfrentaba a un reto: cómo seguir innovando en un mundo en el que la tecnología por sí sola no es suficiente. Su proceso de diseño estaba repartido entre múltiples herramientas, lo que ralentizaba su trabajo y dificultaba la colaboración.

Con Figma y funciones como Dev Mode, el equipo de diseño de CommBank ahora trabaja con un 77 % más de eficiencia, reduciendo el tiempo de anotación de 6,5 minutos a solo 1,5 minutos por archivo. Este aumento en la velocidad y la precisión ha permitido a los equipos crear productos más rápidos y precisos, al tiempo que se elimina la falta de comunicación entre departamentos.

Reto: permanecer innovadores en un mundo digital en rápida evolución

Fundado en 1911, Commonwealth Bank of Australia (CommBank) ha sido una institución financiera de confianza durante más de un siglo, prestando servicio al 40 % de los australianos. Pero a medida que la banca digital cobró protagonismo, el banco tuvo que averiguar cómo seguir evolucionando para satisfacer las necesidades en constante evolución de sus clientes.

En un mundo donde la tecnología ya no es el único factor diferenciador, el verdadero reto quedó claro: ¿cómo puede un gigante consolidado seguir siendo innovador? Según Helen Hey, Directora Digital de CommBank, la respuesta reside en las personas y la mentalidad, no solo en la tecnología.

Solución: una herramienta que las gobierne a todas

Con la introducción de Figma, CommBank ha podido reducir significativamente estos procesos fragmentados. El equipo utilizaba cinco herramientas diferentes: Sketch para el diseño, Confluence para la documentación, Axure para los prototipos, Jira para el seguimiento y Outlook para la comunicación.

«Antes de la integración de Figma, los diseñadores trabajaban de forma aislada en sus equipos locales, lo que dificultaba la colaboración, la visibilidad y la entrega coherente de los trabajos pendientes», afirma Ryan Hoy, Diseñador IU Sénior. Los archivos se perdían en los correos electrónicos y era difícil encontrar las actualizaciones de diseño cuando se necesitaban.

Con la introducción de Figma, CommBank ha podido reducir significativamente estos procesos fragmentados. Esto no solo ha optimizado sus flujos de trabajo, sino que también ha garantizado que dispongan de las funciones de seguridad necesarias para una institución financiera, pues Figma cifra los datos tanto en reposo como en tránsito.

FigJam potencia la colaboración entre equipos

A medida que CommBank continuaba escalando sus actividades de diseño, FigJam, la pizarra virtual de Figma, se convirtió en una herramienta esencial para el brainstorming y la recopilación de comentarios entre los equipos.

Nikhil Jhala, Propietario de Producto Sénior, afirma: «Figjam ayuda a recopilar los comentarios de las partes interesadas en un solo lugar a escala, por lo que no se nos escapa nada valioso de lo que se dice».

La flexibilidad de FigJam fomentó la colaboración en tiempo real durante las reuniones, lo que permitió a los miembros del equipo de todos los niveles aportar sus ideas libremente.

«Figma fomenta una colaboración más estrecha entre diseñadores, ingenieros y propietarios de productos, lo que permite garantizar que nuestros esfuerzos colectivos satisfagan las necesidades de todas las partes interesadas», afirma Nate Nabete, Director de Operaciones de Proveedores Digitales de CommBank.

Eliminar la falta de comunicación y aumentar la eficiencia

Figma no solo mejoró el flujo de trabajo de diseño, sino que conectó a equipos que antes estaban aislados. Uno de los proyectos más importantes de CommBank consistió en actualizar un sitio web de 30 años de antigüedad y una aplicación de 15 años al mismo tiempo. Con sus antiguas herramientas, habría sido una pesadilla logística. Pero con Figma, la historia fue diferente.

Las bibliotecas de diseño de Figma permitieron al banco sincronizar automáticamente las actualizaciones entre los equipos, con el consiguiente ahorro de tiempo y manteniendo a todos alineados. ¿El resultado? CommBank lanzó la versión 5 de su aplicación en mayo de 2023, repleta de nuevas funciones como contenido personalizado y navegación dinámica, todo ello creado y actualizado con Figma.

Mejorar la experiencia de los desarrolladores con Dev Mode

Figma no solo ha transformado el proceso de diseño de CommBank, sino que también ha facilitado el trabajo de los desarrolladores.

«Antes de Figma, los diseñadores de IU tenían que especificar y anotar manualmente cada pantalla con el tamaño, el espaciado y todos los demás detalles de la disposición», afirma Joshua May, Diseñador IU Sénior.

El equipo de diseño de CommBank realizó un experimento para comparar el tiempo necesario para entregar, anotar y especificar los archivos de diseño con y sin Dev Mode. Los resultados fueron claros: las tareas que llevaban 6,5 minutos sin Dev Mode se completaron en solo 1,5 minutos con Dev Mode, lo que demuestra su impacto positivo en los flujos de trabajo tanto de los diseñadores como de los ingenieros.

«Con Dev Mode, los desarrolladores solo tienen que pasar el cursor por encima de los elementos para comprobar todos esos detalles, lo que ha hecho que el proceso de traspaso sea más fluido y requiera mucho menos tiempo», afirma Joshua.

Durante el último año, el equipo de CommBank ha ampliado el uso de Dev Mode. Una de las mayores mejoras ha sido la integración de tokens de diseño, que garantizan la sincronización perfecta entre el diseño y el código. Con los tokens, los diseñadores pueden entregar archivos que incluyen todos los detalles técnicos que los ingenieros necesitan, haciendo que todo el proceso sea más fluido y rápido para ambos equipos.

«Figma nos ayudó a crear la estructura que queríamos para nuestros tokens», explica Gordana. «Una vez configurados los componentes con esos tokens, los diseñadores pueden pasárselos a los ingenieros, y ya está todo listo, sin necesidad de ningún esfuerzo adicional. Esto reduce considerablemente el trabajo manual para ambas partes, y los ingenieros pueden obtener lo que necesitan mucho más deprisa que antes».

Dev Mode también facilita la colaboración entre los equipos y garantiza que todo se adapte al sistema de diseño de CommBank, Lumen. La evolución de su sistema de diseño se ha visto respaldada por la capacidad de Figma para integrar la documentación y los procesos de diseño en una sola plataforma. Esta integración ha ayudado al equipo del sistema de diseño a mantener la coherencia, garantizando que todos estén alineados con los últimos componentes y patrones.

Encontrar el código de componente adecuado sigue siendo un proceso que requiere bastante tiempo para los ingenieros de aplicaciones de CommBank. Existe margen para el error y supone un esfuerzo adicional localizar las cosas. Por eso, el equipo de CommBank está entusiasmado con el potencial de Code Connect, que optimizará aún más las cosas al integrar el código de los componentes del sistema de diseño directamente en Dev Mode.

«Vemos un enorme potencial en Code Connect, especialmente para nuestros equipos de aplicaciones», afirma Gordana. «Estamos deseando tenerlo todo en un solo lugar dentro de Figma, ya que eso ahorrará mucho tiempo a nuestros ingenieros y reducirá el riesgo de errores».

Figma ha tenido un papel fundamental en la evolución del banco, que ha pasado de ser tradicional a innovador, y sigue transformando la forma en que su equipo crea experiencias bancarias digitales de vanguardia.

«La forma en que diseñamos hoy no es la forma en que diseñaremos en los próximos 12 meses, ni siquiera en los próximos seis meses», comenta Helen.

Con Figma, CommBank está preparado para afrontar cualquier reto que se presente.