Case study

Massimo Osti Studio: un ecommerce che racconta il prodotto, capitolo per capitolo

Massimo Osti Studio vende capi che nascono da una ricerca sui tessuti: jacquard tridimensionali sviluppati con Limonta, lane termosaldate, lane vulcanizzate con filati gommati. Ogni uscita è un chapter, numerato, con un materiale e un processo dietro. Un ecommerce fatto di griglie e schede standard mostra la giacca, ma non dice perché costa 1.350 euro.

Ho ridisegnato il sito come un mix di editoriale e vendita: il racconto del tessuto e del processo sta accanto al prodotto, non in una sezione a parte, e ogni pagina porta verso l'acquisto. Il risultato è un prototipo navigabile costruito in codice, con home, menu, ricerca, listing, pagine chapter, scheda prodotto, carrello, heritage e process, in versione desktop e mobile. Non un mockup: effetti, transizioni e stati si provano davvero.

Il video qui sotto è la home desktop così come si usa: i sei capitoli in sequenza, il capo che si muove allo scroll, la strip dei prodotti di ogni chapter.

Il problema

Il brand ha una storia forte, un archivio e un metodo riconoscibile, ma un ecommerce tradizionale la lascia fuori dal percorso d'acquisto: la ricerca tessile finisce in una pagina istituzionale che nessuno legge prima di comprare, e la scheda prodotto resta una foto con un prezzo.

Cosa doveva fare il redesign:

Far capire il valore del capo nel punto in cui si decide, non altrove
Tenere insieme due modi di navigare: per categoria, per chi sa cosa cerca, e per chapter, per chi vuole scoprire
Restare un ecommerce orientato alla vendita: carrello, taglie, disponibilità, abbinamenti e checkout sempre a portata di mano
Funzionare su mobile con la stessa forza, non come una versione ridotta

Home desktop: il capitolo 16 Trama 3D Double Dyed a tutto schermo, con il capo in primo piano, il testo sul tessuto, il bottone Scopri il chapter e l'indice dei sei capitoli a destra

La home: navigazione per capitoli

La home non è una vetrina di banner: è una sequenza di sei capitoli, ognuno a tutto schermo, con un indice fisso a destra, da Trama 3D 01 a Lana Vulcanizzata 06, che dice sempre dove si è e permette di saltare. Ogni capitolo si legge in tre tempi, tutti guidati dallo scroll:

Il capo: la fotografia occupa lo schermo, il titolo e due righe sul tessuto spiegano cosa lo rende diverso, in grassetto le parole che contano (jacquard tridimensionale, doppia tintura in capo)
Il movimento: scorrendo, il capo ruota e si inclina in tre dimensioni mentre il testo sale e sfuma. È il momento in cui la superficie del tessuto si vede davvero, e il motivo per cui il capo è fotografato da vicino
I prodotti: la sezione resta agganciata e sotto scorre la strip orizzontale dei capi del chapter, con prezzo e varianti colore, chiusa da un invito ad acquistare la collezione

Il capitolo successivo arriva senza interruzioni. Si scorre una pagina sola e si attraversa tutta la collezione, racconto e prodotto insieme, con uno scroll fluido che rende il ritmo uniforme.

Menu, ricerca e due logiche di navigazione

Il mega menu tiene insieme le due logiche. A sinistra le categorie, come in qualunque negozio: view all, blazer, overshirt, giacche, maglieria, t-shirt, pantaloni. Al centro i chapter in corso, numerati. A destra due card visive che mettono in evidenza il capitolo corrente e i Wardrobe Garments, i capi permanenti. Le voci Past Chapters, Book e Heritage portano all'archivio, alle edizioni e alle pagine di racconto.

La ricerca si apre a tutto schermo e risponde mentre si scrive: digitando «lana» compaiono subito gli undici capi dei chapter in lana, con prezzo e stato (coming soon compreso). Il carrello in alto mostra il numero di pezzi e apre la pagina con carrello e wishlist affiancati.

