En este artículo, hablo sobre mi proceso de trabajo en uno de los proyectos a gran escala que renueva la herramienta interna de Probo (la llamamos Cerebro ) para una mejor atención al cliente.

¿Qué es Cerebro?

¡Cerebro es una única fuente de verdad para todo lo relacionado con Probo! Es la herramienta interna de Probo que tiene varias secciones, incluida la creación de contenido (para crear y enviar contenido a la aplicación), Etiquetas (crear etiquetas de usuario y asignar una acción a esas etiquetas), Tablero y Usuarios.

La sección de detalles del usuario es la base de datos de los usuarios, donde el equipo de CX puede verificar la información sobre las quejas de los usuarios y revertir al usuario.

Para este artículo, está viendo cómo rediseñamos la sección de detalles del usuario de Cerebro.

La breve

Rediseño de la sección de detalles del usuario en Cerebro para mejorar la experiencia de usuario y la productividad del equipo de atención al cliente de Probo.

Comprender el problema

El equipo de soporte usa Cerebro para verificar las actividades de los usuarios realizadas en la aplicación.

Para esta tarea, primero identifiqué los flujos de usuarios principales y luego busqué problemas de UX en ellos:

Mientras me sentaba con el equipo de soporte para observar sus flujos de trabajo e identificar problemas de usabilidad, resolví algunos tickets yo mismo. Esto fue durante la temporada de IPL cuando recibimos más de 1000 tickets por ejecutivo de la comunidad, por lo que su carga de trabajo fue inmensa.

Verlos tan decididos a brindar la mejor experiencia de soporte a los usuarios probo me conmovió y me impulsó aún más a mejorar su experiencia diaria a través del diseño.

Problemas centrales identificados:

1. Escaneo deficiente de la información: el principal trabajo de los usuarios es obtener información de Cerebro, pero al mirar a través de las tablas, hubo mucho esfuerzo cognitivo, ya que tenían que concentrarse mucho para encontrar la información requerida en la pantalla.
2. Navegación compleja: para algunos flujos de usuarios, la navegación era compleja y estaba oculta.
3. Aumento de la carga cognitiva: el diseño anterior no se alineaba con las leyes de jerarquía y proximidad de Gestalt para reducir la carga cognitiva de los usuarios.
   Además, con los flujos de usuarios dados, los usuarios tenían que recordar la información de una tabla e ir a otra tabla para comparar, lo que aumentaba el tiempo para completar una tarea.
4. La identidad de la marca no está alineada: la marca de Probo se reinventó hace unos meses, por lo que el rediseño de Cerebro fue la oportunidad de alinearse con la nueva marca.

La aplicación y el sitio web de Probo se reinventaron hace unos meses con una nueva marca, ya era hora de que se hiciera lo mismo en las herramientas internas.

Veamos el Antes vs Después de algunas páginas:

Diseños — Antes vs Después

Así que analicemos estos rediseños uno por uno.

Antes vs Después — Desglose del Diseño

Sección de Resumen de Usuario:
Esta sección consta de la información básica disponible de los usuarios, la cual está segregada en tres partes; la información similar se mantiene junta.

• La información más importante se destaca en los frentes, como los detalles y el estado del usuario.
• Priorización de acciones: en el diseño anterior, tres CTA están presentes sin ninguna jerarquía para acciones primarias/secundarias.
  Además, después de analizar, me di cuenta de que ninguno de ellos son CTA o acciones principales y, por lo tanto, no es necesario que sean directos y enfocados en la pantalla. Los botones de acción se componen de un botón llamado 'opciones'.

• Barra de navegación lateral:
  en pantallas con tablas de datos, el espacio horizontal es de suma importancia, por lo tanto, el diseño de la barra de navegación lateral se reinventa con botones de iconos que ocupan un espacio mínimo.
• Si se requiere una barra de navegación de tamaño completo, el usuario puede hacer clic en el logotipo y se expande a la barra de navegación de tamaño completo con los botones Texto+Icono.
  Sin expandirse también, si los usuarios necesitan cambiar, pueden pasar el cursor sobre los íconos para ver qué significa:

Pero, ¿cómo la separación de pestañas facilitaría las comparaciones de datos entre tablas en diferentes pestañas? ¡Cubriremos eso en un rato!

Ahora sumergiéndonos en algunos detalles más:

Optimización de tablas de datos para una mejor UX:
las tablas de datos tienen un trabajo por hacer: ¡proporcionar los datos necesarios a los usuarios rápidamente!
Para que se realice este trabajo, debe tener una capacidad de escaneo rápido para encontrar información relevante.

Estos son los diseños de antes y después para las dos tablas más complejas: historial de saldos e historial comercial

Para hacer que el escaneo de datos sea más fácil y rápido, se tienen en cuenta, en términos generales, 4 puntos:

• Escaneo rápido para encontrar información relevante, a través de la codificación por colores y agregando jerarquía y proximidad para separarla información.
• Agrupación de datos similares
• Eliminando información repetitiva
• Reorganización de datos para una comparación rápida

¿Cómo se desempeñó?

El rediseño junto con algunas correcciones de errores se ha planificado para el desarrollo y, a través de los resultados de las pruebas de usabilidad, se espera que aumente la productividad en 2 veces.

Como esto todavía está en desarrollo, no es posible compartir el rendimiento final y los KPI en este momento, pero lo actualizaré aquí tan pronto como esté disponible.

¿Que aprendi?
La mayor parte del trabajo que hice antes de este proyecto estaba relacionado con la adición de nuevas funciones de diseño a las páginas de destino de la aplicación o el sitio web de probo.
Por lo tanto, trabajar en un conjunto de datos tan grande fue un desafío en sí mismo, aprendí mucho sobre cómo UX es un resultado directo de cómo se ha implementado la interfaz de usuario.

También para los entusiastas del diseño, aquí está el enlace a un artículo en el sitio web del grupo NN que me ayudó mucho a comprender y diseñar tablas de datos.

PD: También aprendí a seguir documentando el proceso de diseño con regularidad porque este estudio de caso me tomó demasiado tiempo para escribirlo

¿Que sigue?

1. Explorar microinteracciones y estados vacíos para agregar pequeños placeres entre todo el trabajo que no se ha cubierto en este momento debido a una escasez de tiempo.
2. Explorando los atajos de teclado para usar la herramienta, a partir de ahora todos en el equipo tienen MacBooks (flex 101 ), por lo tanto, son trackpads eficientes y fáciles de usar por ahora.
3. Por ahora, el rediseño de solo la sección de detalles del usuario está hecho, la siguiente fase debería ser rediseñar todas las demás secciones de Cerebro.

Un gran agradecimiento a nuestro increíble equipo de CX, literalmente irrumpí en su habitación al menos 5 veces al día durante este proyecto, respondieron todas mis consultas y dudas de la mejor manera posible y esto fue especialmente durante la temporada de IPL, la más ocupada. ¡época del año!

También gracias a mi increíble equipo de diseño ❤️, así como a todos los propietarios de productos que me ayudaron con valiosos comentarios y sugerencias en todo momento.

¡Gracias por leer! Nos vemos pronto con otro caso de estudio

Saluda a Nidhi en LinkedIn • Instagram • Twitter