IconIQ: trovare e capire le icone di un design system
Oltre 2.000 icone erano difficili da trovare perché la libreria era organizzata per nomi. Ho aggiunto un livello semantico per permettere ai designer di cercarle anche per significato e contesto d'uso.
- Ruolo
- UX Designer & Analista Qualitativo
- Team
- Team Design System
- Durata
- 3 mesi
- Cliente
- Enterprise Client (Freelance)
Il progetto in un minuto
La Sfida
La libreria era cresciuta per ownership e naming locali. Molte icone non avevano una descrizione semantica condivisa e design e sviluppo non disponevano di un modo semplice per capire cosa esistesse già e come venisse usato.
Il mio contributo
- Audit quantitativo di 2.056 icone su tutte le business line
- Interviste con designer e sviluppatori
- Progettazione dell'esercizio Duality Game per scoprire disallineamenti nelle priorità
Risultati e portata
2.056 icone indicizzate con significati semantici
La Sfida
Di cosa mi sono occupato
- Audit quantitativo di 2.056 icone su tutte le business line
- Interviste con designer e sviluppatori
- Progettazione dell'esercizio Duality Game per scoprire disallineamenti nelle priorità
- Analisi competitiva dei principali design system
- Architettura della ricerca semantica e dell'architettura dell'informazione
- Progettazione del sistema con cui i designer propongono nuovi significati
- Integrazione di funzionalità di similarità visiva AI/ML
La libreria era cresciuta per ownership e naming locali. Molte icone non avevano una descrizione semantica condivisa e design e sviluppo non disponevano di un modo semplice per capire cosa esistesse già e come venisse usato.
La libreria conteneva 2.056 icone distribuite tra più business line. Più della quantità pesava un altro fatto: per trovare un'icona bisognava spesso conoscere già il nome con cui era stata salvata.
Ho quindi separato il nome tecnico dell'asset dai concetti per cui poteva essere usato. La mappatura è servita prima alla ricerca e alla navigazione e, in seguito, anche alle funzioni di similarità automatica.
"Un designer poteva sapere di aver bisogno di un'icona per 'aggiorna' senza sapere che l'asset si chiamava 'rotate-clockwise'. In quel caso la ricerca testuale non aiutava e restavano la navigazione visiva o una domanda a un collega."
La difficoltà di scoperta rallentava il lavoro e rendeva più facile scegliere asset diversi per casi simili. Il problema era quindi sia di ricerca sia di coerenza del design system.
Le stesse intenzioni d'uso erano distribuite sotto nomi diversi, alcune icone venivano duplicate e la conoscenza della libreria dipendeva molto dall'esperienza delle singole persone.
Ricerca
Audit quantitativo
55 icone alfanumeriche
Mescolate con icone non correlate, creando confusione nella navigazione
431 specifiche per business line
Icone isolate potenzialmente riutilizzabili in tutta l'organizzazione
127 coppie di sovrapposizioni semantiche
Lo stesso significato rappresentato da icone diverse tra i prodotti
~800 senza categoria chiara
Icone perse nel sistema a causa dell'organizzazione per business line anziché per significato
Interviste con designer e sviluppatori
"Quando non ci sono linee guida condivise, l'efficacia delle icone dipende interamente dalla sensibilità individuale del designer."
— Sviluppatore Design System
Nessuno era responsabile del significato delle icone
Nessuno decideva cosa significasse un'icona. Le icone venivano create al bisogno: quando un designer ne aveva bisogno, ne creava una senza verificare se ne esistesse già una simile.
Cercare un'icona richiedeva troppo tempo
La navigazione visiva richiedeva 5-10 minuti per icona. La ricerca testuale non dava risultati. I designer chiedevano ai colleghi su Slack, e alcuni controllavano la libreria degli sviluppatori sperando che fosse organizzata meglio.
I designer non erano sicuri delle proprie scelte
I designer non erano sicuri che le icone scelte fossero coerenti con l'uso nel resto dell'azienda, e scoprivano le incoerenze solo dopo il lancio.
"Con scadenze strette, a volte mi accontento di un'icona 'abbastanza simile' solo perché riesco a trovarla."
— Designer trasversale
Analisi di altri sistemi
I sistemi più completi offrono più modi di cercare
I sistemi più completi combinano ricerca, navigazione e similarità visiva, perché un solo modo di cercare non va bene per tutti.
La profondità semantica cambia molto da un sistema all'altro
Material usa categorie e tag ma ha poca profondità semantica. Fluent ha tag keyword ricchi ma nessuna similarità visiva. Carbon ha una struttura chiara, ma è difficile trovarci le icone.
Insight Chiave
Le icone si trovano più facilmente per aspetto che per significato
Il divario tra come pensano i designer ('mi serve qualcosa per aggiorna') e come sono nominate le icone ('rotate-clockwise') rende la ricerca faticosa ogni volta.
Senza significati condivisi, ognuno interpreta a modo suo
Senza significati documentati ogni designer interpreta le icone in modo diverso, e la stessa icona finisce per essere usata in modi diversi tra i prodotti.
Non tutti cercano allo stesso modo
Alcuni designer cercano per parola, altri navigano per categorie, altri scorrono le anteprime. Il sistema doveva supportare tutti e tre gli approcci.
La stessa icona cambia significato a seconda del contesto
La stessa icona può significare 'aggiorna' in un contesto e 'annulla' in un altro. Per questo non ho usato definizioni rigide: un'icona può avere più significati, legati al contesto.
Molte informazioni esistono solo nella memoria del team
I designer sanno come le icone vengono usate nei loro prodotti, ma questa conoscenza resta nelle loro teste anziché nel sistema.
Obiettivi e Principi
Cercare le icone per significato
Trovare un'icona per significato oltre che per nome. Digitando 'aggiorna' si trova 'rotate-clockwise' grazie alle relazioni semantiche.
Esplicitare le relazioni tra significati
Scrivere significati e descrizioni che fino a quel momento esistevano solo nella testa delle persone.
Offrire più modi per arrivare alla stessa icona
Supportare modi diversi di cercare: ricerca testuale, navigazione per categoria e similarità visiva basata su AI.
Usare lo stesso linguaggio tra design e sviluppo
Mostrare chiaramente cosa è disponibile e dove, con link diretti a Figma ed esempi d'uso.
Principi guida
Più percorsi verso la stessa icona
Ricerca, categorie e similarità portano alla stessa icona partendo da modi di lavorare diversi.
Il significato cambia nel tempo
I significati cambiano con l'uso, quindi il sistema deve permettere di aggiungerne di nuovi e di correggerli nel tempo.
Il significato dipende dal contesto
Mostrare come le icone vengono effettivamente usate nei prodotti piuttosto che imporre definizioni rigide e astratte.
Progettazione della Soluzione
Schema interattivo
Trovare un’icona per ciò che significa
Seleziona un nodo per evidenziarne i collegamenti e leggere la scelta progettuale.
“Email”
Il designer parte da un’intenzione. Cercare “email” dovrebbe portare anche a un’icona chiamata “envelope”.
Collegato a: Significato · Somiglianza
Percorsi di ricerca concettuali tratti dal case study. Non viene eseguita una ricerca o un ranking live.
Ricerca per significato
La ricerca testuale non funzionava: cercare 'aggiorna' non restituiva nulla perché l'icona si chiamava 'rotate-clockwise'.
Alternative considerate
- Migliorare le convenzioni di denominazione (non risolve il divario nei modelli mentali)
- Aggiungere tag manuali a ogni icona (lavoro intensivo, copertura incompleta)
- Costruire un livello di significati associati alle icone (flessibile, scalabile)
Ho costruito un livello semantico in cui ogni icona ha più significati documentati. La ricerca riconosce sinonimi e concetti correlati.
Digitando 'aggiorna' si trova 'rotate-clockwise' (tramite i significati associati); digitando 'mail' si trovano 'envelope', 'at-sign' e 'send' (concetti correlati). Il filtro si aggiorna in tempo reale con un debounce di 300ms, e la ricerca resta nell'URL per poterla condividere.
Compromesso: Documentare 892 significati ha richiesto un lavoro iniziale consistente, e i contributi degli utenti vanno moderati nel tempo. Su questa base però si appoggiano tutte le altre funzioni.
Più modi per trovare un'icona
Designer diversi pensano in modo diverso: alcuni cercano, altri navigano, altri scansionano visivamente. Nessun metodo singolo serve tutti.
Alternative considerate
- Solo ricerca testuale (esclude chi cerca per immagini)
- Solo navigazione per categorie (lento per esigenze mirate)
- Approccio ibrido con metodi multipli
Ho implementato tre modi di cercare in parallelo: (1) ricerca semantica per chi sa cosa cerca, (2) navigazione per categorie riorganizzate per concetto invece che per origine, (3) similarità visiva basata su AI con il modello CLIP.
Ho ridisegnato l'architettura delle categorie partendo dai concetti invece che dalle business line di origine. La navigazione ad accordion mostra quante icone contiene ogni categoria. Il modello CLIP trova icone visivamente simili che un designer potrebbe non notare e raggruppa quelle correlate (tutte le frecce, tutti i segni di spunta).
Compromesso: L'integrazione AI ha aumentato la complessità tecnica e la superficie dell'interfaccia. In cambio, trovare un'icona è diventato molto più semplice per tutti i profili di utenti.
Contributi dei designer con moderazione
La conoscenza su come si usano le icone era nella testa dei designer e non nel sistema, e un solo team di curatori non poteva raccoglierla tutta.
Alternative considerate
- Solo curatela esperta top-down
- Editing completamente aperto stile wiki
- Sistema di contribuzione moderato
Ho creato un semplice modulo in cui i designer propongono nuovi significati con una descrizione. Un flusso di approvazione moderato controlla la qualità e permette alla libreria di crescere.
I contributi arrivano da chi usa le icone ogni giorno. Ogni designer può inviare significato, descrizione e nome. La moderazione mantiene la coerenza, e gli esempi d'uso presi dai prodotti danno contesto.
Compromesso: La moderazione richiede lavoro e i contributi possono essere disomogenei. Raccogliere la conoscenza sparsa nel team si è comunque rivelato più utile di un controllo centralizzato.
Risultati e Impatto
Sono stati documentati 892 significati su 2.056 icone. Quel livello semantico ha reso possibile cercare per intenzione d'uso e ha fornito dati strutturati anche alle funzioni successive di similarità e relazione.
2.056 icone indicizzate con significati semantici
73% di riduzione nel tempo di ricerca icone (da ~5 min a <1 min)
892 significati semantici documentati su tutte le icone
~50 ricerche al giorno tra i team di design
127 coppie di sovrapposizione semantica identificate e documentate
I designer trovano le icone partendo da ciò che vogliono comunicare, anche senza conoscerne il nome
Più sicurezza nello scegliere icone coerenti con l'uso negli altri prodotti
Grazie alla similarità AI, i designer scoprono icone che non sapevano esistessero
La conoscenza che prima era solo nella testa delle persone ora è scritta nel sistema
Meno icone duplicate, perché è più facile trovare quelle esistenti
Più coerenza tra i prodotti grazie a significati condivisi
Cosa ho realizzato
- Interfaccia di ricerca semantica con filtraggio in tempo reale a 300ms
- 892 significati semantici documentati su 2.056 icone
- Similarità visiva basata su AI usando il modello CLIP
- Architettura dell'informazione delle categorie ridisegnata
- Sistema di contribuzione utente con flusso di moderazione
- Pagine dettagliate delle icone con esempi d'uso e relazioni
- Sistema di condivisione basato su URL per singole icone
Riflessioni
La mappatura manuale iniziale è stata costosa, ma ha creato una base riutilizzabile anche per le funzioni automatiche sviluppate dopo.
Cosa farei diversamente
- Avrei esplorato la similarità ML dall'inizio piuttosto che aggiungerla successivamente nel processo
- Avrei tracciato le ricerche e raccolto dati d'uso dal primo giorno, per capire come cambiava l'uso nel tempo
- Avrei dovuto creare strumenti automatici di suggerimento semantico per accelerare la documentazione iniziale dei significati
Cosa ha funzionato e quali difficoltà ho incontrato
Cosa ha funzionato
Metodi diversi hanno risposto a parti diverse del problema
L'audit ha stabilito la scala e la duplicazione; le interviste hanno mostrato come quella struttura fallisse nella pratica; l'analisi competitiva ha aiutato a distinguere le convenzioni da prendere in prestito dalle assunzioni specifiche di questa organizzazione.
Il significato doveva restare contestuale
Una singola icona può avere significati diversi in contesti di prodotto diversi, per questo il sistema ne registra più di uno invece di assegnarle un'unica interpretazione.
La mappatura manuale è servita anche alle funzioni automatiche
La mappatura semantica manuale era utile di per sé per ricerca e navigazione, poi è diventata input strutturato per funzionalità automatizzate di similarità e raccomandazione.
Sfide
La prima mappatura semantica ha richiesto molto lavoro manuale
Documentare i significati di oltre 2.000 icone ha richiesto molto lavoro iniziale. Siamo partiti dal 20% più usato e abbiamo esteso la copertura poco alla volta, ma la prima fase ha richiesto più tempo del previsto.
Per mantenere la tassonomia servivano regole di moderazione chiare
I contributi degli utenti andavano rivisti per mantenere la coerenza. Linee guida chiare e moderazione della community hanno risolto il problema, ma richiedevano attenzione continua.
Prossimo progetto
Biblioteca Salaborsa: wayfinding multisensoriale