Un’interfaccia sola per 11 strumenti AI
e output non prevedibili.
Il progetto riguardava una piattaforma SaaS basata sull’AI per venditori e-commerce. A partire da un input prodotto, il sistema generava insight, contenuti e materiali di supporto alle decisioni commerciali.
In breve
Il contesto
Una piattaforma SaaS basata sull’AI per venditori e-commerce. Sono entrato a progetto avviato, con il compito di disegnare l’intera esperienza: piattaforma, singoli strumenti, sito.
Il problema
Undici strumenti, output AI variabili per forma e lunghezza, un’unica interfaccia da rendere coerente e comprensibile.
Cosa ho fatto
Ho lavorato su flussi, dashboard, design system, pattern di attesa AI, stati di output e sito istituzionale.
L’esito
La piattaforma è arrivata in produzione. Non sono disponibili metriche pubblicabili: per questo il case study distingue gli output consegnati dagli outcome ancora da validare e si concentra su decisioni, vincoli e pattern verificabili.
ruolo
Cosa ho fatto io, cosa il team
Come unico Product Designer sul progetto, ho guidato architettura UX e design system lavorando direttamente con stakeholder di prodotto ed engineering. Ho lavorato a contatto con stakeholder di prodotto e team di sviluppo interno, occupandomi di UX, UI, architettura della dashboard, flussi degli undici strumenti, design system, stati di caricamento, presentazione degli output AI e sito istituzionale.
Il backend e parte della logica degli strumenti erano già avviati quando sono entrato nel progetto, e altri strumenti sono stati aggiunti durante il percorso. Le decisioni architetturali di UX, l’intero design system, i pattern di output AI e la struttura di navigazione rientravano nella mia responsabilità. Ho lavorato in autonomia, con accesso diretto al team di sviluppo e agli stakeholder di prodotto.
01 — La sfida
Undici strumenti, un’unica logica
La piattaforma non era un’app con una sola funzione. Era una collezione di strumenti AI: discovery di prodotto, analisi di mercato, analisi recensioni, generazione copy, buyer persona, angoli di vendita, concept video e altri flussi legati all’e-commerce.
Ogni strumento risolveva un problema diverso e produceva un output diverso: testi lunghi, liste, grafici, card, mappe, varianti pubblicitarie o combinazioni di più formati. La sfida non era disegnare singole schermate belle, ma costruire un sistema capace di restare coerente anche quando ciò che contiene cambia ogni volta.
Product discovery
Landing page duplication
Review generation
Buyer persona generation
Video concept generation
Angle Finder
Copy generation
Market saturation analysis
Landing page analysis
Review analysis
Sales angle generation
02 — nodo centrale
Il problema degli output AI
Ogni output generato dall’AI poteva cambiare per lunghezza, forma e qualità. Alcuni risultati erano molto brevi, altri molto estesi. Alcuni erano testuali, altri visuali o strutturati. La stessa interfaccia doveva riuscire ad accoglierli senza rompersi e senza costringere l’utente a interpretare una macchina opaca.
Allo stesso tempo, il sistema doveva rendere gli output più prevedibili e utilizzabili senza irrigidirne forma e lunghezza. Ho lavorato per componenti con contenitori flessibili e card scorrevoli per output in cui non si riusciva a prevedere la lunghezza, blocchi testuali capaci di reggere lunghezze variabili, stati vuoti e parziali, messaggi di guida e regole di presentazione più prevedibili.
03 — Design system
Una libreria estesa,
non un sistema da zero
Con tempi compressi non aveva senso costruire un design system da zero. Sono partito da una libreria UI esistente e l’ho estesa sulle esigenze specifiche della piattaforma stepper, card tool, stati di output, empty state, loading state, sidebar, bottoni azione e contenitori per risultati AI.
- stepper e progress bar
- card degli strumenti
- contenitori per output AI
- stati vuoti e stati parziali
- loading e processing state
- toast e notifiche
- sidebar e navigazione
- bottoni azione: copy, share, export, regenerate
04 — vincoli
I vincoli con cui ho lavorato
Progetto già avviato
Non sono partito da un foglio bianco. Esisteva già una prima base tecnica e parte dell’interfaccia richiedeva una riorganizzazione profonda.
Brief in evoluzione
Alcuni strumenti sono stati aggiunti durante il percorso. Il sistema doveva quindi restare flessibile e non dipendere da schermate troppo rigide.
Tempi compressi
Non c’era spazio per costruire un design system da zero. Ho scelto di partire da una libreria UI e di estenderla dove il prodotto lo richiedeva.
05 — L’approccio
Dallo scroll infinito al percorso guidato
Problema
Ogni strumento era trattato come un modulo verticale unico. L’utente non capiva quanto fosse lungo il processo né a che punto si trovasse.
Decisione
Ho trasformato gli strumenti in percorsi a step sequenziali, una schermata per step, con una progress bar comune sempre visibile.
Effetto
Un solo pattern da imparare, riutilizzabile su quasi tutta la piattaforma con un numero di step variabile ma una logica identica.
Prima
Modulo verticale con più campi impilati nella stessa pagina, carico cognitivo più elevato.
Dopo
Percorso progressivo, più facile da seguire e da replicare tra strumenti diversi.
La prompt bar come porta d’ingresso
Problema
La barra conversazionale era un requisito di prodotto. Se trattata come elemento isolato, sarebbe diventata una funzione in più senza un ruolo chiaro.
Decisione
La prompt bar collega l’intento espresso dall’utente al flusso più pertinente. L’impatto sul time-to-first-value resta da validare quantitativamente.
Effetto
La prompt bar collega l’intento espresso dall’utente al flusso più pertinente. L’impatto sul time-to-first-value resta da validare quantitativamente.
06 — COSA È CAMBIATO
Un sistema più chiaro,
scalabile e coerente
01
Un unico pattern a step copre la quasi totalità degli undici strumenti. Gli utenti imparano una logica sola e la ritrovano ovunque nella piattaforma.
02
La dashboard è passata da una navigazione distribuita su più livelli a un accesso diretto agli strumenti. Meno passaggi tra l’intenzione dell’utente e l’avvio del flusso.
03
I componenti per gli output AI reggono testi brevi, testi lunghi, liste, card e formati misti. La stessa interfaccia funziona indipendentemente da ciò che il modello restituisce.
04
Il design system copre input, output, stati di caricamento, stati vuoti e azioni post-output con una libreria coerente. Il team di sviluppo ha potuto lavorare su componenti già documentati e pronti all’uso.
CONTATTI
Cerchi un Senior Product Designer per un prodotto complesso?
Parliamo del ruolo, del team e dei problemi di prodotto da affrontare.
PARLIAMO DI UN RUOLO