BancaNet Empresarial — UX/UI

Para crecer hay que levantarnos de nuestras peores caídas.

Liderazgo

El proyecto que más ha contribuido a mi crecimiento profesional. Aprendí valiosas lecciones de liderazgo al unificar un equipo dividido, practicar la escucha activa con mis colaboradores, fomentar la paciencia y compartir mi experiencia para impulsar el crecimiento del equipo.

Resiliencia

Cada nuevo obstáculo es una oportunidad para aprender y crecer. Aunque a veces las ideas no coincidían con las necesidades de los usuarios, cada tropiezo me enseñó a afrontar los desafíos y superar los límites de lo esperado en el producto.

Adaptabilidad

Sin importar el objetivo del negocio, la viabilidad tecnológica o las necesidades de los usuarios, siempre tuve una buena base metodológica para entregar valor en todas las fases del proyecto. Ejecuté diseño codo a codo con el equipo y negocié con líderes de alto nivel para mejorar el producto en beneficio de las personas.

Trabajo en equipo

No se puede maximizar el valor sin contar con el equipo adecuado para alcanzar los objetivos. Agradezco haber trabajado con el equipo mencionado al principio, cuya dedicación influyó tanto en mi crecimiento profesional como personal. Sin su compromiso, no habríamos alcanzado este logro.

El mayor aprendizaje fue enseñarle el valor del diseño a un equipo de negocio que vio el valor de los usuarios y cómo esto mejoró su producto.

1. Redefiniendo la interfaz y arquitectura

Al tratarse de un rediseño completo de la banca empresarial web y con una nueva plataforma basados en Angular, era primordial replantear la experiencia del usuario.

Optamos por un método más tradicional antes de crear algún símbolo en Sketch:

• Sitio modular y personalizable
• Se evaluó la viabilidad técnica
• Evaluar la usabilidad e interacción
• Alineado a la marca institucional

Flujos de usuario

La creación de flujos junto a los dueños del producto nos ayudó a comprender todo el recorrido del usuario y cubrir todas las pantallas de los casos posibles que se llegarían a presentar, y así tener mapeado cada uno de los touch points del usuario.

Wireframes

Ya que teníamos una lista de flujos y múltiples PRDs para cubrir los escenarios, comenzamos la construcción de los bocetos y wireframes de bajo y alto nivel para detallar la arquitectura de información, validar el producto con el negocio y confirmar la viabilidad tecnológica.

La viabilidad de la arquitectura de información se probó con usuarios in house para validar la experiencia y navegación de los flujos, teniendo varias iteraciones en el proceso.

2. Refrescando el look & feel

Elegimos un estilo de diseño fresco y moderno, sin dejar de lado el estilo institucional del banco, creando una combinación simple entre estilos. Se tuvo que crear una nueva guía visual para guiar el diseño de una manera consciente.

Portal viejo: La plataforma que los usuarios venían utilizando tenía un estilo muy institucional y anticuado, con problemas de usabilidad evidentes.

Portal nuevo: Al conocer la nueva propuesta del portal los vaticinamos con un sentimiento de velocidad, modernidad y comodidad. Lo cual para las plataformas financieras era todo un reto.

El diseño modular en su mejor expresión adaptado a las necesidades del banco.

1. UI Kit sin ser design system

Una institución bancaria tiene diferentes áreas y negocios y siendo Citibanamex uno de los bancos más importantes de la época, era imprescindible crear la base de la interfaz con una amplia librería visual y de tono y voz.

Este UI Kit se creó para cubrir la necesidad de mantener el diseño coherente. Un sistema de diseño no era viable en ese momento ya que las áreas del banco no se comunicaban entre sí.

2. Interfaz primera versión

Con la librería de componentes locales definida, lo único que restaba era la construcción del UI completo de todos los flujos de usuario definidos.

Se construyeron user journeys completos para: Dashboard y Multitasker.

Antes de herramientas como Zeplin, Abstract o Figma, el handoff a desarrollo era un ejercicio bastante tradicional y manual.

La guía de estilos

Anteriormente el handoff a desarrollo lo entregábamos con una bella y estilizada guía de estilos creada en InDesign. Esta guía nos permitió tener una relación diseño-desarrollo con una estabilidad y coherencia significativa antes de la llegada de nuevas herramientas.

La guía cubría: tipografía, colores, botones estándar (30px de altura, radio 2px), header, flujo de navegación, áreas de trabajo y componentes.

Estadísticas finales

Ha sido el proyecto en el que más ejecución manual en una herramienta de diseño se había realizado hasta ese momento en un solo proyecto.