Caravan: una dashboard di mercati globali e macroeconomia

La scommessa era tutta lì: una dashboard finanziaria che leggi, non che scrolli. Il lavoro gira intorno a una sola giornata di mercati per tenere i numeri onesti, con cinque sezioni connesse e non in concorrenza fra loro per lo schermo. Sotto, le quattro scelte di design e ingegneria che ci hanno portato fin lì.

Cinque sezioni, una storia che fila

Una dashboard finanziaria tipo ti mette davanti cinque sezioni e ognuna sta per conto suo. Noi abbiamo fatto l'opposto. Tutta Caravan sta dentro un solo giorno: Fed al 4,13% dopo un taglio, BCE al 2,25, Brent a 66 sui timori sulla domanda cinese, oro a 3.210 di record. Quando passi dall'Overview alla pagina Macro non cambi mondo. Stai leggendo lo stesso momento da un'altra angolazione.

Ci siamo arrivati scrivendo la storia della giornata prima di disegnare qualunque grafico. Una sola pagina di testo in inglese piano: dove sta il ciclo macro, cosa stanno facendo le banche centrali, dove sta il dollaro, su quali conflitti attivi tira il capitale. Poi ogni numero, ogni titolo, ogni scenario sulla dashboard li abbiamo verificati contro quella pagina. Quando un dato non quadrava col resto, o lo correggevamo o riscrivevamo la sezione che lo citava.

Il risultato è una coerenza editoriale. Non cinque pannelli. Un solo numero di un giornale.

Numeri scritti, non numeri lanciati

Nei prodotti demo i dati di esempio sono cifre casuali messe lì per riempire, e non ti dicono niente sul design. In Caravan i numeri li abbiamo scritti come un giornalista scrive un pezzo: ogni cifra si tiene con la successiva. Il VIX è a 22,8 perché la giornata è risk-off. Brent è a 66 perché la domanda cinese è fiacca. Oro a 3.210 perché il dollaro è uscito debole. La sparkline a un anno accanto a Bitcoin chiude esattamente sul +18,59% YTD che la KPI mostra sopra.

Quello che ne esce per chi legge è che il design lo vedi contro numeri che si comportano come quelli veri. Ricarichi la pagina e non ti compaiono contraddizioni. Confronti un tile con il grafico sotto e i conti tornano. Apri Markets oggi, Outlook domani, e ritrovi la stessa storia.

Quando colleghiamo dati veri in una dashboard per un cliente, è questo lo standard a cui teniamo il lavoro.

Un solo sistema di colori, due temi che funzionano entrambi

I grafici sono il punto dove una dashboard finanziaria casca più in fretta. Basta un grafico leggermente fuori tono e l'aria seria se ne va. Abbiamo evitato la scorciatoia delle librerie di grafici già pronte con la loro palette di default. Abbiamo disegnato sette tipi di grafico da zero (linee, aree, barre, sparkline, donut, heatmap, indicatori a gauge) e li abbiamo collegati tutti a un unico sistema di colori del nostro design system.

La scelta si vede quando un utente passa dal tema scuro al chiaro. I verdi restano sicuri sul nero, i rossi restano leggibili sul bianco, i divisori fra sezioni restano discreti. I due temi li abbiamo disegnati insieme, sulla stessa interfaccia. Niente dark mode appiccicata sopra come un ripensamento.

Per un cliente, il segnale è questo: quando diciamo due temi, vuol dire che li abbiamo pensati tutti e due.

Densità da terminale, tipografia da giornale

Un terminale Bloomberg ti dà ottanta informazioni su una sola schermata. Una dashboard moderna te ne dà venti, con tanto spazio bianco. Noi abbiamo scelto Bloomberg. Caravan l'abbiamo pensata per il desktop, larga quanto lo schermo, e al primo colpo d'occhio ci stanno sei indicatori principali, un grafico di attività a 24 ore e la tabella riassuntiva dei mercati globali. Il lettore arriva a un verdetto sulla giornata senza dover scrollare.

Sulla tipografia siamo usciti dalla nostra scelta abituale di studio. Al posto dei font soliti abbiamo messo IBM Plex Sans sul testo e IBM Plex Mono sui numeri. Plex Mono è un font a larghezza fissa: tre colonne di prezzi le vedi allineate una sotto l'altra, come in un giornale finanziario degli anni '80. È una scelta piccola che fa quasi tutto il lavoro di rendere Caravan affidabile a colpo d'occhio.

Su mobile il layout collassa a una colonna. Non abbiamo combattuto contro: la dashboard è un prodotto desktop, e da telefono vedi lo stesso contenuto in uno scroll verticale.