Redesign di una piattaforma AI generativa

Contesto

Il prodotto è un assistente AI conversazionale multiuso: gli utenti scrivono prompt, ricevono risposte testuali, generano immagini e brani musicali, e possono attivare aggiornamenti dal web. La versione precedente era funzionale ma visivamente piatta: tema chiaro uniforme con palette teal e corallo, sidebar quasi indistinguibile dall'area contenuti, tipografia compatta a basso contrasto e una densità informativa elevata, con contatore crediti, banner di sistema, selettori di modalità e chip visibili contemporaneamente.

Il progetto ha richiesto un intervento su tre livelli insieme: identità di brand, esperienza d'uso e infrastruttura di design.

Problema

Tre criticità guidavano il redesign. La prima riguardava la leggibilità: il contenuto generato, cioè il valore per cui l'utente usa il prodotto, era penalizzato da corpo testo ridotto e contrasto insufficiente. La seconda era la gerarchia: elementi primari e secondari avevano peso visivo simile, senza un percorso di lettura chiaro. La terza era la frammentazione dell'interazione: le modalità di risposta e le opzioni erano distribuite tra dropdown, chip e banner attorno all'input, aumentando il carico decisionale a ogni invio.

A queste si aggiungeva un limite strutturale: senza una base sistemica, ogni evoluzione del prodotto (nuovi temi, nuovi mercati, nuove modalità generative) avrebbe moltiplicato incoerenze e costi di manutenzione.

Obiettivi

Centrare l'esperienza sulla lettura delle risposte. Unificare i pattern di interazione tra le diverse modalità generative. Costruire un'identità premium riconoscibile. Introdurre personalizzazione per aumentare pertinenza e retention. E fondare tutto su un design system a token capace di sostenere theming, localizzazione e crescita del prodotto.

Il design system

Il cuore del progetto è un design system costruito su design token conformi allo standard DTCG 2025.10, strutturati su due livelli: primitive e semantic. La scelta di non introdurre token component-specifici mantiene l'architettura snella: i componenti consumano direttamente i token semantici, e ogni decisione visiva resta tracciabile a una variabile con un significato, non a un valore ripetuto.

Token

I token coprono quattro famiglie: spacing e radius, per ritmo e geometria coerenti su tutte le superfici; la tipografia, con un aspetto distintivo, l'ottimizzazione per mercato: Inter per gli alfabeti occidentali e le varianti Noto per arabo, cinese, hindi e thai, così che la qualità di lettura resti costante in ogni localizzazione senza fallback casuali del browser; il colore, organizzato per compito e non per tinta: background, border, text e icon. Ogni token dichiara a cosa serve, non che colore è.

Theming a tre temi

I token colore risolvono su tre temi: light, dark e static. I primi due governano l'area contenuti e i componenti; il terzo è usato dalla sidebar, che mantiene la propria superficie scura in entrambe le modalità.

È questa architettura a rendere possibile una delle decisioni chiave del redesign: la separazione strutturale tra navigazione e conversazione regge sia in light mode sia in dark mode. Nessun override manuale: la distinzione è codificata nei token.

Componenti

La libreria copre tutti i componenti standard (bottoni, icon button, input, select, accordion e gli altri elementi di base) e una serie di componenti complessi progettati ad hoc per il prodotto AI:

• Il composer, il campo di scrittura dei prompt che concentra in un unico pattern l'invio, l'input vocale, il menu «+» con le modalità generative (testo, immagine, musica, web updates) e i chip di stato rimovibili quando una modalità è attiva. È il componente che ha sostituito la costellazione di dropdown e toggle della versione precedente.
• Il player musicale, per l'ascolto dei brani generati direttamente nel flusso della conversazione.

Decisioni progettuali principali

Navigazione e contenuto separati per struttura, non per decorazione. La sidebar su tema static e l'area conversazione su light/dark creano una gerarchia spaziale immediata: dove sono, dove agisco.

La risposta AI come protagonista. Scala tipografica più generosa, contrasto pieno in entrambi i temi, grassetti semantici sui concetti chiave. Il contenuto generato è l'interfaccia principale del prodotto e viene trattato con lo stesso rigore dei componenti.

Un solo punto di ingresso per le modalità. Il menu «+» del composer consolida le quattro modalità generative, riducendo le scelte simultanee visibili al momento dell'invio (legge di Hick) e allineandosi ai pattern consolidati nei prodotti AI (legge di Jakob).

Accento con significato. L'oro è riservato ad azioni primarie e stati attivi. La sua scarsità ne preserva il valore di affordance: stesso trattamento, stesso comportamento.

Personalizzazione strutturata. Un pannello Account raccoglie lingua, paese, fuso orario, interessi e una breve bio, trasformando il prodotto da tool generico ad assistente configurabile, con le azioni distruttive isolate e le convenzioni di conferma rispettate.

Feedback granulare. Ogni messaggio espone valutazione, copia, condivisione, rigenerazione e lettura vocale; la conversazione mostra un badge di qualità e un disclaimer trasparente sull'uso dell'AI.

Validazione euristica

Il redesign è stato verificato rispetto alle euristiche di Nielsen e alle principali UX law. I miglioramenti più misurabili riguardano visibilità dello stato del sistema, coerenza (sostenuta nativamente dai token), riconoscimento invece di ricordo e design minimalista: le informazioni secondarie sono state spostate in superfici dedicate secondo il principio della progressive disclosure, senza eliminare complessità ma ricollocandola (legge di Tesler). Le leggi di Fitts, di prossimità e di similarità sono rispettate per costruzione, perché codificate nei token di spacing, radius e colore.

Impatto

Il risultato è un'esperienza più leggibile, prevedibile e affidabile: carico cognitivo ridotto a ogni sessione, scansione più rapida delle risposte, orientamento immediato tra navigazione e contenuto, comfort visivo in ogni condizione di luce. Sul piano organizzativo, l'architettura a token primitive/semantic con tre temi e tipografia multi-script rende il sistema pronto a scalare su nuovi mercati e nuove feature senza debito visivo.

Cosa mi porto da questo progetto

Un design system a token non è un dettaglio tecnico ma una decisione di prodotto: è ciò che ha reso possibili, allo stesso tempo, il theming a tre temi, la localizzazione tipografica per cinque sistemi di scrittura e la coerenza tra componenti standard e componenti complessi come il composer. È la differenza tra un redesign e un restyling.