Caravan: un dashboard de mercados globales y macroeconomía
Caravan es un dashboard de mercados globales y macroeconomía. Un brief que nos pusimos nosotros: sostener una jornada de mercados entera en cinco secciones conectadas, para leer como un artículo en lugar de como un montón de widgets prefabricados.
La apuesta era toda esa: un dashboard financiero que lees, no que escaneas. El trabajo gira en torno a un solo día de mercados para mantener los números honestos, con cinco secciones conectadas entre sí en lugar de compitiendo por la pantalla. Abajo, las cuatro decisiones de diseño e ingeniería que nos llevaron hasta ahí.
Lo que diseñamos
- 5SeccionesMacro, bancos centrales, mercados, conflictos activos, outlook
- 2TemasClaro y oscuro, diseñados a la vez
- 7Tipos de gráficoDiseñados desde cero para el dashboard
Cinco secciones, una sola historia
Un dashboard financiero típico te pone delante cinco secciones y cada una va por su lado. Nosotros hicimos lo contrario. Todo Caravan está dentro de un solo día: Fed al 4,13% tras un recorte, BCE en 2,25, Brent a 66 por temores sobre la demanda china, oro a 3.210 de récord. Cuando pasas del Overview a la página Macro no cambias de mundo. Estás leyendo el mismo momento desde otro ángulo.
Llegamos ahí escribiendo la historia del día antes de dibujar cualquier gráfico. Una sola página de texto en inglés llano: dónde está el ciclo macro, qué están haciendo los bancos centrales, dónde está el dólar, sobre qué conflictos activos tira el capital. Después cada número, cada titular, cada escenario del dashboard los verificamos contra esa página. Cuando un dato no encajaba con el resto, lo corregíamos o reescribíamos la sección que lo citaba.
El resultado es una coherencia editorial. No cinco paneles. Un solo número de una revista.
Números escritos, no números lanzados
En los productos demo los datos de ejemplo son cifras aleatorias puestas ahí para rellenar, y no te dicen nada del diseño. En Caravan los números los escribimos como un periodista escribe un artículo: cada cifra se sostiene con la siguiente. El VIX está en 22,8 porque el día es risk-off. Brent en 66 porque la demanda china está floja. Oro en 3.210 porque el dólar salió débil. La sparkline a un año junto a Bitcoin cierra exactamente en el +18,59% YTD que la KPI muestra encima.
Lo que sale de esto para quien lee es que el diseño lo ves contra números que se comportan como los de verdad. Recargas la página y no te aparecen contradicciones. Comparas un tile con el gráfico de debajo y las cuentas cuadran. Lees Markets hoy, Outlook mañana, y vuelves a encontrar la misma historia.
Cuando enchufamos datos reales en un dashboard para un cliente, este es el estándar al que mantenemos el trabajo.
Un solo sistema de colores, dos temas que funcionan los dos
Los gráficos son el punto donde un dashboard financiero se cae más rápido. Basta un gráfico ligeramente fuera de tono y el aire serio se va. Evitamos el atajo de las librerías de gráficos prefabricadas con su paleta por defecto. Diseñamos siete tipos de gráfico desde cero (líneas, áreas, barras, sparklines, donuts, heatmaps, indicadores de gauge) y los conectamos todos a un único sistema de colores de nuestro design system.
La elección se ve en el momento en que un usuario pasa del tema oscuro al claro. Los verdes se mantienen seguros sobre el negro, los rojos se mantienen legibles sobre el blanco, los divisores entre secciones se mantienen discretos. Los dos temas los diseñamos juntos, sobre la misma superficie. Nada de modo oscuro pegado encima como una idea tardía.
Para un cliente, la señal es esa: cuando decimos dos temas, queremos decir que los pensamos los dos.
Densidad de terminal, tipografía de periódico
Una terminal Bloomberg te da ochenta informaciones en una sola pantalla. Un dashboard moderno te da veinte, con mucho espacio en blanco. Nosotros elegimos Bloomberg. Caravan la pensamos para desktop, al ancho completo de la pantalla, y en el primer vistazo entran seis indicadores principales, un gráfico de actividad a 24 horas y la tabla resumen de los mercados globales. Un lector llega a un veredicto del día sin tener que hacer scroll.
En la tipografía salimos de nuestra elección habitual de estudio. En lugar de las fuentes habituales pusimos IBM Plex Sans en el texto e IBM Plex Mono en los números. Plex Mono es una fuente de ancho fijo: tres columnas de precios las ves alineadas una bajo otra, como en un periódico financiero de los años 80. Es una elección pequeña que hace casi todo el trabajo de hacer que Caravan parezca fiable a primera vista.
En móvil el layout colapsa a una columna. No combatimos contra eso: el dashboard es un producto desktop, y desde el teléfono ves el mismo contenido en un scroll vertical.
Stack
- Next.js16
- React19
- TypeScript5
- TanStack Query5
¿Quieres un dashboard así en un producto real?
Caravan es lo que construimos para nosotros, para mostrar cómo abordamos el data design cuando el brief no lo escribe nadie desde fuera. Para un proyecto con feeds en vivo y usuarios reales, repetimos el mismo trabajo con datos reales conectados dentro. Hablemos.
Empezar un proyecto