Listing: griglia pulita, chapter con racconto

Il listing per categoria è volutamente essenziale: tab delle categorie, conteggio, filtri in un drawer (ordinamento, categoria, chapter, tessuto, colore, prezzo), toggle tra griglia larga e compatta. Le card mostrano nome, chapter di appartenenza, prezzo, varianti colore e lo stato coming soon. Chi sa cosa cerca arriva al prodotto in due click.

La pagina chapter è un'altra cosa. Apre con il capo e il testo sulla lavorazione, poi la griglia alterna prodotti e inserti editoriali: un prodotto in evidenza con la sua didascalia, una frase sul tessuto al posto di una card, una sezione The Process con le fotografie di dettaglio. In fondo, «Continua il viaggio» porta agli altri capitoli. Si compra dentro il racconto, senza uscirne.

La scheda prodotto: prima il perché, poi il prezzo

La PDP è il centro del progetto. Sopra funziona come deve funzionare una scheda che vende: galleria verticale con dieci viste e zoom, pannello fisso con chapter, nome, prezzo, varianti colore, taglie con le esaurite barrate, wishlist, condivisione, bottone di acquisto, spedizione gratuita e reso in evidenza, dettagli in accordion. Il bottone apre un drawer delle taglie con «Avvisami» per le esaurite, «Ultimi pezzi» su quelle in via di esaurimento e il link «Trova la mia taglia».

Sotto il pannello la scheda diventa editoriale, con moduli in sequenza che rispondono alle domande di chi sta per spendere:

Il chapter: una fascia con il capo fotografato da vicino e il testo del capitolo. Il prodotto viene collocato nella ricerca a cui appartiene
Il capo: descrizione completa accanto a una fotografia di dettaglio, costruzione, chiusure, trattamento
The Process: come nasce il tessuto, dal filato al taglio laser, con l'immagine del colletto
Materia, origine, vestibilità, packaging: composizione, dove è confezionato, tessuto e tinto, le misure del modello, la quota di materiali riciclati. Dati, non aggettivi

Il prezzo lo si incontra due volte: subito, nel pannello, e di nuovo in fondo, dopo che si è letto tutto. La seconda volta ha un peso diverso.

Recommender e quick add

I suggerimenti stanno dove servono e hanno una ragione dichiarata. In fondo alla scheda, «Spesso acquistati insieme» propone gli abbinamenti con blazer, overshirt, pantaloni e maglieria di altri chapter; «Dallo stesso chapter» tiene vicini i capi nati dalla stessa ricerca. Nel carrello, «Dallo Studio · Suggeriti per te» continua la proposta prima del checkout. Anche il mega menu suggerisce: il chapter corrente e i capi permanenti.

Su ogni card suggerita c'è il quick add: il «+» apre il drawer delle taglie di quel prodotto, con disponibilità e «Avvisami», e si aggiunge al carrello senza lasciare la pagina. Il percorso di chi sta leggendo non si interrompe.

Carrello, wishlist e le pagine di racconto

Il carrello e la wishlist sono due tab della stessa pagina: ogni riga ha chapter, nome, colore, taglia e le azioni per modificare, spostare in wishlist o togliere. A destra il riepilogo con codice promozionale, totale, «Procedi al checkout» e l'express checkout con PayPal e Apple Pay; sotto, spedizione in uno o due giorni, reso gratuito, aiuto e i metodi di pagamento accettati. Tutto ciò che toglie dubbi prima di pagare, in una colonna.

Heritage e The Process sono le pagine lunghe: la storia del marchio aperto, il metodo di Massimo Osti, il taccuino e la fotocopiatrice, e poi chapter per chapter come nasce ogni tessuto. Non sono pagine istituzionali a sé: sono raggiungibili dal menu e richiamate dai moduli delle schede, così il racconto completo è a un passo da ogni prodotto.

Mobile: la stessa esperienza, non una versione ridotta

