dataAgro, una piattaforma di gestione commerciale per il trading di cereali
Redesign UX/UI end-to-end di una piattaforma legacy di gestione commerciale per una delle principali aziende agroindustriali dell’Argentina, semplificando flussi operativi complessi senza ricostruire il sistema da zero.
Uno strumento interno complesso per una delle più grandi aziende agroalimentari dell'Argentina
Molinos Río de la Plata aveva bisogno di una piattaforma interna per il team commerciale di trading di cereali, coprendo contatti fornitori, contratti d'acquisto, fissazioni di prezzo e report di attività per quattro ruoli utente. Ero la designer unica, integrata direttamente con PM, architetto di sistema e team di sviluppo, nonché responsabile dell'HTML/CSS responsive.
Il vincolo: ridisegnare senza ricominciare da zero
Non c'era tempo né budget per ricostruire da zero. La navigazione, l'header e la struttura sottostante dovevano restare. Le tabelle erano renderizzate dentro iframe, il che significava che il layout ereditava una larghezza fissa che rendeva ogni schermata con molti dati soffocante.
Il problema più visibile: i filtri della sidebar consumavano la larghezza già limitata della tabella, lasciando i trader a strizzare gli occhi su colonne troncate. La soluzione era semplice: spostare i filtri in alto e lasciare che la tabella usasse tutta la larghezza disponibile.
Sistema precedente — filtri della sidebar in competizione con la tabella per lo spazio orizzontale. Con le tabelle dentro iframe, il margine era minimo.
Un'interfaccia, quattro ruoli
CompraNet collegava gli acquirenti di Molinos ai fornitori di cereali attraverso un sistema condiviso di gestione di contratti e fissazioni di prezzo. Quattro ruoli — Visualizzatore, Mesa, Analista e Manager — ognuno con un livello di accesso diverso ma la stessa interfaccia. Un Visualizzatore vede dati in sola lettura e un unico pulsante Chiudi. Un Manager può modificare contratti confermati, regolare quantità e avviare la finalizzazione. La UI porta la logica dei permessi, non un manuale di formazione.
La tabella dei contratti — il cuore operativo di CompraNet. Filtro multicolonna, badge di stato codificati per colore in 5 stati (Confermato, In attesa, Finalizzato, Offerta, Errore) e azioni inline sensibili al ruolo. Progettata per gestire 50+ record senza perdere leggibilità.
Filtri con disclosure progressivo — la vista predefinita rimane pulita con 5 filtri primari; le opzioni avanzate (campagna, intervallo di date, stato) appaiono su richiesta. Un pattern che ha funzionato ugualmente bene su desktop e 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 tranne Chiudi.
Mesa — può modificare contratti in Offerta e In attesa, confermare la ricezione. Non può creare né finalizzare.
Manager — può modificare KG e proroghe sui contratti confermati e avviare la finalizzazione.
Cinque stati, leggibili a colpo d'occhio
I contratti passano per Offerta → In attesa → Confermato → Finalizzato, con Errore come eccezione recuperabile. Colore ed etichetta rendono lo stato leggibile direttamente nella riga della tabella — senza bisogno di aprire il record per sapere a che punto si è.
In attesa — modulo modificabile. La barra di stato in cima ancora lo stato corrente prima che l'utente legga un singolo campo.
Errore — uno stato recuperabile con un avviso chiaro e una singola azione di recupero. L'utente non rimane mai senza un percorso da seguire.
Creazione a pagina intera, modifica inline
Creare un contratto è un'operazione mirata e puntuale — ha una pagina dedicata. La modifica avviene nel flusso di revisione di molti record, quindi vive in un modal che mantiene la tabella visibile sotto. Il modulo di creazione usa anche il disclosure progressivo: gli attributi aggiuntivi del contratto (cereale sostenibile, prezzo in dollari, condizioni in pesos fissi) sono nascosti per default e si espandono solo quando necessario.
Creazione contratto — pagina intera, layout a due colonne. Campi correlati raggruppati fianco a fianco per ridurre lo scroll senza sacrificare la chiarezza.
Dati aggiuntivi espansi — i campi condizionali appaiono solo quando viene selezionata l'opzione corrispondente, evitando che i campi vuoti ingombrino il modulo.
Vista mobile responsive — il problema di design più difficile della piattaforma. Una tabella dati a 12 colonne ricostruita per mobile senza perdere modificabilità o informazioni critiche. Risolto interamente in HTML/CSS, senza un build mobile separato.
Consegnato. Usato sul campo. Ha portato a un secondo progetto.
La piattaforma copriva 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 l'incarico ha portato direttamente a un secondo progetto con Molinos.