Molinos Agro: Ridisegno del portale fornitori per la commercializzazione di cereali e semi
Redesign completo del portale web per i fornitori delle operazioni di acquisto cereali di Molinos Río de la Plata. Stesso backend, interfaccia completamente nuova. I fornitori consultano contratti, consegne e pagamenti sul campo, lontano dalla scrivania, quindi il mobile non era un'aggiunta successiva — era un requisito fondamentale fin dal primo giorno.
Un portale fornitori per cereali e semi, ridisegnato per funzionare sul campo
Molinos Agro è il portale per i fornitori delle operazioni di acquisto cereali di Molinos Río de la Plata. Il sistema esistente aveva tab orizzontali, tabelle compresse, nessuna gerarchia visiva e nessun supporto mobile. Il brief: ridisegnarlo senza ricostruirlo da zero — stesso backend, nuova interfaccia.
Uno dei problemi strutturali della vecchia navigazione era che il team operativo doveva aggiungere regolarmente nuovi moduli man mano che le esigenze del business evolvevano. Con una barra di tab orizzontale, ogni aggiunta spingeva gli elementi fuori dalla riga di navigazione principale, creando un disordine crescente e incoerente. Una barra laterale verticale fissa ha risolto il problema in modo netto: i nuovi moduli si inseriscono senza alterare il layout.
Unica designer, integrata nel team con PM, architetto e sviluppatori. Immersione nel dominio e analisi euristica del sistema esistente prima di progettare qualsiasi schermata.
Navigazione e layout — il cambiamento strutturale
Prima e dopo — navigazione e layout. Il sistema originale usava tab orizzontali che diventavano difficili da gestire man mano che venivano aggiunti nuovi moduli. Il redesign ha introdotto una barra laterale verticale fissa, intestazioni di sezione strutturate e tabelle dati coerenti in tutti i moduli. Questa singola decisione architetturale ha risolto un problema di navigazione che avrebbe continuato ad aggravarsi.
Architettura informativa — mappata prima di progettare qualsiasi schermata
Architettura informativa — 8 moduli, una struttura scalabile. La barra laterale verticale è il fulcro: otto moduli al lancio, ognuno con la propria sotto-struttura. Il dettaglio contratto è il nodo più complesso, con otto sotto-sezioni che gli operatori devono incrociare continuamente. Mappare tutto questo prima ha garantito pattern di navigazione e logiche di interazione coerenti in tutto il sistema. Un nono modulo, Trasporti, è stato aggiunto dopo il lancio senza toccare la struttura di navigazione, confermando che l'architettura a barra laterale era la scelta giusta.
Riepilogo attività quotidiana, desktop e mobile
Homepage — riepilogo attività quotidiana. Progettata intorno al flusso di lavoro quotidiano del fornitore: i dati più urgenti visibili senza dover navigare. Saldo del conto corrente, attività recente e accessi rapidi ai moduli sono in homepage perché i fornitori aprono generalmente il portale per controllare una cosa specifica. Le card di riepilogo seguono una struttura coerente ripetuta in tutti i moduli, riducendo la curva di apprendimento nell'intero sistema.
Stesso contenuto — progettato per il campo
Mobile — stesso contenuto, progettato per il campo. I fornitori consultano contratti e dati di consegna sul campo, lontano dalla scrivania, quindi il mobile era un requisito fondamentale fin dal primo giorno. La homepage viene riorganizzata in card verticali con navigazione hamburger. Il dettaglio contratto usa un pattern ad accordion: ogni sotto-sezione si chiude indipendentemente, mantenendo il riepilogo visibile in cima senza costringere alla navigazione tra sezioni.
Progressive disclosure — desktop e mobile
Trasporti — progressive disclosure su desktop e mobile. Le proforma di trasporto sono chiuse di default per ridurre il carico cognitivo. I fornitori che lavorano tra una consegna e l'altra devono confermare rapidamente lo stato del viaggio, non leggere tabelle complete. Espandere solo la proforma rilevante mantiene la pagina ordinata. Su mobile, il contrasto tra proforma aperte e chiuse nella stessa vista mostra il pattern in azione. La stessa logica di progressive disclosure è usata in modo coerente in tutte le viste elenco in entrambe le versioni.
La vista più densa resa navigabile
Dettaglio contratto — la vista più densa resa navigabile. Il dettaglio contratto consolida otto sotto-sezioni in un'unica pagina scorrevole anziché in schermate separate, perché gli operatori devono incrociare continuamente i dati tra sezioni. Suddividerlo in pagine separate moltiplicherrebbe la complessità di navigazione in un flusso già complesso. Il layout a due colonne e i link contratto con codice colore riducono il tempo di scansione su dati finanziari e logistici densi.
Tutti i dati in un'unica vista — esportabile dove serve
Carta di trasporto — tutti i dati in un'unica vista. Dati di consegna, registrazioni di scarico, applicazioni e qualità del cereale consolidati in un'unica schermata perché i fornitori hanno bisogno di tutti e quattro per risolvere contestazioni senza navigare tra sezioni. Esporta e Stampa ancorati in cima perché la stampa è un requisito reale del flusso di lavoro per i fornitori sul campo.
Conto corrente e liquidazioni — due pattern per i dati finanziari
Conto corrente — saldo e storico transazioni. Il saldo attuale è l'informazione principale, ancorato in cima in un'intestazione ad alto contrasto. Debito, credito e saldo progressivo sono mostrati per riga così i fornitori possono individuare esattamente dove si è verificata una discrepanza. I valori negativi in rosso seguono la convenzione finanziaria standard per il riconoscimento immediato. Filtro per data ed esportazione in foglio di calcolo coprono le due azioni più frequenti degli operatori su questa schermata.
Liquidazioni — filtro per stato con avvisi inline. La navigazione a tab separa chiaramente le liquidazioni approvate da quelle segnalate, evitando elenchi misti in cui gli elementi che richiedono azione vengono sepolti. Gli indicatori di errore per riga mostrano la documentazione mancante specifica senza richiedere ai fornitori di aprire ogni record. I filtri multi-colonna permettono di restringere per tipo di prodotto o cercare per testo, coprendo sia la navigazione libera che la ricerca mirata nella stessa vista.
9 moduli. Completamente responsive. Progettato per il campo.
Il portale ridisegnato ha coperto l'intero flusso del fornitore — contratti, consegne, trasporti, pagamenti, documentazione fiscale — responsive su desktop e mobile, con pattern coerenti: navigazione a barra laterale, espandi/comprimi per i contenuti densi, ed esportazione dove i fornitori ne avevano bisogno. Un nono modulo, Trasporti, è stato aggiunto dopo il lancio senza alcuna modifica strutturale alla navigazione — esattamente la scalabilità per cui era stata progettata l'architettura a barra laterale. Implementazione responsive consegnata direttamente in HTML e CSS, senza necessità di handoff.