Su mobile la home diventa un mazzo di capitoli a tutto schermo che si sfogliano con lo swipe verticale: il capo, poi la strip dei suoi prodotti, poi il capitolo successivo, con una transizione che sovrappone le schermate. Il menu è un drawer con le cinque sezioni, due card «Focus on», i link di aiuto e il selettore paese/lingua. La ricerca si apre a tutto schermo come su desktop.

Il listing è a due colonne con lo stesso toggle di griglia e gli stessi filtri in drawer. La scheda prodotto ha una barra fissa in basso con chapter, nome, prezzo, colori e il bottone di acquisto, così si compra da qualsiasi punto della pagina; il drawer delle taglie sale dal basso con disponibilità e «Avvisami». I moduli editoriali, i recommender e il carrello seguono la stessa struttura del desktop, impaginati per il pollice.

Come è fatto

Il prototipo è un'applicazione React con routing interno: ogni pagina ha il suo indirizzo e si può condividere. La home desktop usa sezioni agganciate allo scroll con trasformazioni 3D del capo e uno scroll fluido; la home mobile usa uno slider verticale a schermo intero con transizioni sovrapposte. Fotografie e testi sono quelli reali del brand, i prezzi e le disponibilità sono verosimili, così ogni stato, dall'esaurito al coming soon, si vede com'è.

Tipografia a due voci, un carattere a spaziatura fissa per etichette e dati, uno geometrico e pesante per i titoli, su fondo nero: la palette lascia tutto il colore alle fotografie dei capi.

Griglia dei prodotti suggeriti con il bottone + del quick add visibile sulla card del Button Blazer

In sintesi

Il redesign di Massimo Osti Studio è un prototipo navigabile che unisce editoriale e vendita: la home si legge per capitoli con il capo che si muove allo scroll, il menu e i chapter offrono due modi di navigare, le pagine chapter alternano prodotti e inserti editoriali, la scheda prodotto racconta chapter, capo, processo e materia prima di chiedere l'acquisto, i recommender con quick add e il carrello con wishlist ed express checkout chiudono il percorso. Desktop e mobile progettati separatamente, con la stessa struttura.

Domande frequenti

Cos'è il redesign dell'ecommerce di Massimo Osti Studio?

È un prototipo navigabile, costruito in codice, che ripensa l'ecommerce del brand come un mix di editoriale e vendita: la home si legge per capitoli, ogni chapter ha la sua pagina con racconto e prodotti, la scheda prodotto spiega tessuto e processo prima di chiedere l'acquisto. Desktop e mobile sono progettati separatamente.

Come fa il sito a dare peso al prezzo di un capo?

Mettendo il racconto accanto al prodotto, nello stesso punto in cui si decide: nella scheda ci sono il chapter di appartenenza, la descrizione del capo, il processo produttivo e una tabella di materia, origine, vestibilità e packaging. Il prezzo arriva dopo che si è capito cosa si sta comprando.

Come si naviga tra menu e capitoli?

Con due logiche che convivono. Il menu ragiona per categoria, come in qualsiasi ecommerce: blazer, overshirt, giacche, maglieria. I chapter ragionano per ricerca tessile e si raggiungono dalla home, dal mega menu e dalle schede prodotto. Chi sa cosa vuole va dritto al listino, chi vuole scoprire segue il racconto.

← Torna ai progetti

Cosa ho consegnato

Il redesign non è una tavola in Figma: è un sito che si naviga, con effetti, transizioni e stati reali.

Design

Desktop e mobile progettati separatamente con la stessa struttura: home a capitoli, doppia navigazione, PLP editoriale, PDP, carrello.

Codice

Prototipo navigabile in React con routing interno: ogni pagina ha il suo indirizzo e si può condividere.

Sistema visivo

Tipografia a due voci (monospace per etichette e dati, geometrica per i titoli) su fondo nero, con il colore lasciato alle fotografie.

Un solo professionista per design e sviluppo: il risultato approvato è quello andato in produzione. Come consegno un redesign ecommerce →