Mint / SaaS / Digital marketing
Stati più chiari. Interfacce più coerenti
Ho riorganizzato le chip di stato di Mint, SaaS per il digital marketing, definendo regole comuni per le interfacce e lo sviluppo.
01 / Il contesto
Uno stato riconoscibile in ogni schermata
La sfida
In schermate dense di dati, le etichette distinguono ciò che è attivo, in attesa o concluso. Lo stesso stato può comparire in una lista, in un riepilogo o nel dettaglio di una campagna.
Il punto era dargli una rappresentazione stabile e riconoscibile anche quando cambia il contesto.
Il mio lavoro
Ho riorganizzato le chip di stato e documentato regole comuni per colori, stile e dimensioni, collegando gli esempi nel prodotto alle indicazioni per lo sviluppo.
02 / La scelta
Dare agli stati una regola comune
Ho riorganizzato le varianti e documentato le regole di utilizzo. Per le chip di stato, colori predefiniti e stile a contorno; per quelle affiancate, dimensioni coerenti.
Il colore segue il significato
Una corrispondenza definita per ogni stato.
Lo stato ha uno stile riconoscibile
Chip a contorno, distinte dalle altre varianti.
Le dimensioni restano coerenti
La stessa misura per etichette affiancate.
Ho separato il significato dello stato dalle scelte di stile della singola schermata. Colore, bordo e dimensione seguono così una logica comune, che può essere applicata anche ad altre aree del prodotto.
03 / Nel prodotto
Una modifica piccola, in una schermata complessa
Nel Notification Hub le chip compaiono sia nella lista sia nel dettaglio della campagna. Il confronto mostra il passaggio dalle etichette piene a quelle a contorno, mantenendo riconoscibile il significato del colore.
Nel confronto, lo stato resta visibile sia sulla campagna selezionata sia nel suo dettaglio. La struttura della schermata rimane riconoscibile: il lavoro si concentra sul componente e sul modo in cui convive con tutti gli altri dati.
Il confronto nel contesto
04 / Il lavoro condiviso
Rendere le scelte applicabili
Ho raccolto le indicazioni nella documentazione dei componenti, con esempi d’uso corretti e da evitare. Dimensioni, colori e varianti diventano riferimenti espliciti per il lavoro di design e sviluppo.
Dimensioni coerenti e indicazioni pratiche per le chip affiancate.
Colori predefiniti e stile a contorno per comunicare gli stati.
La documentazione affianca alla regola un esempio concreto: cosa usare, come combinarlo e quale alternativa evitare. È il passaggio che rende una scelta di interfaccia un riferimento utilizzabile anche da chi implementa il componente.