Progetto prodotti digitali da più di cinque anni, dal servizio pubblico al gioco online. Parto sempre dalle persone: le ascolto, metto in ordine quello che serve e lo trasformo in interfacce.
Un design system per gli strumenti interni di una pubblica amministrazione, costruito partendo da chi li usa ogni giorno.
Come lavoro
In ogni progetto
01
Ascolto e misuro
Prima di disegnare parlo con le persone, guardo i dati e vedo come fanno gli altri. Le ipotesi le metto alla prova con test sugli utenti, e prima del rilascio fisso i KPI (Key Performance Indicator, gli indicatori di risultato) con cui capire se il progetto ha funzionato.
Parto dai flussi, poi cerco i pattern che si ripetono. I componenti arrivano alla fine: non perché contino meno, ma perché nascono da lì. Per questo reggono su app e web e il team può riusarli.
04
Accessibilità da subito
Accessibilità e vincoli tecnici li considero dal primo giorno, così a fine progetto non ci sono sorprese.
05
L’AI, con spirito critico
La uso per esplorare, analizzare e accelerare le parti ripetitive. Ma ogni risultato passa dal mio giudizio: controllo le fonti, scarto quello che suona bene ma non è vero, e le decisioni restano mie. La curiosità è iniziata nel 2019, quando ho provato a far sognare una macchina.
Mi interessano i prodotti che tolgono fatica alle persone, non quelli che le trattengono. Niente dark pattern, cioè interfacce pensate per spingere a fare quello che non si vuole. E processi chiari: obiettivi espliciti, priorità condivise, decisioni scritte.
Progetto esperienze che tengano conto di chi le vive, del contesto in cui accadono e delle domande che fanno nascere. Mi impegno a creare prodotti e servizi inclusivi e accessibili, pensati per rispondere a bisogni concreti delle persone. Mi appassionano le cose ben fatte, le domande senza risposta e i sistemi che respirano insieme a chi li usa.
Il codice mi ha conquistata con 10PRINT, una riga degli anni Ottanta che sceglie a caso tra due segni e li ripete all’infinito: da una regola così semplice nasce un disegno sempre diverso. Da lì sono arrivata a iperDream, dove nel 2019 ho provato a far sognare una macchina. Oggi l’intelligenza artificiale è uno strumento che uso nel lavoro a supporto della progettazione: non per sostituire, ma per amplificare intuizioni, riflessioni e possibilità.
Nel dubbio, ascolto. Poi progetto.
human-centered design
È l'empatia a guidare il mio lavoro, perché solo capendo davvero chi ho davanti posso disegnare soluzioni utili e significative.
L'AI può supportarmi nell'analisi o nell'esplorazione, ma è il tocco umano a fare la differenza.
ux strategy
Traduco obiettivi di business in percorsi digitali chiari e orientati al valore per le persone.
Resto convinta che la direzione giusta si trovi solo mettendosi nei panni di chi userà quel servizio.
accessibilità
Credo in un design che non esclude nessuno.
Ogni persona dovrebbe poter accedere e interagire con un prodotto digitale in modo semplice, rispettoso e autonomo.
mi piace
Fare yoga
Da autodidatta, YouTube come guru, casa come ashram
Camminare senza meta
Camminare come pratica di ricerca, mi aiuta a pensare e mi rilassa
Creative coding
È così che mi sono innamorata del front-end.
Gli spazi bianchi
Sono spesso un'opportunità o un modo per respirare
Un solo posto per chiedere aiuto, invece di decine di form
Ho riprogettato il Centro Assistenza Rai per due obiettivi: rendere più semplice chiedere aiuto e alleggerire il lavoro di chi risponde.
Problema
Troppi form, oltre 70 categorie tra cui scegliere e operatori sommersi di richieste finite nel posto sbagliato.
Ruolo
UX Designer
Cosa ho fatto
Interviste, workshop, analisi dei competitor, card sorting, tree test, test di usabilità, flussi e wireframe, con oltre 60 persone coinvolte
Strumenti
Figma, Useberry
Il problema
Le richieste arrivavano da form sparsi in tutto il sito, spesso nella categoria sbagliata. Gli utenti non capivano dove scrivere, gli operatori dovevano rileggere e smistare tutto a mano. Risultato: tempi lunghi e utenti scontenti.
“Spesso l’utente non sa cosa selezionare nel form: dobbiamo leggere tutto e capirlo noi.”
“Ci capita di ricevere la stessa richiesta tre volte dai diversi form.”
La ricerca
Interviste con gli utenti, workshop con customer care e IT, analisi delle domande che arrivavano più spesso ai form, raccolte insieme alle direzioni RaiPlay e Digital, Comunicazione e Canone. Sono emersi quattro problemi:
non si capiva quale categoria scegliere;
oltre 70 opzioni da leggere;
la stessa richiesta arrivava da più punti di contatto;
nessuno storico delle richieste precedenti.
Abbiamo individuato due tipi di utenti: chi ha un problema e vuole una risposta, e chi vuole solo lasciare un’opinione e sapere che è arrivata. Da qui quattro personas e le loro journey.
Le quattro personasJourney delle personas che fanno una richiestaJourney delle personas che lasciano un’opinione
Dai competitor (Slack, LinkedIn, Duolingo, BBC, Fastweb) abbiamo preso alcune idee: FAQ suggerite mentre scrivi, percorsi guidati che evitano il form quando non serve, storico delle richieste.
Riordinare gli argomenti
L’obiettivo era passare da oltre 70 opzioni a un massimo di 7 tematiche, scelte con le parole di chi scrive.
Card sorting, 18 persone in 4 gruppi. Prima 5 utenti hanno raggruppato e nominato gli argomenti. Poi tre gruppi di colleghi delle direzioni coinvolte hanno lavorato ognuno sulla struttura del gruppo precedente, fino a quattro alberature diverse.
Tree test, 40 persone e 12 compiti. Abbiamo messo alla prova le quattro alberature con persone di età ed esperienza digitale diverse, guardando primo clic, percorso e destinazione.
Il risultato più chiaro: le etichette generiche spingevano le persone verso «Altro» e disperdevano le richieste, mentre le parole specifiche funzionavano. Così «Assistenza» è diventato «Supporto tecnico» e «Programmi» è diventato «Canali e Programmi».
Sessione di co-design sull’alberatura del formRisultati di card sorting e tree test
Una cosa alla volta
Il portale doveva andare online prima che il nuovo sistema di gestione delle richieste fosse pronto. Abbiamo proposto tre fasi, ognuna utile da sola:
Fase 1, una soluzione ponte. Una nuova pagina di contatto con domande frequenti e tutorial in primo piano, appoggiata ai form che già esistevano.
Fase 2, il form unico. Tutte le richieste passano da un solo form che le smista all’ufficio giusto.
Fase 3, un vero centro assistenza. Domande frequenti e tutorial cambiano in base al prodotto da cui si arriva.
Abbiamo anche separato le opinioni dalle richieste di aiuto. Chi scrive “app stupenda!” non si aspetta una risposta, chi non riesce ad accedere sì: mischiarli rallentava tutti. Le opinioni hanno un flusso proprio, testato con 5 persone, anche per capire se chiedere dati facoltativi come età e provenienza risultasse invadente.
La soluzione
Un Centro Assistenza unico, raggiungibile da homepage, menu, app e messaggi di errore. Prima le risposte, poi i contatti: FAQ ordinate per tema, tutorial per i problemi più comuni e solo in fondo form, chat e call center.
Nel form, quando scegli l’argomento compaiono le FAQ collegate, così molte richieste non partono nemmeno. Quelle che partono arrivano già all’ufficio giusto, e l’utente riceve subito una conferma.
I nuovi flussiWireframe del Centro Assistenza
Wireframe del Centro AssistenzaWireframe del Centro Assistenza
Come è andata
Dopo il rilascio le richieste via form sono diminuite e sono più pertinenti. Le FAQ vengono cliccate di più, soprattutto quelle su accesso e smart TV. I feedback raccolti con brevi sondaggi parlano di un percorso più chiaro.
Per misurarlo avevamo fissato quattro KPI: meno interazioni con il form, più clic sulle FAQ, confronto tra i punti di accesso e feedback degli utenti.
La pausa pranzo è spesso l’unica ora della giornata che è davvero tua. Non dovrebbe passare in fila
L’app esiste già: con il telefono prenoti il tavolo, scegli dal menù, ordini e paghi, così arrivi e mangi senza fare la fila. Dall’altra parte ci sono i ristoratori, che sanno in anticipo chi arriva e cosa preparare.
Mi è stato chiesto di ridisegnare la homepage dell’app e la landing page del servizio. Il punto di partenza era semplice: in pausa pranzo nessuno ha voglia di cercare, deve trovare.
Problema
In pausa pranzo si perde tempo a scegliere, aspettare e pagare. E i ristoratori non sanno quanta gente arriverà.
Ruolo
UX/UI Designer, freelance
Cosa ho fatto
Analisi desk, 6 interviste, benchmark, protopersona e scenari, wireframe, UI
Stato
Redesign consegnato al cliente, non rilasciato per scelte aziendali
Strumenti
Figma, FigJam, Miro, Notion
Gli obiettivi
Per chi usa l’app: decidere in fretta, non aspettare, avere tutto sotto controllo fino al pagamento. Per il servizio: farsi scegliere di nuovo e dare ai ristoratori strumenti per gestire prenotazioni e offerta.
La ricerca
Ho incrociato tre fonti: dati di mercato, interviste e un confronto con Glovo, Deliveroo e TheFork. I dati parlano di un uso delle app per la ristorazione cresciuto del 70% in tre anni e di un 91% di persone che vuole proposte personalizzate.
Sei interviste, quattro a utenti e due a ristoratori, negli uffici e nei locali. Tre problemi sono tornati spesso: cercare è lento e dispersivo, non si sa mai quanto si aspetterà, le proposte non tengono conto delle abitudini.
“Se guardo il menù prima di andare, mi aspetto che sia aggiornato. Invece arrivo e scopro che non c’è quel piatto.”
“A pranzo siamo pieni, ma non sappiamo mai in anticipo quanti clienti arriveranno.”
Per chi
Una protopersona, chi lavora in città e vive la pausa come una finestra da ottimizzare, e tre scenari:
Protopersona
Pausa ottimizzata
Andrea prenota la mattina, sceglie i piatti, arriva e mangia. Niente attese, niente conto.
Esplorazione guidata
Claudia non sa cosa mangiare ma vuole qualcosa di leggero e vegetariano. L’app le propone le opzioni giuste.
Pausa distesa
Giulia ha un’ora e pranza con un’amica. Sceglie il posto da foto, recensioni e tag come “tavoli all’aperto”.
Il progetto
Ho tradotto la ricerca in poche scelte: sezioni dinamiche come “in evidenza per te”, navigazione semplice e sempre visibile, promozioni chiare, suggerimenti basati su abitudini, posizione e preferenze alimentari. Con un percorso dedicato anche ai ristoratori.
Insight e buone praticheFlusso dell’appWireframe della homepage
La UI
Palette calda, font Poppins e un logo semplificato. Contenuti ben separati e leggibili anche di fretta, promozioni in evidenza con i colori caldi.
Cosa mi aspetto
È una proposta non ancora testata con dati reali. L’obiettivo è ridurre il tempo per prenotare e ordinare, rendere più chiara l’offerta dei ristoratori e far tornare le persone.
Un design system per gli strumenti interni di una pubblica amministrazione, partendo da chi li usa ogni giorno
Una pubblica amministrazione usa decine di applicativi interni: acquisti, logistica, personale, erogazioni. Sono nati in momenti diversi, da team diversi, e ognuno mostra a modo suo una tabella, un filtro, un errore. Chi lavora su più sistemi deve reimparare ogni volta. Il compito era dare a tutti un linguaggio comune.
Problema
Applicativi collegati tra loro ma progettati separatamente, con logiche e interfacce diverse.
Ruolo
UX/UI Designer, dalla ricerca alla libreria Figma al portale di documentazione
Ho fatto una valutazione euristica degli applicativi, poi ho intervistato le persone che li usano e le ho seguite mentre lavoravano. Lo shadowing, cioè affiancare qualcuno durante il suo lavoro reale, ha mostrato quello che le interviste non dicevano.
Lo smarrimento cresce con l’età, e l’età media di chi usa questi strumenti è alta.
Il riepilogo mensile delle ore andava compilato tutto in una volta: nessun salvataggio parziale.
Le notifiche non si potevano filtrare né cancellare.
Etichette e pulsanti erano ambigui: non si capiva cosa fosse attivo e cosa no.
Ho raggruppato le raccomandazioni in cinque aree: flusso, interfaccia, esperienza, comprensibilità, feedback.
Censire quello che c’è
Prima di disegnare qualcosa ho fatto l’inventario, schermata per schermata. In un solo applicativo ho censito oltre 150 elementi di interfaccia, con la loro funzione e i problemi: un pulsante “Elimina” senza modo di selezionare cosa eliminare, stati disabilitati poco leggibili, colori e numeri che dicevano due volte la stessa cosa.
Dai flussi tornavano sempre le stesse situazioni: cercare e filtrare, compilare un modulo lungo, seguire lo stato di una pratica. Sono diventate pattern, e i componenti sono arrivati da lì.
Dei principi da rispettare
Prima dei componenti ho scritto i principi, per avere un criterio con cui decidere: integrità, chiarezza, affidabilità, fiducia, servizio, sostenibilità. Il primo dice che progettiamo componenti e flussi che non ingannano, non omettono informazioni e non creano ambiguità.
Accessibilità secondo le WCAG 2.1 AA (Web Content Accessibility Guidelines, le linee guida internazionali per l’accessibilità del web) come requisito per ogni componente, non come verifica finale.
La libreria
Una libreria Figma con oltre 20 componenti e 2.152 varianti, partendo dall’inserimento dati, che è il cuore di questi strumenti. Ogni componente ha tutti i suoi stati. Il passo successivo era allinearla a Bootstrap Italia e alla libreria tecnica che gli sviluppatori usavano già.
Documentare per chi sviluppa
Una libreria serve a poco se chi sviluppa non sa come usarla. Ho progettato un portale di documentazione e l’ho prototipato in HTML e CSS. Ogni componente ha la stessa struttura: panoramica, anatomia, stati, proprietà, linee guida, accessibilità e codice.
Una scelta, in pratica
Per mostrare l’avanzamento delle erogazioni ho confrontato due soluzioni. La timeline a step si legge bene ma pesa: con molte pratiche nella stessa fase si ripete uguale e occupa spazio con la linea invece che con le informazioni. I badge di stato sono leggeri e si capiscono a colpo d’occhio, ma perdono il tempo trascorso in ogni fase.
Il criterio per decidere: in uno strumento gestionale chi lavora vuole sapere subito a che punto è una pratica, più che seguire un percorso.
Dove va
Ho lasciato una roadmap in cinque fasi: censimento, architettura, razionalizzazione, sviluppo, adozione. L’obiettivo è portare i componenti nel codice, richiamabili tramite classi, e arrivare a un configuratore con cui comporre le interfacce dei nuovi applicativi senza ripartire ogni volta da zero.
Rutigliano è un piccolo paese a sud-est di Bari. Da secoli vive di due cose: l’uva da tavola e la ceramica tradizionale.
Spesso la tradizione viene raccontata con nostalgia, a volte per fini politici. Io sono partita dal punto di vista “iperlocale” (Manzini, 2018): guardare alle risorse di un luogo e alle persone che le tengono in vita, per capire cosa possono diventare.
Il processo: comunità locale, workshop periodici, comunità accademicaElementa, workshop di co-progettazione sulla ceramica, gennaio 2020
Il design di processo qui serve a costruire occasioni: momenti in cui artigiani, comunità e università progettano insieme, perché l’identità del paese resti viva e non diventi solo ricordo.
La porpora si estrae da un mollusco, il murice. Era il colore dei Fenici, ed è un pezzo di storia di Taranto e della Puglia. Ha una particolarità: cambia nel tempo. Con l’aria e la luce passa dal giallo al viola, fino al blu scuro quasi nero.
Estrarla oggi è complesso e costoso, così ho lavorato anche con i colori che da sempre la sostituiscono, come la robbia e la cocciniglia. Ho tinto lino, canapa, lana e cotone e costruito scale tattili e visive: lo stesso colore, su materiali diversi, dà ogni volta un risultato diverso.
La ricerca parte dagli studi del Politecnico di Bari sulle qualità sensoriali delle superfici: la pelle di un materiale come punto d’incontro tra oggetto e corpo.
Il sogno e l’immaginazione, intesi come la possibilità di visualizzare e dar voce al nostro inconscio, creano alleanze, comunità e reti umane. Un filtro che sin dai tempi remoti l’uomo utilizza come strumento per l’interpretazione del reale. Il sogno può essere considerato simbolo che diventa visibile, ed assume significato nascondendo un grado di complessità maggiore. Se anche le macchine sognassero, che forma avrebbero i loro sogni?
IperDream è una scatola dei sogni da comodino la quale, attraverso l’utilizzo di algoritmi di machine learning allenati sulla base di testi noti e grazie al racconto umano, riesce a fornire una interpretazione e un prolungamento dei sogni. Nuovi mondi immaginabili.
Contesto
Corso Data, Art & Meaning, Università di San Marino, 2018/2019, prof. Daniele Tabellini
p5.js, p5.speech, ml5.js, Dandelion API, Google Colaboratory
L’idea: rendere visibile l’invisibile
Il progetto nasce da una riflessione su visibile e invisibile. Il visibile è la traccia materiale delle forze invisibili che lo generano; il sogno è il luogo dove questa dinamica è più forte: un pensiero per immagini, personale ma anche condiviso, che da sempre usiamo per interpretare il reale.
Da qui la domanda: se le macchine imparano dall’esperienza e ne conservano memoria, potrebbero anche sognare? iperDream risponde di sì, e immagina la macchina come un’estensione mentale che prolunga i nostri sogni e li collega a quelli degli altri.
Come funziona
iperDream è una scatola da comodino associata a un’app. Al risveglio le racconti il sogno, a voce, per iscritto o con un disegno.
La scatola cambia colore in base al tono del racconto, dal verde (positivo) al rosso (negativo), grazie all’analisi del sentimento del testo.
Durante la notte un algoritmo, allenato su testi significativi e sui tuoi sogni passati, scrive il sogno della macchina.
Il mattino dopo lo ricevi con una notifica sull’app, oppure premendo un pulsante sulla scatola: puoi leggerlo o ascoltarlo.
Dalle parole chiave nascono immagini e disegni, e ogni sogno viene archiviato nella tua “terra del sogno”.
Più scatole collegate costruiscono mappe che uniscono persone con sogni simili: una rete di storie tra persone e macchine.
Il prototipo
Ho sviluppato un primo prototipo, limitato ma funzionante, per valutare il significato e la qualità dell’interazione. È diviso in quattro moduli collegati tra loro:
Racconto: con p5.speech il microfono trascrive in continuo le parole del sogno.
Colore: l’API (interfaccia che permette a due programmi di comunicare) di Sentiment Analysis di Dandelion assegna al testo un punteggio da -1 a 1, tradotto in un colore tra rosso e verde.
Sogno della macchina: una rete neurale charRNN di ml5.js, allenata su Google Colaboratory con dei libri in formato testo, genera il sogno partendo dal racconto.
Immagini: l’estrazione delle entità di Dandelion individua i concetti del sogno e mostra le immagini corrispondenti da Wikipedia.
La scelta di charRNN non è casuale: genera il testo prevedendo un carattere alla volta, quindi spesso produce parole senza senso compiuto. Proprio come le associazioni casuali dei sogni.
Limiti e sviluppi futuri
Prototipando è emerso che l’interazione è ancora macchinosa. Le parole senza senso di charRNN bloccano l’estrazione delle entità, che funziona solo su testi piuttosto lunghi. Con più tempo avrei usato strumenti capaci di formulare frasi di senso compiuto, come rita.js.
Il concept prevede una scatola fisica in materiale opaco e un’app per usarla anche a distanza ed esplorare la propria mappa e quelle di chi ha sogni simili. Lato software, l’idea è che iperDream impari a disegnare doodle (SketchRNN) e a riconoscere quelli di chi lo usa, aggiungendo al racconto con le parole un racconto per immagini.
Il concept si sviluppa facendo riferimento alla poesia visiva e alle sperimentazioni artistiche e letterarie compiute nel clima della Neoavanguardia, a partire dagli anni sessanta del XX secolo. L’ispirazione deriva inoltre dal lavoro del designer AG Fronzoni. Attraverso l’uso di p5.js, vengono selezionate e divise in array differenti le parole rispetto alla loro natura grammaticale, in modo tale da ottenere un risultato più o meno coerente rispetto alla formulazione di una frase di senso compiuto.
Variazioni creative, realizzate attraverso p5.js e/o Processing, sulla linea di codice Basic 10 PRINT CHR$(205.5 + RND(1)); : GOTO 10 (1982), sui concetti di randomness e regularity.
Una serie di sperimentazioni che esplorano i pattern generativi e le possibilità creative del codice algoritmico, partendo da una semplice istruzione per creare infinite variazioni visuali.
design di processo | 2020intra-materia
textile design | 2017officine purpurariae
interaction design | 2019iperDream
creative coding | 2019poesie visuali
creative coding | 201810print variations
