Resumen

El Banco Nacional de Australia (NAB) estableció una meta clara de convertirse en la empresa más centrada en el cliente en Australia y Nueva Zelanda. A escala empresarial, con más de 8,5 millones de clientes y más de 200 diseñadores en varias divisiones, NAB estaba atravesando las complejidades de 65 vías de incorporación, varias bibliotecas de componentes y actualizaciones manuales que tomaban días para un solo cambio.

Los requisitos regulatorios también incrementaron las exigencias de consistencia y control, y NAB respondió creando Elevate, un sistema de diseño unificado en Figma que permite a los equipos diseñar una sola vez y reutilizar el diseño en todas partes.

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

• 50 % de aumento en la velocidad de los registros, que optimizó el proceso de incorporación
• 70 % menos de campos en los formularios, que simplificó la experiencia del cliente
• Se eliminó la duplicación con componentes publicados y preaprobados
• Transferencia de diseño a desarrollo más fluida con Figma como la única fuente confiable

Desafío: Cuando el crecimiento crea fragmentación

A medida que el equipo de diseño de NAB creció, las experiencias de producto se diversificaron. Los equipos de producto en toda la organización resolvieron los mismos problemas de los clientes de maneras muy diferentes. Una solicitud de tarjeta de crédito puede existir en varias versiones, cada una haciendo preguntas similares, pero con variaciones en la redacción, el orden 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 brindemos las experiencias más sencillas y centradas en el cliente", dice Daniel Fisher, jefe de Diseño en NAB.

Había bibliotecas de componentes separadas en circulación, algunas con casi una década de antigüedad. Un cambio simple podía afectar múltiples bibliotecas y archivos. Incluso actualizar un indicador de progreso en varias pantallas y hacer un seguimiento de todas sus variaciones podía llevar días.

Las vías de incorporación múltiples crearon inconsistencias y aumentaron el riesgo, lo que llevó a complicaciones en las auditorías y revisiones de cumplimiento. Las herramientas anteriores no admitían la colaboración segura a gran escala. Los archivos se compartían por correo electrónico, las partes interesadas no podían revisar en contexto y los controles de acceso no cumplían con las necesidades de la empresa.

Solución: Crear un sistema de diseño que funcione en todas partes

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

Las "máquinas" desempeñan un papel importante para asegurar que la reutilización funcione a gran escala. Estos componentes inteligentes y reutilizables están diseñados teniendo en cuenta todas las variaciones posibles. Cada uno incluye lógica incorporada para la validación, estados de error y capacidad de respuesta, por lo que están listos para incorporarse a cualquier producto.

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

La consistencia en el diseño con Figma Empresa también reduce los riesgos de cumplimiento. Cada interacción en Elevate está preaprobada, estandarizada y es auditada en los diferentes productos y marcas. Los roles y permisos mantienen controlado el trabajo sensible. El historial de versiones y la publicación de bibliotecas crean un registro claro de qué cambió, cuándo y quién realizó cada cambio.

Ampliando el diseño atómico con Figma Empresa

Inspirado por la metodología de diseño atómico de Brad Frost, el equipo de NAB utilizó bloques de construcción reutilizables para crear experiencias consistentes y luego lo escaló 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 los clientes en todo el negocio. El equipo necesitaba componentes funcionales que pudieran adaptarse a cada caso de uso: en todos los recorridos de usuario internos y externos, rutas de error, variaciones de marca y estados de la UI.

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 por cientos de componentes, y los ahorros pueden ser de millones de dólares.

"En lugar de pasar tiempo rediseñando lo que ya existe, ahora podemos mejorar continuamente y enfocarnos en trabajos más creativos", dice Daniel.

Tematización y etiqueta blanca a escala con variables

Las variables expanden Elevate en productos y marcas sin duplicar el trabajo. Cada máquina lee un pequeño conjunto de tokens para color, tipo y radios de esquina, de modo que el mismo flujo puede aparecer entre marcas como NAB, Kogan Money, Qantas Money o Bank of Queensland con un simple intercambio de tokens. Los equipos previsualizan el cambio en el archivo, publican una vez y cada flujo que lo consume se actualiza en su 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é cambió, cuándo cambió y quién hizo el cambio. El diseño y la ingeniería revisan los mismos tokens en contexto, lo que reduce el ida y vuelta y mantiene los lanzamientos de marcas blancas dentro de los plazos previstos.

Impulsando una incorporación más rápida y sencilla con Dev Mode

Antes de Figma, las entregas de diseño a desarrollo ralentizaban a los equipos. Los diseñadores enviaban los archivos como adjuntos de correo electrónico y guardaban las especificaciones en documentos separados. Los casos extremos eran fáciles de pasar por alto. Alrededor del 50 % de la capacidad del equipo se destinaba a verificar las compilaciones frente a los diseños y registrar discrepancias.

Después de trasladar el proceso a Figma, un archivo de flujos integrales pasó a ser la única fuente confiable, con hasta 80 personas trabajando en él al mismo tiempo. Los desarrolladores abren el mismo archivo, revisan ramas y dejan feedback en contexto. En Dev Mode, inspeccionan el espaciado, los tokens y las propiedades de los componentes al pasar el cursor, y luego copian valores listos para el código. Los estados de error, casos extremos y rutas condicionales se sitúan junto a los diseños y se mantienen actualizados a medida que el trabajo evoluciona.

Estas prácticas hicieron posible el rediseño del proceso de incorporación de clientes de NAB. El viaje ahora comienza con la verificación de identidad. Un escaneo del pasaporte o de la licencia de conducir completa automáticamente los datos y hace el trabajo por el cliente al extraer información de una fuente confiable que el banco puede verificar.

Si una licencia de Victoria solo muestra iniciales, el formulario solicita el segundo nombre completo. Los componentes compartidos hacen que las mejoras impacten instantáneamente. Por ejemplo, un selector de números de teléfono internacional 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 al:

• Reducir los campos de formulario hasta en un 70 % y disminuir el tiempo de incorporación hasta en un 50 %, lo que creó una experiencia más rápida y fluida.
• Fortalecer la seguridad con captura facial y escaneo de identificación, demostrando que la velocidad y la seguridad pueden trabajar juntas.
• Eliminar la duplicación mediante la publicación de componentes preaprobados y copiarlos una vez y reutilizarlos en varios productos, para que los ingenieros construyan desde una única fuente confiable.

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 integra diseño e ingeniería, conecta componentes con el código, agiliza los ciclos de feedback y acelera la entrega basándose en comentarios reales de los clientes. También utiliza Figma Make y herramientas asistidas por IA para detectar fricciones en los flujos clave.

"Poder crear una indicación que diga 'mide la fricción de esa experiencia' y que eso proporcione un puntaje preciso es increíble", dice Daniel. "La automatización de tareas manuales es increíble".

Al incorporar Figma en el núcleo de su proceso, NAB muestra cómo la estructura y la creatividad pueden trabajar de la mano. En un sector altamente regulado que se basa en la confianza, está estableciendo un nuevo estándar de lo que significa la obsesión por el cliente a gran escala.