UI-UX designer, Front-End wed developer,
Web Marketing certificato, designer 3D
©1996-2024 Gianluca Panebianco

Caso UX/UI web: Interfaccia realtime drag&drop per uno schedulatore di produzione e confezionamento alimenti

Home > Portfolio > Caso UX/UI web: Interfaccia realtime drag&drop per uno schedulatore di produzione e confezionamento alimenti

Caso UX/UI web: Interfaccia realtime drag&drop per uno schedulatore di produzione e confezionamento alimenti

Per un'azienda leader italiana del settore food, ho realizzato un'analisi UX e la progettazione della UI (interfaccia grafica) di uno schedulatore della produzione settimanale e multistabilimento, completamente web, realtime, e drag and drop.

Problematica e User Requests

La richiesta del Cliente era quello di realizzare un applicativo web intranet che consentisse di pianificare in realtime tutta la produzione ed il confezionamento industriale, suddivisa in due stabilimenti diversi, ognuno dei quali aveva a disposizione circa 11 linee di produzione ed altrettante di confezionamento.

Il problema principale era che le richieste di produzione da parte del management sono di produrre decine di quintali di prodotti diversi, che poi dovevano essere confezionati in maniera differente, a seconda del mercato di destinazione (l'azienda produce in Italia ma esporta i propri prodotti in tutto il Mondo): i responsabili di produzione devono organizzare la produzione considerando la disponibilità delle linee di produzione in base ai fermi e ad una serie di altre valutazioni, ma sempre avendo sotto controllo l'intera area produttiva e l'efficientamento della produzione.

Il Cliente aveva bisogno di una soluzione adeguata, funzionale e usabile: si era rivolto a diverse altre aziende, senza ottenere un risultato soddisfacente.

Il mio ruolo nel progetto

All'interno del team di sviluppo web Taiprora, mi sono occupato prima di tutto della progettazione della User Experience dell'utente (UX), per poi passare al design della User Interface (UI), realizzando una serie di sketches interni, i mockups da presentare al cliente, fino al prototipo in html e css che poi è stato completato dal resto del team con i dati dinamici.

Dettaglio del progetto

L'applicativo ha due modalità di accesso:

  • utenti dell'area Management, in cui veniva riportata la richiesta di produzione necessaria per soddisfare gli ordini ricevuti a livello mondiale (chiamato "fabbisogno"): il fabbisgno aziendale settimanale viene importato dal Gestionale aziendale tramite uno script;
  • lato Responsabili di Produzione: area "pianificazione", che corrisponde al cuore dell'applicativo.

Schedulatore / Pianificatore della produzione e confezionamento

All'interno dell'area di Pianificazione l'utente può visualizzare due griglie:

  • sulla sinistra, la lista dei prodotti inclusi nella lista del "fabbisogno": per ogni prodotto viene descritta la quantità richiesta in quintali, ma anche il tipo di confezionamento, dal momento che lo stesso tipo di prodotto può avere un confezionamento diverso a seconda del paese di destinazione, inoltre il colore degli elementi variano a seconda del tipo di "composto" principale usato nella sua produzione (il grigio chiaro è il composto standard);
  • sulla destra,per ciascun stabilimento, un calendario settimanale comprende tante colonne quante sono le linee di produzione e confezionamento (ogni linea ne comprende una di produzione ed una di confezionamento) e tante righe, una per ogni ora della settimana (ovvero 24 righe x 7 giorni = 168).

L'utente può effettuare - tramite drag&drop - l'inserimento (anche parziale) degli elementi del fabbisogno all'interno del Pianificatore: cliccando sull'elemento del pianificatore può inserire le ore di produzione, o i quintali da produrre -> l'applicativo tramite una tabella di conversione reimposta la lunghezza della schedulazione (durata della produzione richiesta). E' possibile cliccare anche sul bordo inferiore della schedulazione per aumentare/diminuire la lunghezza dell'elemento.

Il database dell'applicativo comprende una tabella di conversione per tutti i prodotti, del tipo quintale-minuti: ovvero il Cliente può aggiungere nuovi prodotti o modificarne di esistenti inserendone la denominazione e il tempo di produzione necessario per realizzare un quintale di prodotto.
Non solo, anche per il confezionamento esiste una tabella di conversione, poichè dato lo stesso prodotto, il confezionamento per mercati diversi potrebbe richiedere tempistiche differenti.

Nell'interfaccia del Pianificatore, quando un elemento del fabbisogno viene completamente utilizzato, esso va a posizionarsi in un'area in basso.
Per agevolare le operazioni di schedulazione, è disponibile anche una Ghost Line, una linea di appoggio sulla quale gli operatori possono posizionare temporaneamente gli intervalli già pianificiati ma che devono essere collocati in maniera definitiva.

Vengono gestiti anche gli stop di linea, ovvero quando una linea non è disponibile (ad esempio per manutenzione programmata): in questo caso le caselle non saranno disponibili sul pianificatore ed assumeranno un colore grigio.

La sezione di amministrazione consente all'utente di gestire tutte queste informazioni: stabilimenti di produzione, numero e descrizione linee di produzione, nome e codice prodotto (da confezionare) e quantità a magazzino, nome e codice prodotto confezionato, nome e colore del componente principale, ecc.

L'applicativo comprende una sezione di reportistica e stato di avanzamento della pianificazione: in questo modo sia l'operatore di produzione sia il management sapranno quanto fabbisogno è stato pianificato (statistiche di riepilogo generale), ed esattamente quali prodotti lo sono stati e quali non saranno prodotti nella settimana di riferimento (dati di dettaglio sul singolo prodotto).

Caratteristiche critiche dell'applicativo

Sfida complessa sulla UX (il Cliente ci ha riferito che questo progetto è stato richiesto a numerosi fornitori e nessuno è mai riuscito a produrre uno strumento realmente valido, usabile e efficace)

Conclusioni

Al momento l'applicativo è stato rilasciato in produzione, utilizzato dal Cliente con soddisfazione. Abbiamo dunque ottenuto il risultato richiesto dal Cliente realizzando uno schedulatore della produzione e confezionamento industriale, completamente web, all'interno della sua rete intranet.

Se vuoi avere altre informazioni su questo progetto, contattami o seguimi sui social! :)