Guide stampate → Piattaforma Mobile Offline per 20.000 dipendenti
Trasformazione di 72 guide operative stampate in un'esperienza mobile offline-first usata quotidianamente in un'organizzazione globale. Designer unica, responsabilità end-to-end, consegnato in 8 mesi.
Trasformare guide operative stampate in un'esperienza mobile
Una grande organizzazione globale dipendeva da 72 guide operative stampate contenenti procedure tecniche usate quotidianamente da lavoratori operativi e responsabili in ambienti impegnativi. Le guide erano difficili da navigare, costose da aggiornare e poco pratiche da portare e usare sul campo.
L'obiettivo era trasformare questa documentazione in un'applicazione mobile offline-first. L'analisi delle 72 guide ha rivelato una struttura coerente di 14 sezioni in tutte le aree operative, che è diventata la base dell'architettura informativa dell'app (una scelta deliberata per preservare la familiarità e ridurre al minimo la curva di apprendimento per utenti con esperienza digitale limitata).
Product Designer unica responsabile del progetto end-to-end. Ho collaborato con il Product Owner, il Project Manager, il team di ingegneria, l'architetto di sistema e gli stakeholder operativi, allineando questi gruppi attorno a uno scope di MVP tecnicamente fattibile che soddisfacesse comunque le esigenze degli utenti. Questo ha richiesto di negoziare compromessi, difendere le esigenze degli utenti di fronte a vincoli tecnici e temporali, e definire cosa sarebbe stato incluso nel primo rilascio rispetto alle iterazioni successive.
Ho collaborato con una ricercatrice per i test di usabilità. Ho costruito il prototipo a bassa fedeltà utilizzato nelle sessioni e ho partecipato direttamente ai test, traducendo i risultati in decisioni di design. Tre di questi risultati hanno cambiato il design in modo diretto e sono documentati nella sezione Decisioni chiave di design.
La mappatura delle 72 guide operative ha rivelato una struttura coerente di 14 sezioni in tutte le aree. Questa è diventata la colonna portante dell'IA e il modello di navigazione principale, preservando il modello mentale che gli utenti avevano già dalla versione cartacea.
Sessioni bisettimanali con PM, ingegneri e responsabili operativi hanno definito le priorità dell'MVP e portato alla luce i vincoli tecnici in anticipo, permettendo alle decisioni di design di tenere conto delle limitazioni del sistema prima che diventassero bloccanti.
Ho collaborato con una ricercatrice per testare prototipi a bassa fedeltà con dipendenti operativi reali. Ho costruito il prototipo e ho partecipato alle sessioni. I test hanno validato il modello di navigazione e evidenziato tre risultati che hanno cambiato il design finale in modo diretto.
Navigazione che rispecchia la struttura delle guide stampate
Vista dipendente, 14 sezioni che rispecchiano la struttura della guida stampata. La navigazione ad accordion consente di scorrere la mappa completa dei contenuti senza doversi muovere tra i livelli delle procedure.
Stessa struttura, adattata per un volume di contenuti maggiore
Vista responsabile, stessa struttura a 14 sezioni con titoli di sezione che raggruppano gli accordion dove il volume di contenuti richiedeva ancoraggi visivi aggiuntivi. Aggiunto dopo i test di usabilità con gli utenti responsabili.
Un sistema di contenuti progettato per densità e scansione rapida
Ogni guida supporta più formati di contenuto nella stessa schermata: testo introduttivo, callout evidenziati, elenchi puntati, riferimenti illustrati e sezioni di dettaglio espandibili. La divulgazione progressiva mantiene visibile il quadro generale consentendo agli utenti di espandere solo ciò che è rilevante per il compito attuale.
Panoramica della guida, tutte le sezioni compresse, per offrire agli utenti una mappa completa della procedura prima di espandere qualsiasi dettaglio.
Dettaglio della guida, una sezione espansa che mostra il sistema di contenuti completo: testo introduttivo, callout evidenziato, elenco puntato con sottocategorie e riferimento illustrato. Le altre sezioni rimangono compresse.
Selezione della lingua nella prima schermata. Ricerca progettata per il post-MVP.
Selezione della lingua nella splash screen, posizionata prima che venga caricato qualsiasi contenuto affinché gli utenti possano accedere all'app nella propria lingua dalla prima interazione, evitando attriti su dispositivi configurati in una lingua diversa per impostazione predefinita.
Ricerca, progettata in parallelo all'MVP e pianificata per il rilascio successivo. Include stato vuoto, suggerimenti, ricerche recenti, risultati con etichette di sezione di origine e correzione degli errori di battitura.
Scelte che hanno dato forma al prodotto
72 guide, contenuto denso. Gli accordion permettono agli utenti di scansionare prima la struttura completa ed espandere solo ciò che serve. Validato nei test: ricerca delle procedure più rapida rispetto alla navigazione attraverso livelli di schermata.
Questo ha anche orientato tre decisioni di interazione specifiche:
- Pulsante di chiusura in fondo a ogni accordion espanso, per evitare agli utenti di dover scorrere verso l'alto per comprimerlo.
- Link di ritorno in cima e in fondo a ogni guida, che riporta alla sezione precedentemente aperta preservando lo stato di navigazione.
- Immagini espandibili a schermo intero per l'ispezione dei dettagli in condizioni operative.
Costruita sulla struttura che gli utenti già conoscevano dalle guide stampate, minimizzando la curva di apprendimento. Anche operativamente flessibile: le guide possono essere aggiunte o rimosse senza modifiche strutturali all'app.
Le icone di navigazione sono sempre affiancate da etichette testuali per la stessa ragione: gli utenti con esperienza mobile limitata non possono affidarsi solo al riconoscimento delle icone.
Senza di essa, l'app sarebbe stata inaccessibile a una parte significativa degli utenti fin dal primo giorno. Non era un miglioramento post-lancio, ma un requisito fondamentale che ho sostenuto dall'inizio.
Le limitazioni del sistema hanno escluso la ricerca dal primo rilascio. La navigazione a 14 sezioni è stata progettata specificamente per consentire la ricerca delle procedure senza di essa. La ricerca completa è stata progettata in parallelo per il rilascio successivo.
- I wireframe iniziali usavano una barra di tab in basso. I lavoratori operativi hanno trovato più intuitiva la posizione in alto.
- La vista responsabile ha acquisito titoli di sezione come livello di raggruppamento dopo che i test hanno rivelato che il volume delle procedure era difficile da scansionare.
- È stata aggiunta una sezione Learning & Onboarding dopo che i test hanno evidenziato utenti che avevano bisogno di orientamento prima di accedere alle procedure.
Immagini ottimizzate per l'affidabilità offline, incluse solo dove aggiungono valore di comprensione che il solo testo non può fornire.
Ombre ed effetti di elevazione sono stati evitati per la stessa ragione: in condizioni all'aperto con luce solare diretta diventano invisibili e aggiungono rumore visivo senza valore funzionale.
Schermate annotate — decisioni e accessibilità
Decisioni di design — ricerca e navigazione annotate. Due schermate annotate con il razionale delle decisioni UX. Il campo di ricerca è ancorato nell'header perché i lavoratori sul campo sotto pressione temporale necessitano di accesso immediato senza dover navigare prima. La correzione ortografica mostra risultati per "Equipment" quando l'utente digita "Rquipment", fondamentale per lavoratori che indossano guanti o operano in condizioni di scarsa visibilità. La correzione è trasparente e reversibile: il sistema aiuta senza sovrascrivere l'intenzione dell'utente. I risultati mostrano sezione e tag di ruolo affinché i lavoratori vedano immediatamente quale contenuto si applica al loro ruolo senza aprire ogni risultato.
Annotazioni di accessibilità — ruoli ARIA, stati e contrasto. Documentazione di accessibilità per la schermata Home Lead. Lo stato attivo del toggle è comunicato sia attraverso il riempimento di colore sia tramite il peso tipografico, non solo col colore. Le intestazioni di sezione rispettano il rapporto di contrasto WCAG AA (4.5:1). Gli stati accordion documentati con etichette ARIA per compresso ed espanso, ogni riga dimensionata a un minimo di 48x48dp per i target di tocco. L'icona decorativa del chevron è nascosta ai lettori di schermo per evitare annunci ridondanti. I link dei sotto-elementi annotati con ruolo, azione, testo di annuncio e comportamento di gestione del focus per la navigazione di ritorno dalle schermate di dettaglio.
Consegnato in tempo. Usato ogni giorno.
L'applicazione è stata consegnata in otto mesi da una sola designer e distribuita a circa 20.000 dipendenti, diventando lo strumento di riferimento operativo standard in tutta l'organizzazione.
I test di usabilità hanno mostrato una riduzione stimata del 15% del tempo per localizzare le procedure, basata sul feedback riportato dagli utenti durante le prime interazioni con il formato digitale, un guadagno significativo in ambienti dove velocità e precisione impattano direttamente sui risultati operativi. Sostituire i manuali stampati ha anche eliminato un costo operativo ricorrente considerevole per l'organizzazione.