S — Situation

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

T — Task

Eseguire un restyling completo della piattaforma (web + mobile) senza interrompere le operazioni in corso. L’obiettivo non era un semplice “reskin” grafico ma un ripensamento dell’architettura dell’informazione, dei flussi operativi e del design system, mantenendo la compatibilità con il backend a microservizi esistente (Java Spring Boot, Apache Kafka) e garantendo una transizione graduale per gli utenti.

A — Action

UX Design (Google UX Design): Ho applicato l’intero 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ù impattante: l’operatore impiegava in media 7 tap per raggiungere la funzione più 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à.

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

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

R — Result

Riduzione dei tap necessari per le operazioni più frequenti da 7 a 2 (accesso diretto dalla home). Tempo di onboarding nuovi operatori ridotto significativamente grazie all’interfaccia 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.