Resumen

El National Australia Bank (NAB) estableció un objetivo claro para convertirse en la empresa más centrada en el cliente de Australia y Nueva Zelanda. A escala empresarial, con más de 8,5 millones de clientes y más de 200 diseñadores en múltiples departamentos, NAB estaba navegando por las complejidades de alrededor de 65 trayectorias de incorporación, varias bibliotecas de componentes y actualizaciones manuales que tomaban días para un solo cambio.

Las exigencias normativas también elevaron el nivel de coherencia y control, y NAB respondió creando Elevate, un sistema de diseño unificado en Figma que permite a los equipos diseñar una vez y reutilizar en todas partes.

Los resultados: una experiencia de incorporación más sencilla para los clientes y una mayor eficiencia para NAB.

• Registros un 50 % más rápidos con un proceso de incorporación simplificado
• Un 70 % menos de campos en el formulario, reduciendo el conflicto con el cliente
• Eliminación de la duplicación con componentes publicados y preaprobados
• Transferencia más fluida del diseño al desarrollo con Figma como la única fuente de veracidad

Desafío: cuando el crecimiento crea fragmentación

A medida que el equipo de diseño de NAB se expandió, las experiencias de producto divergieron. Los equipos de productos de toda la organización resolvieron los mismos problemas de los clientes de maneras muy diferentes. Una solicitud de tarjeta de crédito puede realizarse de varias formas, cada una haciendo preguntas similares, pero con variaciones en la redacción, el pedido y la interacción. “Es un problema común en las grandes empresas, pero la ambición de NAB es ser el mejor, así que solo estaremos satisfechos cuando entreguemos las experiencias más sencillas y centradas en el cliente”, dice Daniel Fisher, responsable del diseño en NAB.

Había bibliotecas de componentes separadas en circulación, algunas de hace casi una década. Un sencillo cambio podría afectar a múltiples bibliotecas y archivos. Incluso actualizar un indicador de progreso en varias pantallas y rastrear todas sus variaciones podría llevar días.

Las diversas vías de incorporación generaron inconsistencias y aumentaron el riesgo, lo que llevó a complicaciones en las revisiones de cumplimiento y auditorías. Las herramientas anteriores no permitían una colaboración segura a gran escala. Los archivos se compartieron por correo electrónico, las partes interesadas no podían revisar en contexto y los controles de acceso no cumplían con las necesidades empresariales.

Solución: crear un sistema de diseño que funcionase en todas partes

NAB se reunió en torno a un principio sencillo del director general de diseño Lance Thornswood: una sola forma de hacer todo. Esa claridad se convirtió en Elevate, un sistema de diseño unificado creado sobre Figma Empresa, que permite crear patrones una vez y reutilizarlos en todas partes.

Las “máquinas” desempeñan un papel para garantizar que la reutilización funcione a gran escala. Estos componentes inteligentes y reutilizables están diseñados teniendo en cuenta cada posible variación. Cada uno incluye lógica incorporada para validación, estados de error y capacidad de respuesta, por lo que están listos para integrarse en cualquier producto.

Las bibliotecas publicadas de Figma hacen que este modelo funcione a escala. Cuando el equipo actualiza un componente central, cada archivo que lo consuma recibe el cambio. Solo en el último año, estas bibliotecas fueron utilizadas más de 100 000 veces en todo NAB.

La coherencia en el diseño con Figma Empresa también reduce los riesgos de cumplimiento. Cada interacción en Elevate está preaprobada, estandarizada y puede auditarse a través de productos y marcas. Los roles y permisos mantienen el trabajo sensible controlado. El historial de versiones y la publicación de bibliotecas crean un registro claro de qué cambió, cuándo y quién lo hizo.

Expansión del diseño atómico con Figma Empresa

Inspirado por la metodología del diseño atómico de Brad Frost, NAB utilizó bloques de construcción reutilizables para crear experiencias coherentes, luego lo amplió aún más con un sistema de componentes inteligentes y adaptables llamados "máquinas" y "fábricas". El diseño atómico sirvió como la base de NAB para Elevate. Pero por sí solo, no fue suficiente para unificar cada interacción con el cliente en la totalidad del negocio. El equipo necesitaba componentes funcionales que pudieran adaptarse a cada caso práctico: a través de recorridos de usuario externos e internos, rutas de error, variaciones de marca y estados de la IU.

