Soy Jack Green, diseñador de UX en DoiT, y quiero contarte algunos cambios y decisiones de diseño en el rediseño de una de nuestras funcionalidades actuales: 'Ramp plans'.
Ramp plans muestra de forma visual el avance de un cliente frente a su compromiso de gasto con AWS o Google Cloud, y ayuda a darle seguimiento al gasto e identificar los ajustes que hagan falta.
Para aprovechar al máximo el potencial de esta funcionalidad, el equipo de producto decidió incorporar algunas mejoras. Hice una auditoría de diseño de la funcionalidad actual para detectar problemas de usabilidad y de diseño visual.
Captura de Figjam durante la fase de investigación
Con la función de notas de Figjam (ver arriba), marqué las áreas que había que discutir e identifiqué los puntos clave por mejorar. A partir de ahí, tomé esto como base para conversar con el product manager y el lead developer, considerando sus aportes y comentarios a partir de su experiencia y del feedback de los clientes.
En esa sesión definimos las áreas clave en las que queríamos enfocarnos:
- Mejorar la visibilidad de la información clave
- Actualizar el backend para que los datos sean más confiables
Gracias a la investigación con usuarios y a los stakeholders que tratan con los clientes, sabemos qué información es la más relevante para el usuario. Con eso en mente, queríamos presentarla de forma clara y fácil de asimilar.
Actualizar el backend no es una tarea de UX, pero impacta de lleno en la experiencia de uso del ramp plan. Cuando los datos son más confiables, se genera confianza y queda en evidencia de inmediato el valor de la funcionalidad.
La primera mejora que quiero destacar es la lista en la página de ramp plans. Antes tenía formato de tabla.
Así se veía la página de resumen del ramp plan antes de los cambios de diseño
Una tabla no encaja en este contexto porque:
- El contenido de esta página se limita a 1 o 2 ramp plans; la lista no crece
- No hay jerarquía en el contenido, lo que dificulta distinguir los detalles
- Falta información clave en la tabla
- Hay que entrar al ramp plan para entender por completo lo que está pasando
Por eso, dejé atrás el formato de tabla y opté por tarjetas:
Así se veían los ramp plans después de los cambios de diseño
El formato de tarjetas trajo los siguientes beneficios:
- La información clave se lee con mayor facilidad
- El usuario ya no tiene que entrar al ramp plan para ver toda la información clave
- Una jerarquía más atractiva visualmente y mejor balanceada
Llevamos este estilo mejorado de presentar la información clave a la vista detallada del ramp plan.
Sumamos tarjetas con detalles clave en la parte superior de la página para categorizar, organizar y resaltar la información relevante para el usuario, que antes no estaba o era difícil de extraer entre tantos datos.
La vista de detalle actualizada de los ramp plans
Una nueva funcionalidad que incorporamos es un diálogo con el desglose total del gasto. Le permite al usuario profundizar en su gasto dentro de un diálogo compacto, sin tener que cortar su flujo de trabajo ni recurrir a otras áreas de la DoiT Console. Esta funcionalidad en particular la pidió un account manager que trata con clientes a diario. Nos explicó que le aportaría al cliente un gran nivel de detalle e información valiosa.
El diálogo del desglose total del gasto
Como siempre, desde el lanzamiento estamos monitoreando activamente los comportamientos y patrones de los usuarios para detectar posibles problemas o mejoras.