Libretto
Un'app Android che aiuta i genitori a conservare i documenti sanitari dei figli, a ritrovarli in fretta e a mostrarli quando qualcuno li chiede.
I nomi delle schermate e dei pulsanti dell'app sono in inglese, come negli screenshot. Le citazioni dei partecipanti sono tradotte dalla versione inglese di questo caso studio.
2 studi di usabilità, 9 partecipanti, 6 problemi trovati e affrontati
Prova il prototipoVedi i sei cambiamenti di designLeggi tutto su Notion ↗
👀 In sintesi
Il problema
Una scuola o un medico chiedono con poco preavviso un libretto delle vaccinazioni o l'esito di un esame. I genitori tengono questi documenti in cartelline di carta, nella galleria del telefono e nelle chat, e perderne uno può significare un vaccino saltato o un esame da rifare.
Il mio ruolo
In solitaria, dall'inizio alla fine: interviste, personas, wireframe, due studi di usabilità, il design visivo, un design system da 43 componenti e il prototipo cliccabile.
Sei problemi, sei cambiamenti di design
| Problema emerso dai test | Visto in | Cosa ho cambiato |
|---|---|---|
| La schermata dei dettagli non diceva cosa fare | 5 su 5 | Un modulo breve e familiare, con un campo Name |
| Non erano sicuri che il file fosse stato salvato | 1 su 5 | Il salvataggio è confermato in Home, con il file in Recent |
| Home mescolava file e appuntamenti | 2 su 5 | Tre schede: Home, My files, Calendar |
| Non riuscivano ad aprire un documento dopo averlo salvato | 4 su 4 | Una schermata Record details con anteprima |
| "Destination" non aveva senso | 3 su 4 | Si sceglie per chi è; il percorso di salvataggio è mostrato in parole semplici |
| L'app sceglieva il bambino senza chiedere | 2–3 su 4 | Il nome del bambino e un selettore nella barra in alto |
🧩 Il problema
I genitori hanno bisogno dei documenti sanitari dei figli in momenti inaspettati: un modulo della scuola da consegnare oggi, un nuovo specialista, un appuntamento per un vaccino. Nelle mie interviste, quei documenti stavano in raccoglitori, quaderni di carta, foto sul telefono, chat di WhatsApp e cartelle nel cloud, spesso tutto insieme.
È assurdo dipendere da una sola copia fisica.
Un'intervistata, a proposito del calendario vaccinale cartaceo della sua bambina
I sistemi sanitari non sempre aiutano. Alcune cliniche non condividono le cartelle, quindi ogni nuovo medico significa ricominciare da capo. Un padre mi ha raccontato che sua figlia di cinque mesi era già stata visitata in almeno cinque posti diversi.
Il compito centrale: conservare un documento in fretta, ritrovarlo in modo affidabile e mostrarlo quando qualcuno lo chiede.
Come si è ristretto l'ambito
Il mio brief iniziale era ampio: permettere ai genitori di consultare i documenti dei figli, stamparli per la scuola o il campo estivo e vedere quando sono previste le visite. Le interviste hanno mostrato che tutto il resto dipende da una cosa che deve funzionare per prima: far entrare un documento e poterlo far uscire di nuovo. Ho lasciato stampa e appuntamenti a Pablo, la persona secondaria, e al lavoro futuro.
🔍 Ricerca
Cosa ho fatto
Ho intervistato cinque genitori e futuri genitori in Argentina e in Irlanda, poi ho raggruppato gli appunti per temi in Mural. Prima della prima intervista ho provato le mie domande con una madre fittizia e ho scoperto che una era tendenziosa: chiedere di "organizzare" dava per scontato il bisogno, mentre poteva essere altrettanto bene conservare, ritrovare o condividere. L'ho riformulata.
Cosa ho sentito
📄 La carta è fragile
Il libretto delle vaccinazioni spesso va mostrato di persona. “Se lo perdi, sei fregato.”
🧭 I documenti sono sparpagliati
Cliniche diverse, sistemi diversi, niente di condiviso. “Devi ricominciare da zero.”
🗓️ Gli appuntamenti stanno ovunque
Messaggi WhatsApp a se stessi, una lavagna in cucina, promemoria via SMS, un quaderno.
🌿 Un posto solo toglie stress
Dove i documenti sono centralizzati: “Non dover tenere traccia delle carte mi toglie un sacco di responsabilità dalle spalle.”
Vedi gli appunti originali e l'analisi della concorrenza
Analisi della concorrenza. Ho confrontato 7 concorrenti diretti e 3 indiretti (Google Calendar, Google Drive, Notion) e ho esaminato da vicino Guava Health e Google Drive. Tutti i concorrenti diretti offrivano una qualche forma di profili familiari. Nessuno dei due che ho studiato da vicino offriva la crittografia end-to-end, e il lettore di schermo di Google Drive non leggeva ad alta voce i nomi dei file. Questo indicava tre opportunità: profili familiari fatti in modo semplice, privacy spiegata con chiarezza e un'identità calma che non somigli a un ospedale.
👥 Personas
Anne, 25
Persona primaria · Copywriter freelance · Vive con il compagno e la figlia Amapola (6)
“Non voglio dipendere dalle copie fisiche. Se le porto con me e le perdo, sono fregata.”
Obiettivi
- Tutti i documenti di Amapola in un unico posto digitale
- Promemoria per gli appuntamenti
- Smettere di preoccuparsi di perdere le carte
Frustrazioni
- Non trova in fretta il foglio giusto
- Teme di perdere l'unica copia
- Nessun posto unico per gestire gli appuntamenti
Dimestichezza con la tecnologia
Intermedia
Google Drive e Calendar. Telefono Android, portatile Windows.
Pablo, 31
Persona secondaria · Insegnante di arte · Padre divorziato di Romeo (9)
“Un sistema di notifiche mi aiuterebbe moltissimo.”
Obiettivi
- Promemoria digitali semplici per gli appuntamenti
- Stampare i documenti come copia di backup su carta
- Annotare la salute di Romeo in modo ordinato
Frustrazioni
- Teme che i documenti digitali si perdano
- Le foto dei fogli vengono sfocate quando le condivide
- Senza un promemoria dimentica gli appuntamenti
Dimestichezza con la tecnologia
Base
App di messaggistica e note su WhatsApp. Telefono Samsung, iPad, ThinkPad.
Le foto delle personas sono illustrative. Ho progettato prima per Anne; le esigenze di Pablo (promemoria, stampa) hanno poi dato forma al Calendar.
🎯 Definire il problema
Problem statement
Storyboard
Lo storyboard segue quel momento: Amapola ha bisogno oggi di un documento per la scuola, Anne non lo trova e, più tardi, con l'app, lo trova in pochi secondi.
Un secondo storyboard, più ravvicinato, segue il momento che l'app deve riuscire a gestire bene: Anne la apre, riceve il benvenuto, tocca Add, sceglie di scansionare o caricare, compila le informazioni, conferma e vede "File uploaded".
Dallo storyboard ai wireframe su carta
Ho disegnato cinque schermate (Home, aggiunta di un file o scansione, dettagli del documento, conferma e ricerca), ispirandomi alle app che le persone usano già per gestire i file, come Google Drive, OneDrive, Proton Drive e Dropbox. Per Home ho disegnato cinque varianti affiancate, poi ne ho ridisegnata una prima di passare a Figma, dove ho ricostruito le schermate come prototipo cliccabile a bassa fedeltà.
Vedi i wireframe su carta di dettagli e ricerca
🧪 Studio 1: testare il prototipo lo-fi
Obiettivo: capire se l'app permette di ritrovare un documento più in fretta di una cartellina di carta. Chi: 5 persone tra i 23 e i 50 anni, tra cui una persona che fa il medico e una che preferisce le copie cartacee. Compiti: aggiungere un documento medico, compilarne i dettagli e poi ritrovarlo da Home. I risultati qui sotto descrivono dove le persone si sono confuse. Non includono i tempi dei compiti, quindi questo studio non può dire se l'app sia più veloce di una cartellina di carta.
Vedi come ho ordinato le osservazioni
Problema 1: La schermata dei dettagli non diceva cosa fare
Cosa è successo
5 su 5 si sono confusi con "Add more details", un insieme sparso di tag, profili e caselle di commento. 1 su 5 non vedeva la differenza tra "Skip for now" e "Continue". 2 su 5 si aspettavano di poter dare un nome al file.
Cosa ho cambiato
Un modulo familiare con campi etichettati, un campo Name e un campo per indicare dove va il file. Solo l'essenziale all'inizio e niente "Skip for now": tutti i campi erano facoltativi, quindi il pulsante principale svolgeva già quella funzione.
Principi: riconoscere invece di ricordare e divulgazione progressiva: chiedere il minimo ora, il resto dopo.
Problema 2: Non erano sicuri che il file fosse stato salvato
Cosa è successo
1 su 5 non è riuscito a capire se il file fosse stato caricato. 1 su 5 non ha trovato come tornare a Home. 1 su 5 si è confuso perché "Add page" era separato da "Edit".
Cosa ho cambiato
Nessuna schermata di conferma a parte. Le persone tornano in Home, dove il file compare in Recent files e un avviso conferma il caricamento. Le azioni extra sono passate all'avviso e al file stesso.
Principio: visibilità dello stato del sistema: mostrare il risultato dove le persone andranno a cercarlo.
Problema 3: Home mescolava file e appuntamenti
Cosa è successo
A 2 su 5 piaceva avere un calendario, ma non accanto a "Files". 2 su 5 non capivano "Recent records" e "Coming up". 1 su 5 ha trovato confuso il menu a hamburger.
Cosa ho cambiato
Tre schede chiare, Home, My files e Calendar, così ogni compito ha il suo posto. Home si concentra sui file recenti e il menu a hamburger non c'è più.
Principio: raggruppare le cose correlate e tenere la navigazione visibile.
🎨 Passare all'hi-fi
Colore e tipografia
Volevo che l'app trasmettesse fiducia, calore e familiarità, non l'aria di un ospedale. La maggior parte delle app sanitarie è blu e bianca, e i genitori spesso sono già stressati quando ne aprono una. Ho preso come riferimento carta, inchiostro, legno e verde: una palette calma, senza colori saturi.
- Legno scuro
#4B2C1E - Oliva
#4B5936 - Carta
#F8F6EF - Carta chiara
#F3EFE6 - Oro
#CA9F5D - Inchiostro
#2C2C26
LibrettoRoboto Serif dà la sensazione d'archivio di un registro. Roboto Slab è usato solo per il nome dell'app.
Le scelte di colore e tipografia nascono dal mio moodboard e dal mio giudizio, non da uno studio con gli utenti. Preferenza personale
Come è cambiato l'aspetto, versione per versione
- Due moodboard. Il primo, in agosto, era un duotone di blu freddi, una direzione che ho abbandonato. Il secondo, in ottobre, usava materiali reali invece di altre app: venatura del legno, carta calda, un verde profondo e una libreria di legno. Da lì ho preso la palette con Adobe Color e l'ho trasformata in variabili di Figma.
- Hi-fi v1. Sfondo crema, pulsanti principali di un marrone molto scuro, giallo acceso per gli stati premuto e attivo e un grande saluto: "Hi, Anne." La direzione mi sembrava giusta, ma il giallo infrangeva la mia regola di niente colori saturi e il saluto toglieva spazio a ciò che Anne era venuta a fare: vedere e aggiungere documenti.
- Il nero è diventato marrone. Ho provato il nero pieno per gli elementi più forti. I pulsanti principali ora usano il marrone legno scuro, che mantiene un contrasto alto (9,39 : 1) ma resta nella famiglia legno e carta.
- Il giallo è diventato oro. L'oro smorzato funziona come stato premuto perché l'inchiostro sull'oro dà 5,77 : 1. L'oro sulla carta dà solo 1,83 : 1, quindi non lo uso mai per il testo.
- L'hi-fi v3 ha dato un nome all'app. Libretto somiglia più a un piccolo libretto personale di documenti che a "Health Records App". Home ha perso il saluto e ha guadagnato un chip che mostra di chi sono i documenti che stai guardando.
Ho usato ChatGPT solo per esplorare combinazioni di colori. Claude, collegato ai miei file di Figma e Notion, ha elencato ciò che mancava al primo prototipo hi-fi, e ogni voce di quell'elenco è collegata a un risultato della mia ricerca.
Struttura
Material Design 3 per Android su una griglia da 8 px, un'azione principale per schermata, sempre in basso, e la stessa card del documento in ogni punto in cui compare un documento, così le persone la riconoscono.
Verifiche di accessibilità
Ho misurato il contrasto sui token di design con la formula WCAG 2. Le soglie sono 4,5 : 1 per il testo normale e 3 : 1 per il testo grande e per le parti dell'interfaccia come bordi e icone. Linee guida consolidate
| Coppia di colori | Rapporto | Esito |
|---|---|---|
| Inchiostro su carta (testo del corpo) | 10,54 | Superato |
| Inchiostro su card | 12,24 | Superato |
| Carta su marrone (pulsanti principali) | 9,39 | Superato |
| Carta su oliva | 5,67 | Superato |
| Inchiostro su oro (stato premuto) | 5,77 | Superato |
| Contorno su carta (bordi, icone) | 3,81 | Superato per bordi e icone, non per il testo |
| Contorno su card | 4,42 | Appena sotto 4,5 per il testo |
| Oro su carta | 1,83 | Non superato: mai usato per il testo né come unico segnale di uno stato |
I pulsanti con icona stanno in contenitori da 48 × 48 px. I chip di filtro da 32 px sono sotto il minimo di 48 px di Material, cosa che non ho ancora esplorato. Le icone piene e a contorno indicano la scheda attiva, quindi la posizione non dipende solo dal colore. Il supporto per i lettori di schermo e le dimensioni di testo grandi non sono ancora stati verificati.
🧪 Studio 2: testare il prototipo hi-fi
Come: 4 sessioni moderate a settembre 2026, con condivisione dello schermo su computer, pensando ad alta voce. Compiti: aggiungere l'esito di un esame del sangue di un bambino, ritrovarlo quando la scuola lo chiede e poi modificarlo. Dopo ho chiesto cosa fosse stato confuso, dove pensassero fosse finito il file e se si fiderebbero dell'app.
Problema 4: Nessuno riusciva ad aprire un documento dopo averlo salvato
Cosa è successo
4 su 4 non sono riusciti ad aprire il documento appena salvato; toccandolo compariva solo un foglio di opzioni. “Non c'è nessuna opzione per aprire il documento, eppure è lì.”
Cosa ho cambiato
Toccando un documento si apre Record details: un'anteprima con un pulsante Open per vederlo per intero, poi tipo, dimensione, data, di chi è il documento, la sua categoria e dove è salvato.
Perché contava: il compito di Anne finisce quando mostra il documento alla scuola o al medico. Il flusso si fermava un passo prima.
Problema 5: "Destination" non aveva senso e nessuno sapeva dove andasse il file
Cosa è successo
3 su 4 non hanno capito "Destination: Amapola's Records / 2026 / Tests". Una persona ha chiesto "Chi è Amapola?"; un'altra l'ha toccato aspettandosi un selettore di cartelle. 3 su 4 non sapevano dire dove fosse stato salvato il file. “Non ho capito la parte della destinazione.”
Cosa ho cambiato
Nessuna scelta Destination a parte. Si sceglie per chi è il documento e di che tipo, e l'app mostra dove verrà archiviato, come testo di sola lettura che si aggiorna mentre scegli: Amapola / Test results / 2026 / August. Lo stesso percorso compare come cartelle in Records.
Principio: corrispondenza con il mondo reale: archiviare le cose come ragionano i genitori, per bambino e per tipo, con parole semplici.
Problema 6: L'app sceglieva il bambino senza chiedere
Cosa è successo
2–3 su 4 si sono chiesti perché "Person (daughter)" fosse già selezionato: “Perché 'Daughter'? Ha deciso da sola!” (tradotto dall'italiano). Una persona non riusciva a capire di chi fosse l'esame del sangue.
Cosa ho cambiato
Il nome del bambino sostituisce "Person (you)" e "Person (daughter)". Il bambino attivo compare nella barra in alto con un selettore, e Record details indica di chi è il documento.
Principio: controllo da parte dell'utente: rendere visibili i valori predefiniti invece di lasciarli silenziosi.
Correzioni minori e arretrato
| Emerso | Visto in | Cambiamento |
|---|---|---|
| Nessuna via d'uscita dal flusso di caricamento | 1 su 4 | Annulla con una conferma "Discard this record?" |
| Un messaggio di salvataggio che continuava a tornare | 1 su 4 | Lo snackbar si chiude da solo |
| "Test" era troppo restrittivo | 1–2 su 4 | "Test results", e gli stessi cinque nomi di tipo ovunque |
| Come vengono gestiti i miei dati | 2 su 4 | Arretrato: condivisione e permessi controllati |
| Home come riepilogo di ciò che richiede attenzione | 1 su 4 | Arretrato: prima va testato |
✨ Il design finale
Oltre il flusso centrale
Ho costruito anche ciò che lo Studio 2 non poteva mettere alla prova: Records come cartelle (bambino, poi tipo, poi anno) che rispecchiano il percorso di salvataggio, Search tra documenti e appuntamenti e un Calendar con promemoria per Pablo.
Prova il prototipo
Tocca una volta lo schermo dopo il caricamento. La digitazione è simulata: tocca i tasti, perché Figma non accetta testo dal vivo.
Design system
43 componenti costruiti su tre livelli (componente principale, componente annidato e slot per le icone), con colore, tipografia e spaziatura salvati come variabili e stili di Figma.
Vedi i componenti e i token di struttura
🚧 Limiti e ciò che non ho ancora esplorato
Ancora da esplorare
Sono domande a cui non ho ancora risposto, non una lista di cose da fare.
I nuovi flussi funzionano per i genitori?
Nessuno ha testato i flussi riprogettati su un telefono vero, e non ho ancora parlato con nessun genitore a proposito.
Search aiuta con un volume reale?
Conteneva un solo documento. Non so come si comporti con 6–8 documenti divisi tra due bambini.
Cosa devono sapere i genitori sulla privacy?
2 su 4 hanno sollevato il tema della trasparenza dei dati. La condivisione controllata e una privacy spiegata con chiarezza non sono ancora progettate.
Come dovrebbe funzionare la stampa per Pablo?
La sua esigenza di stampare un backup su carta è documentata, ma non progettata.
Le aree di tocco sono abbastanza grandi?
I chip di filtro da 32 px sono sotto il minimo di 48 px di Material.
Funziona con un lettore di schermo e con testo grande?
Nessuna delle due cose è stata ancora verificata.
🌱 Cosa ho imparato
Risolvere prima di disegnare
I miei primi wireframe sono stati difficili perché stavo raccogliendo pezzi, non rispondendo a una domanda. Ora parto da ciò che ogni schermata deve risolvere.
Le persone ricordano i luoghi
Non avrei mai immaginato che tutti volessero vedere da dove arriva un file e dove va. Testare presto l'ha fatto emergere.
La preparazione fa parte del design
Un solo documento di esempio e un nome non spiegato ("Chi è Amapola?") mi sono costati prove. Preparerò i dati e lo script con la stessa cura delle schermate.