dataAgro, una piattaforma di gestione commerciale per il trading di cereali
Ridisegno UX/UI completo di una piattaforma di gestione commerciale legacy per una delle più grandi aziende agroalimentari d'Argentina, semplificando flussi operativi complessi senza ricostruire il sistema da zero.
Uno strumento interno complesso per una delle più grandi aziende agroalimentari d'Argentina
Molinos Río de la Plata aveva bisogno di una piattaforma interna per il suo team commerciale di trading dei cereali, che coprisse i contatti con i fornitori, i contratti di acquisto, le fissazioni di prezzo e i report di attività per quattro ruoli utente. Sono stata l'unica designer del progetto, integrata direttamente con il PM, l'architetto di sistema e il team di sviluppo, e responsabile anche dell'HTML/CSS responsive.
Il vincolo: ridisegnare senza ripartire da zero
Non c'era tempo né budget per ricostruire da zero. La navigazione, l'intestazione e la struttura di base dovevano rimanere. Le tabelle erano renderizzate all'interno di iframe, il che faceva sì che il layout ereditasse una larghezza fissa che rendeva ogni vista con dati densi opprimente.
Il problema più evidente: i filtri nella barra laterale occupavano la già limitata larghezza della tabella, lasciando i trader a fissare colonne troncate. La soluzione era diretta: spostare i filtri in alto e lasciare che la tabella usi tutta la larghezza disponibile.
Sistema precedente — filtri nella barra laterale in competizione con la tabella per lo spazio orizzontale. Con le tabelle dentro iframe, il margine era minimo.
Un'unica interfaccia, quattro ruoli
CompraNet collegava i buyer di Molinos con i fornitori di cereali attraverso un sistema condiviso di gestione dei contratti e delle fissazioni di prezzo. Quattro ruoli — Visualizzatore, Operatore, Analista e Responsabile — avevano bisogno di livelli di accesso diversi senza interfacce diverse. Un Visualizzatore vede dati in sola lettura e un unico pulsante Chiudi. Un Responsabile può modificare contratti confermati, regolare le quantità e avviare la finalizzazione. L'UI porta la logica dei permessi, non un manuale di formazione.
La tabella dei contratti — il cuore operativo di CompraNet. Filtri multi-colonna, badge di stato con codice colore su 5 stati (Confermato, In sospeso, Finalizzato, Offerta, Errore) e azioni inline sensibili al ruolo. Progettata per gestire 50+ record senza perdere la scansionabilità.
Progressive disclosure nei filtri — la vista predefinita rimane pulita con 5 filtri principali; le opzioni avanzate (campagna, intervallo di date, stato) appaiono su richiesta. Un pattern che ha funzionato altrettanto bene su desktop e su mobile.
Stesso modal, controllo diverso
Il linguaggio visivo è coerente tra i ruoli. Ciò che cambia è cosa è modificabile, quali azioni compaiono e quanti dati vengono esposti.
Visualizzatore — sola lettura. Tutti i dati visibili, nessuna azione eccetto Chiudi.
Operatore — può modificare contratti in Offerta e In sospeso, confermare la ricezione. Non può creare né finalizzare.
Responsabile — può modificare KG ed estensioni sui contratti confermati e avviare la finalizzazione.
Cinque stati, leggibili a colpo d'occhio
I contratti avanzano da Offerta → In sospeso → Confermato → Finalizzato, con Errore come eccezione recuperabile. Colore ed etichetta rendono lo stato leggibile direttamente nella riga della tabella — non è necessario aprire il record per sapere a che punto si trovano le cose.
In sospeso — modulo modificabile. La barra di stato in cima ancora lo stato attuale prima che l'utente legga un singolo campo.
Errore — uno stato recuperabile con un avviso chiaro e un'unica azione di recupero. L'utente non si trova mai senza una via d'uscita.
Creazione a pagina intera, modifica inline
Creare un contratto è un'attività puntuale e concentrata — ha una pagina dedicata. La modifica avviene nel flusso di revisione di molti record, quindi vive in un modal che mantiene la tabella visibile sullo sfondo. Il form di creazione usa anche la progressive disclosure: gli attributi aggiuntivi del contratto (cereale sostenibile, prezzo in dollari, termini in peso fisso) sono nascosti di default e si espandono solo quando necessario.
Creazione contratto — pagina intera, layout a due colonne. I campi correlati sono raggruppati affiancati per ridurre lo scorrimento senza sacrificare la chiarezza.
Dati aggiuntivi espansi — i campi condizionali appaiono solo quando viene selezionata l'opzione corrispondente, evitando che campi vuoti appesantiscano il modulo.
Vista responsive su mobile — il problema di design più difficile della piattaforma. Una tabella a 12 colonne ricostruita per mobile senza perdere la modificabilità né le informazioni critiche. Risolto interamente in HTML/CSS, senza un build mobile separato.
Rilasciato. Usato sul campo. Ha portato a un secondo progetto.
La piattaforma ha coperto l'intero flusso commerciale — contatti, contratti, fissazioni di prezzo, reportistica — responsive su tutti i dispositivi, servendo quattro ruoli attraverso un'unica interfaccia adattiva. Il feedback degli utenti è stato positivo, il team l'ha adottata senza formazione formale, e il lavoro ha portato direttamente a un secondo progetto con Molinos.