Rediseño de Buda Pro: Estructurando una plataforma de alta complejidad para el trader experto.
Cómo transformamos una interfaz compleja en una herramienta intuitiva y de alto rendimiento para traders expertos.
Cliente
Buda.com
Año
2023
Buda Pro es un portal de trading con una amplia gama de criptomonedas disponibles, orientado a aquellos interesados en el mercado cripto en Chile y Latinoamérica.
Mi rol
- Discovery / research
- Diseño UI y prototipado
- Handoff junto al equipo de desarrollo
El problema
Los usuarios expertos de Buda Pro se enfrentaban a una interfaz con baja respuesta heurística y una arquitectura de información saturada. La falta de ayuda contextual y una jerarquía visual deficiente provocaban errores en transacciones críticas y una curva de aprendizaje innecesariamente alta, alejando al usuario del cumplimiento de sus objetivos financieros.
La solución
Implementamos un rediseño sistémico basado en el modo oscuro nativo para reducir la fatiga visual durante sesiones prolongadas (2-4 hrs). Reestructuramos el módulo de «Nueva orden» aplicando principios de Proximidad de Gestalt y jerarquía visual, logrando una interfaz que no solo comunica confianza, sino que optimiza el flujo de transacciones mediante micro-interacciones y feedback inmediato.
Un replanteamiento de color adecuado; esto por su rol en una interfaz visualmente compleja con una alta cantidad de estímulos y componentes.
En conjunto con los squad de Trading & ledger y desarrollo, recorrimos desde la fase de investigación hasta el diseño final.
Durante la segunda mitad del año 2023, se plantea el desafío de detectar problemas para así poder mejorar la experiencia de uso en los diversos puntos de contacto de Buda Pro.
.01 Descubrimiento
Realizamos un análisis en profundidad de la competencia estudiando el producto e identificando características, ventajas y desventajas clave.
.02 Definición
En esta etapa, trabajamos sistemáticamente para determinar las mejores formas de lograr el objetivo final dentro del desarrollo de la plataforma.
.03 Ideación
Conceptualizamos la visualización y diseño de Buda Pro. Creamos bocetos de interfaz, prototipos de pantalla y estilo generales.
.04 Solución
Preparamos la aplicación para su lanzamiento, asegurándonos de que no solo cumpliera con todos los requisitos técnicos, sino que también brindara a los usuarios una experiencia visual estética y satisfactoria en línea con la marca.
Mediante tests de usabilidad moderados con 15 traders regionales, identificamos que el 70% de los usuarios fallaba en localizar zonas críticas en los primeros 15 segundos. Hallazgos clave:
- Los pasos para realizar una transacción suelen ser confusos y no guían al usuario hacia su tarea.
- Se registran problemas de accesibilidad en el uso de colores y tipografía, además de no reflejar conexión con el branding.
- El espacio de trabajo es confuso, con muchos estímulos e información .
- La imposibilidad de seleccionar una suma de dinero por por tramos de porcentaje (ej: 0% - 25%)
- No cuenta con ayuda contextual en los ítems críticos de la experiencia.
- Se detectaron variados problemas de jerarquización en cuanto a la presentación de cada módulo.
Redefinimos los contenidos en base a tests realizados con usuarios expertos. Para ello, uno de los grandes cambios para por su redistribución em la plataforma, donde actualmente el módulo «nueva orden» es bastante compacto y no posee el suficiente espacio para mostrar la información necesaria para realizar transacciones de forma segura.
Se propone reubicar dos de sus módulos principales: Gráficos y Mis órdenes. Donde podremos aprovechar de mejor manera el espacio disponible de datos tomando en cuenta el espacio que ocupan en pantalla, tanto en altura como en ancho total.
Estructura (arquitectura de información)
Liberamos espacio vertical, priorizando el flujo de trabajo y reubicando los módulos de «Gráficos» y «Mis Órdenes», permitiendo que el módulo transaccional se convirtiera en el epicentro de la experiencia.
- La reubicación del menú de Compra / Venta a la zona superior, estableciendo un orden lógico en la jerarquía del módulo para realizar una operación.
- Implementamos un sistema de tooltips de ayuda contextual para reducir la tasa de error y un componente de rangos porcentuales para agilizar el volumen de trading.
- Implementación de un componente con rangos de precios basados en porcentajes, así las compras y ventas en volúmenes mayores de dinero resultará más fácil.
Colores
Refinamos la paleta cromática para asegurar un contraste accesible (WCAG) y una semántica de color consistente para indicadores de mercado (Venta/Compra).
Resultado
- Optimización del flujo: Reducción del tiempo de ejecución de órdenes mediante una interfaz compacta y jerarquizada.
- Escalabilidad: Creación de un UI Kit consistente que permite al equipo de desarrollo implementar nuevas criptomonedas con un Time-to-Market reducido.
- Consistencia de Marca: Alineación estética total con el ecosistema de Buda.com, reforzando la percepción de seguridad y profesionalismo.
