ArbX: diseño de un dashboard de analítica deportiva que se entiende de un vistazo

ArbX es un producto SaaS de analítica de apuestas deportivas. La gente lo abre por los números: cómo va su historial, dónde ha ganado y perdido, y cómo podría salir un escenario antes de actuar. Los datos son densos, cambian rápido y quien los lee quiere respuestas al momento.

Diseñé tres partes clave del producto: el dashboard principal, un simulador que recorre un escenario paso a paso y la sección de precios, donde los visitantes deciden qué plan les encaja. Este caso de estudio trata del diseño de la interfaz, no de las apuestas en sí. Los mismos principios sirven para cualquier herramienta de analítica en la que se toman decisiones con prisa.

Los productos de analítica comparten un problema. El equipo que hay detrás sabe lo valiosa que es cada métrica, así que todas acaban en pantalla con el mismo peso. El resultado es un muro de números técnicamente completo y, en la práctica, ilegible.

En ArbX, la velocidad importaba más de lo normal. En este terreno cada segundo cuenta, y si tienes que buscar una cifra, ya has perdido el momento. Así que los objetivos eran fáciles de decir y difíciles de cumplir:

• Hacer que los datos complejos se entiendan de un vistazo.
• Que los resultados más importantes, ganancias, pérdidas y beneficios, sean imposibles de pasar por alto.
• Permitir hacer una simulación sin sentirse abrumado.
• Presentar los planes con tanta claridad que nadie tenga que adivinar qué está pagando.

Un dashboard así se queda abierto durante mucho rato, así que lo diseñé en modo oscuro para reducir la fatiga visual. Aquí el modo oscuro no es solo una cuestión estética. Sobre un fondo oscuro, un conjunto reducido de colores de acento transmite más significado y los datos tienen espacio para destacar.

Un contraste que lee por ti

El contraste y la legibilidad son las herramientas principales de la jerarquía. Las ganancias, las pérdidas y los beneficios tienen cada uno un tratamiento visual claro, para que la vista llegue al resultado antes que al detalle. Deberías poder echar un vistazo al dashboard y saber cómo van las cosas antes de leer una sola etiqueta.

Gráficos claros en lugar de números sueltos

Cuando un número cuenta una historia en el tiempo, se convierte en un gráfico. Cuando es una cifra principal, tiene su propio espacio y un tamaño grande y legible. Las filas de detalle se reservan para la información que de verdad se quiere repasar línea a línea.

Agrupación lógica para ganar velocidad

Las métricas relacionadas van juntas, de modo que cada zona de la pantalla responde a una sola pregunta. La agrupación es lo que hace que una pantalla densa transmita calma: cuando sabes dónde vive cada tipo de información, dejas de buscar y empiezas a leer.

El simulador permite modelar un escenario antes de actuar. El flujo tiene tres entradas: elegir la competición, elegir el tipo de apuesta y elegir el jugador. Después, los resultados de la simulación llegan en segundos.

El riesgo de cualquier herramienta así es meter todas las opciones en una sola pantalla. Varios desplegables, filtros y un panel de resultados compiten por la atención, y quien llega nuevo se bloquea. Por eso cada paso tiene su propio carril, en el orden en que lo necesitas: competición, luego tipo de apuesta, luego jugador. Cada carril hace una sola pregunta, y así el flujo resulta ligero aunque la lógica que hay detrás no lo sea.

Dividir el flujo también hace que el resultado inspire más confianza. Como las entradas son claras y se eligen de una en una, sabes exactamente qué escenario estás viendo cuando aparecen los resultados. Es el mismo principio del flujo de venta por pasos del proyecto de Timepiece FNF: una decisión por paso reduce los errores y hace que una tarea compleja parezca corta.

En los precios es donde un visitante decide si el producto merece la pena, así que la sección tiene dos funciones: parecer parte de un producto serio y hacer que la oferta se entienda fácilmente.

Para el aspecto, diseñé una cuadrícula continua detrás de la sección de precios, con una animación sutil y cambios de opacidad. Le da a la página un aire futurista y la conecta con el tema oscuro y elegante del propio producto, de modo que pasar de la web a la app no parece cambiar de marca.

Para la claridad, el movimiento se queda en segundo plano. Los detalles de cada plan permanecen quietos, con mucho contraste y fáciles de comparar, para que se vea exactamente qué incluye cada uno. La animación debe aportar ambiente. Nunca debe competir con la información que la gente ha venido a leer.

1. Decide primero qué importa. Elige las pocas cifras que responden a «¿cómo voy?» y dales el contraste más fuerte de la pantalla.
2. Usa el modo oscuro por una razón. Reduce la fatiga visual en sesiones largas y da sentido a los colores de acento. Por sí solo, es solo un estilo.
3. Agrupa por preguntas, no por tipo de dato. Cada zona de un dashboard debería responder a una sola pregunta.
4. Divide las entradas complejas en pasos. Una decisión por carril es mejor que una pantalla con todas las opciones.
5. Deja el movimiento en segundo plano. Los detalles animados pueden marcar el tono, pero los datos y los precios deben estar quietos y ser legibles.

Profundizo en esto en mi checklist de rediseño SaaS en 12 puntos, y puedes ver un rediseño de producto más amplio en el caso de estudio de ChromaAI.