Por ejemplo, utilizando las variables, modos e instancias anidadas de Figma, NAB creó un componente de número de teléfono que se adapta a cada contexto. Cuando 25 diseñadores reutilizan este componente en lugar de reconstruirlo, se recuperan aproximadamente 25 días de trabajo de diseñador. Multiplica eso a través de docenas de componentes y los ahorros pueden suponer millones de dólares.

"En lugar de invertir tiempo volviendo a diseñar lo que ya existe, ahora podemos mejorar continuamente y centrarnos en trabajos más creativos", afirma Daniel.

Tematización y marcas blancas a escala con variables

Las variables incluyen Elevate en productos y marcas sin duplicar el trabajo. Cada máquina lee un pequeño conjunto de tokens para el color, el tipo y los radios de las esquinas, por lo que el mismo flujo puede aparecer a través de marcas como NAB, Kogan Money, Qantas Money o Bank of Queensland con un simple intercambio de tokens. Los equipos prevén el cambio en el archivo, lo publican una vez y cada flujo consumidor se actualiza en el lugar.

Debido a que las variables residen en bibliotecas publicadas, la gobernanza está incorporada. Los roles y permisos controlan quién puede editar. El historial de versiones registra qué se cambió, cuándo y quién lo hizo. Diseño e ingeniería revisan los mismos tokens en contexto, reduciendo idas y venidas y manteniendo los lanzamientos de marca blanca según lo programado.

Impulso de incorporaciones más rápidas y sencillas con Dev Mode

Antes de Figma, las transferencias del diseño al desarrollo ralentizaban a los equipos. Los diseñadores enviaban archivos como adjuntos de correo electrónico y mantenían las especificaciones en documentos separados. Era fácil pasar por alto los casos de Edge. Aproximadamente el 50 % de la capacidad del equipo se dedicó a comprobar las recopilaciones en función de los diseños y las lagunas de registro.

Después de trasladar el proceso a Figma, un archivo de flujos de extremo a extremo es la fuente de veracidad, con hasta 80 personas trabajando en él al mismo tiempo. Los desarrolladores abren el mismo archivo, revisan ramas y dejan comentarios en contexto. En Dev Mode, inspeccionan el espaciado, los tokens y las propiedades de los componentes al pasar el ratón y luego copian los valores listos para el código. Los estados de error, los casos límite y las rutas condicionales se encuentran junto a los diseños y se mantienen actualizados a medida que el trabajo evoluciona.

Estas prácticas hicieron posible la remodelación del proceso de incorporación del cliente de NAB. El recorrido ahora comienza con la verificación de identidad. Un escaneo de un pasaporte o permiso de conducir precarga y hace el trabajo para el cliente tomando datos de una fuente fiable que el banco puede verificar.

Si un permiso de Victoria solo muestra las iniciales, el formulario solicita el nombre completo del segundo nombre. Los componentes compartidos hacen que las mejoras surtan efecto al instante. Por ejemplo, un selector de números de teléfono internacionales puede reconocer números locales que comienzan con 04 y formatearlos automáticamente.

Con Figma, NAB agilizó la incorporación y aumentó la productividad del equipo mediante:

• La reducción de los campos de formulario hasta en un 70 % y la disminución del tiempo de incorporación hasta en un 50 %, creando una experiencia más rápida y fluida.
• El refuerzo de la seguridad con captura facial y escaneo de identificación, demostrando que la velocidad y la seguridad pueden funcionar juntas.
• La eliminación de la duplicación mediante la publicación de componentes preaprobados y su copia y reutilización en varios productos, de modo que los ingenieros trabajen a partir de una única fuente fiable.

El diseño como motor de la obsesión por el cliente

El sistema de diseño de NAB sigue evolucionando. Con funciones como Code Connect y Figma MCP, el equipo está uniendo el diseño y la ingeniería, conectando componentes con el código, agilizando los ciclos de comentarios y acelerando la entrega basándose en comentarios reales de los clientes. También están usando Figma Make y herramientas asistidas por IA para detectar fricciones en los flujos clave.

"Poder solicitar y decir ‘cuenta el conflicto de esa experiencia’, y que eso proporcione una puntuación precisa, es increíble", dice Daniel. "La automatización de tareas manuales es increíble".

Al integrar Figma en el corazón de su proceso, NAB muestra cómo la estructura y la creatividad pueden trabajar codo con codo. En un sector altamente regulado basado en la confianza, está estableciendo un nuevo estándar de cómo se ve la obsesión por el cliente a gran escala.