Una timeline interattiva sulla storia della seta
Questo case study interattivo per Jigsaw esplora come UX basata sullo scroll, motion design e una direzione editoriale attenta abbiano dato vita a un’esperienza fashion ricca di profondità.
Jigsaw ha sempre avuto una presenza forte sia all’inizio che alla fine del funnel — ottimizzando l’attenzione e le conversioni. Ma mancava qualcosa al centro: un modo per stimolare connessione, accendere curiosità e invitare le persone a scoprire il brand in modo più intimo.
La seta — uno dei materiali più iconici del brand — è diventata il soggetto perfetto per una narrazione digitale dal tono editoriale. Più che spingere un prodotto, l’obiettivo era offrire qualcosa di più generoso: una landing page ottimizzata SEO che esplorasse la storia della seta, intrecciando contenuti editoriali e poesia visiva.
È qui che siamo entrati in gioco. Ho guidato il processo di design, dando forma a una soluzione che trovasse il giusto equilibrio tra performance e bellezza. Fin dalle prime fasi ho identificato il motion e l’interattività come elementi chiave — non solo per coinvolgere, ma per dare voce al brand in uno spazio spesso dominato da contenuti statici. Il risultato è stata una landing page leggera e ottimizzata SEO, che unisce chiarezza e cura del dettaglio — fondendo UX, storytelling di marca e visibilità sui motori di ricerca.
Prima di passare agli aspetti visivi, mi sono concentrato sulla struttura narrativa. Ho guidato la fase iniziale di ricerca esplorando pattern editoriali e modalità di fruizione dei contenuti lunghi e interattivi da parte degli utenti. La scoperta chiave? La cronologia rende la storia intuitiva — ma solo se l’esperienza scorre con chiarezza e ritmo.
Da qui è nata l’idea di una UX basata sullo scroll: un flusso strutturato in cui ogni capitolo della storia della seta si dispiegava progressivamente. Ho progettato l’intera architettura UX attorno a questo concetto, mappando la gerarchia dei contenuti, i wireframe e la logica dell’interfaccia per rendere l’esperienza fluida. Ogni elemento UI è stato posizionato con cura per guidare l’attenzione, facilitare la comprensione e garantire un’interazione senza attrito.
Il movimento ha avuto un ruolo silenzioso ma fondamentale nel design dell’interazione. Animazioni sottili hanno aiutato a scandire il ritmo e a dare alla storia una dimensione tattile. Ho mantenuto l’interfaccia essenziale e focalizzata, lasciando che fossero i contenuti e le immagini a parlare.
Ho curato anche la direzione visiva, commissionando ad un’illustratore delle illustrazioni ad acquerelli che aggiungessero calore e matericità alla timeline. Una volta ricevuti gli asset, mi sono occupato della post-produzione e ho animato le transizioni per imitare la diffusione del pigmento sulla carta — morbida, fluida ed espressiva, in risonanza con la natura stessa della seta.
In collaborazione con la copywriter interna, abbiamo affinato la voce narrativa per rispecchiare il tono di Jigsaw: editoriale ma accessibile, curato ma mai rigido. Il risultato è stato un racconto ben costruito — nelle parole, nei visual e nel ritmo.
Il prodotto finale ha unito perfettamente UX design, storytelling interattivo e contenuti ottimizzati per SEO. Progettata come un’esperienza basata sullo scroll, la pagina guidava l’utente attraverso la storia della seta in modo sia editoriale che immersivo.
Dietro questa semplicità si nascondeva una struttura attentamente ingegnerizzata: codice pulito, HTML semantico, animazioni leggere e un design responsive — tutto ottimizzato per l’engagement degli utenti e le performance nei motori di ricerca.
Il design ha funzionato su più livelli:
- UX design basato sullo scroll
l formato a timeline ha creato un flusso utente chiaro, permettendo ai visitatori di spostarsi senza sforzo da un momento storico all’altro. Nessun menu, nessuna confusione — solo un viaggio guidato dall’inizio alla fine. - Motion design & micro-interazioni
Le animazioni calibrate sullo scroll creavano ritmo, dando a ogni sezione un senso di presenza senza rallentare l’esperienza. Le micro-interazioni rinforzavano le transizioni e aggiungevano un senso di controllo. - Sistema visivo & contenutistico unificato
Tipografia, layout e illustrazioni sono stati trattati come un unico sistema — volutamente minimale, sempre espressivo, sempre allineato al tono di Jigsaw. - Struttura SEO-oriented
I contenuti sono stati strutturati semanticamente e resi pienamente indicizzabili, garantendo visibilità senza compromettere il design. Codice leggero, caricamento progressivo e markup accessibile hanno sostenuto sia la velocità che la visibilità organica. - UX responsive e mobile-first
Il formato scrollabile risultava fluido su mobile, adattandosi perfettamente agli schermi piccoli e allineandosi al comportamento naturale degli utenti. Niente tocchi, niente attese — solo un’esperienza responsive e piacevole.
Crediti
| Cliente | Jigsaw – Fashion & Lifestyle Brand (UK) |
|---|---|
| Agenzia | Passion Digital |
| Lead UX/UI Design | Matteo Miele |
| Design motion | Matteo Miele |
| Illustrazioni | Aaron Jacob Jones |
| Copywriting | Lola Michels |
Italian 
English