Il redesign dell'ecommerce, pronto per la produzione.

Il sito intero con un design system nuovo, oppure la sola sezione che perde di più: checkout, menu, scheda prodotto, listing, ricerca, account. La scelta parte dai dati, non dal gusto.

• Sito intero
• Una sezione
• Scelta sui dati

Brand fashion e luxury di dimensione media e grande, con un team ecommerce interno e un sito già in produzione su più mercati. Con un system integrator, interno o esterno, che gestisce la piattaforma.

• Fashion e luxury
• Team ecommerce interno
• Sito in produzione
• System integrator

Frontend headless in Next.js o React, tema Shopify Online Store 2.0, Salesforce Commerce Cloud (SFRA o PWA Kit). Il design system è lo stesso: cambia solo come lo si collega.

• Headless
• Shopify
• Salesforce Commerce Cloud

Decisione di design e decisione tecnica nello stesso momento, nella stessa libreria di componenti. Il prototipo approvato nel browser è il codice che viene consegnato.

• Design + sviluppo
• Una libreria
• Zero reinterpretazioni

Benchmark dei concorrenti letto con le linee guida Baymard e NN/g, più analytics e registrazioni di sessione per capire dove si perdono clienti e quanto costa ogni punto di perdita. Output: report di benchmark e punti di perdita quantificati.

• Benchmark competitivo
• Baymard e NN/g
• Behavioral analytics
• Session replay

Una sessione con l'executive team fissa obiettivi, KPI e priorità; gli stakeholder (ecommerce, marketing, customer care, IT, system integrator) portano i vincoli che nei dati non compaiono. Output: brief, journey map, piano degli sprint.

• Executive team
• Stakeholder
• KPI e vincoli

Prima il design system, poi il prototipo in codice, navigabile nel browser da desktop e mobile. A ogni sprint chi decide rivede qualcosa che funziona e le correzioni si fanno una volta sola. Output: prototipo su URL condiviso.

• Design system prima
• Prototipo in codice
• Sprint brevi

Figma, Storybook, codice con QA su browser e dispositivi reali, design system. Il codice gira su dati di mock: il system integrator lo collega ai dati reali, poi un A/B test misura il risultato. Output: pacchetto di consegna con checklist di integrazione.

• QA cross-browser
• Dati di mock
• System integrator
• A/B test

Pagine, componenti, varianti e stati, con gli stessi nomi e gli stessi token del codice. Il team lo usa per campagne e varianti di test; il system integrator lo consulta, non lo ricostruisce.

• Pagine e flussi
• Libreria componenti
• Design token

Ogni componente aperto nel browser con stati, varianti, casi limite e note di accessibilità. Il team risponde da solo alle domande operative; il system integrator legge l'interfaccia prima di collegare le API.

• Documentazione eseguibile
• Stati e casi limite
• Accessibilità

Lo stesso prototipo approvato, nella forma della piattaforma, con QA su dispositivi reali, Core Web Vitals e accessibilità verificati. Gira su dati di mock: il system integrator sostituisce i mock con catalogo, prezzi, carrello e pagamenti reali.

• Dati di mock
• QA
• Performance
• Accessibilità

1import { Price, Badge, Swatches } from "@ds/atoms";2import { useProduct } from "@/data"; // mock → API reali34export default function ProductCard({ id }) {5  const product = useProduct(id);6  return (7    <article className="product-card">8      <img src={product.image} alt={product.name} />9      {product.promo && <Badge tone="promo" />}10      <Price value={product.price} compareAt={product.listPrice} />11      <Swatches colors={product.colors} max={5} />12    </article>13  );14}

Token, atomi, molecole, organismi e template, con un contratto scritto per ogni componente e controlli automatici nel repository. Resta al brand: il team lo estende da solo, anche con agenti AI; se esiste già, lo si estende invece di sostituirlo.

• Atomic design
• Contratto di componente
• Resta al brand

Un prototipo navigabile nel browser, desktop e mobile, con i prodotti del catalogo, al posto di un mockup statico da interpretare due volte. È già il codice che andrà online.

• Prototipo nel browser
• Desktop e mobile
• Prodotti reali

Un pacchetto solo, Figma, Storybook, codice pronto per la produzione e design system dalla stessa libreria, al posto di un file di design e, mesi dopo, di un frontend che gli somiglia in parte.

• Un preventivo
• Correzioni una volta sola
• Un pacchetto

Nessun passaggio tra chi disegna e chi sviluppa: niente riunioni per spiegare i mockup, ticket ricopiati, screenshot con le frecce. Le decisioni di design e quelle tecniche si prendono insieme.

• Zero handoff
• Decisioni insieme

Per andare online serve un system integrator che colleghi il codice ai dati reali, non un team che ricostruisca il frontend. Dopo il go live un A/B test contro la versione precedente misura il risultato.

• System integrator
• A/B test
• KPI del brief

Passaggi, accesso o guest, form, spedizione e pagamento per paese, errori e riepilogo, a partire dal funnel di abbandono. Il checkout GUESS su Salesforce Commerce Cloud, ridisegnato da solo: +28% di conversione, +15% da mobile.

• Funnel di abbandono
• Pagamenti per paese
• A/B test
• Caso: checkout GUESS

Struttura delle categorie, menu desktop e mobile, accesso a brand e collezioni, a partire da click map e benchmark. Il menu globale GUESS: hub dei brand, categorie ordinate sui clic dopo uno studio su 30+ concorrenti, in produzione su 60+ mercati.

• Click map
• 30+ concorrenti
• Caso: menu GUESS

Galleria, taglie e colori, prezzo, add to cart e racconto del prodotto; griglia, filtri e inserti editoriali, a partire da scroll map e tasso di add to cart. Massimo Osti Studio: PDP e PLP in un prototipo navigabile in codice.

• Scroll map
• Add to cart
• Caso: Massimo Osti Studio

Ricerca con suggerimenti e zero risultati, area account, oppure l'esperienza intera con un design system nuovo. La ricerca GUESS passata da Einstein Search ad Algolia; Massimo Osti Studio ridisegnato per intero su un design system da zero.

• Zero risultati
• Area account
• Design system da zero