{"id":111,"date":"2022-12-01T12:54:27","date_gmt":"2022-12-01T12:54:27","guid":{"rendered":"https:\/\/www.mariomuti.com\/?post_type=fw-portfolio&p=111"},"modified":"2026-04-03T14:41:55","modified_gmt":"2026-04-03T12:41:55","slug":"media-project-2","status":"publish","type":"fw-portfolio","link":"https:\/\/www.mariomuti.com\/it\/project\/media-project-2\/","title":{"rendered":"Control Fleet"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Settore<\/strong><\/p><\/td>

Fleet Management & Logistics<\/p><\/td><\/tr>

Stack<\/strong><\/p><\/td>

Flutter, Vue.js, Java Spring Boot, Figma, Miro<\/p><\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

S \u2014 Situation<\/strong><\/p>

Una piattaforma di Fleet Management esistente \u2014 web dashboard + app mobile \u2014 sviluppata in una fase precedente del progetto Nitech, mostrava segnali di debito tecnico UX: navigazione complessa con troppi livelli di profondit\u00e0, inconsistenza visiva tra web e mobile, tempi di apprendimento elevati per i nuovi operatori di flotta, e un\u2019architettura frontend monolitica che rendeva costosa ogni modifica all\u2019interfaccia. Gli operatori utilizzavano l\u2019app in condizioni operative impegnative (in movimento, con guanti, sotto luce solare diretta) e le lamentele sulla usabilit\u00e0 erano frequenti.<\/p>

T \u2014 Task<\/strong><\/p>

Eseguire un restyling completo della piattaforma (web + mobile) senza interrompere le operazioni in corso. L\u2019obiettivo non era un semplice \u201creskin\u201d grafico ma un ripensamento dell\u2019architettura dell\u2019informazione, dei flussi operativi e del design system, mantenendo la compatibilit\u00e0 con il backend a microservizi esistente (Java Spring Boot, Apache Kafka) e garantendo una transizione graduale per gli utenti.<\/p>

A \u2014 Action<\/strong><\/p>

UX Design (Google UX Design):<\/strong> Ho applicato l\u2019intero processo di design UX certificato Google. Fase Empathize: interviste strutturate con 8 operatori di flotta e 3 responsabili logistica per mappare i pain point reali (non quelli presunti). Creazione di 4 user personas e 2 journey map. Fase Define: identificazione dei 5 problemi critici principali tramite affinity mapping. Il pi\u00f9 impattante: l\u2019operatore impiegava in media 7 tap per raggiungere la funzione pi\u00f9 usata (stato veicolo in real-time). Fase Ideate: workshop di co-design con stakeholder per esplorare soluzioni alternative. Creazione di crazy eights e prioritizzazione con matrice impatto\/fattibilit\u00e0.<\/p>

Prototipazione e Testing:<\/strong> Wireframe in Figma a bassa fedelt\u00e0 per validazione rapida dei flussi, seguiti da prototipo interattivo ad alta fedelt\u00e0 con design system completo (componenti, tokens, guidelines). Test di usabilit\u00e0 con 5 operatori reali in contesto operativo (non in lab). Iterazione su 3 cicli di test-refine prima dello sviluppo.<\/p>

Architettura Scalabile:<\/strong> Il frontend \u00e8 stato ristrutturato in componenti modulari con un design system condiviso tra Vue.js (web) e Flutter (mobile), garantendo consistenza visiva cross-platform. L\u2019architettura a componenti consente modifiche localizzate senza regressioni. La migrazione \u00e8 stata graduale: feature flag per rilasciare il nuovo design sezione per sezione, monitorando le metriche di adozione.<\/p>

R \u2014 Result<\/strong><\/p>

Riduzione dei tap necessari per le operazioni pi\u00f9 frequenti da 7 a 2 (accesso diretto dalla home). Tempo di onboarding nuovi operatori ridotto significativamente grazie all\u2019interfaccia intuitiva. Design system riutilizzabile che ha accelerato lo sviluppo delle feature successive. La transizione graduale con feature flag ha evitato disruption operativa durante la migrazione.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"featured_media":0,"template":"","fw-portfolio-category":[4],"class_list":["post-111","fw-portfolio","type-fw-portfolio","status-publish","hentry","fw-portfolio-category-media"],"_links":{"self":[{"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/fw-portfolio\/111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/fw-portfolio"}],"about":[{"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/types\/fw-portfolio"}],"version-history":[{"count":7,"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/fw-portfolio\/111\/revisions"}],"predecessor-version":[{"id":646,"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/fw-portfolio\/111\/revisions\/646"}],"wp:attachment":[{"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/media?parent=111"}],"wp:term":[{"taxonomy":"fw-portfolio-category","embeddable":true,"href":"https:\/\/www.mariomuti.com\/it\/wp-json\/wp\/v2\/fw-portfolio-category?post=111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}