Citi (Brasil) - Cartões de crédito
Equipo de diseño de W3
Participé en el rediseño de la página principal de la sección Cartões del sitio Citibank Brasil como diseñador UX/UI. Trabajé junto al director de arte, el líder del proyecto y el desarrollador frontend.
Se nos planteó el objetivo de incrementar la tasa de conversión del flujo de comparación de tarjetas de crédito previo al formulario de solicitud de tarjeta de crédito. Para lograrlo debíamos centrarnos en mejoras de usabilidad y look and feel.
Workflow
La cuestión era como interactuaban 2 features en paralelo: por un lado un filtro para las tarjetas que permitiera al usuario visualizarlas de acuerdo a 4 criterios de filtro y un selector de tarjetas que permite en una pantalla posterior comparar las características de cada una.
Sketches de interacción
Se crearon wireframes para una nueva disposición de tarjetas y un comparador que funciona en paralelo con el filtro.
Prototipos
Los resultados de los testeos de usabilidad con prototipos mostraron dificultad para comprender el comparador como diferenciado de los filtros. También encontramos dificultad en entender cuál era la opción para seleccionar las tarjetas que se van a comparar tanto en celular vertical como en desktop. Junto con el cliente se decidió ocultar las opciones del filtro.
Mockups
En la estética se puso el foco en una interfaz limpia y clara.
Solución
La solución entonces consistió en un comparador que permite agregar o quitar tarjetas y efectuar la comparación, un filtro con etiquetas y una nueva disposición de las tarjetas en boxes con quickview en un contenedor expandible.
Resultados
Se realizó un A/B testing entre la versión de producción (experiencia control) y el nuevo rediseño (experiencia nueva). La influencia que la nueva versión de la vitrina tuvo sobre el acceso al formulario de contratación de tarjetas se incrementó en un 29%.
