Update cookies preferences

Informazioni sul progetto


La Bottega dei Due Monti è una putìa siciliana di formaggi, salumi e conserve dei Nebrodi. L’attività di famiglia nasce nel 1970 a Montalbano Elicona. Oggi la bottega è a Capo d’Orlando e gli stessi prodotti si ordinano anche online.

L’ho costruito da capo a fondo — la homepage che guadagna la visita, la vetrina che gestisce i prodotti a peso con onestà, il sistema email che porta ogni ordine dalla richiesta al pagamento, e le automazioni che permettono a un team piccolo di mandare avanti tutto senza annegare nell’amministrazione.

Sito marketing

Prima di vedere un prezzo, il visitatore deve capire che posto è questo. La homepage racconta quella storia — superfici scure, il verde e il giallo della bottega, fotografie di prodotto che fanno sentire i Nebrodi vicini. «Mangia sano… Mangia Siciliano», la storia di famiglia dal 1970, la distinzione tra la bottega di Capo d’Orlando e il negozio online che spedisce in Europa.

Guadagna l’ordine prima di chiederlo. Quando il visitatore arriva al catalogo, sa già da chi sta comprando.

Esperienza mobile — dalla homepage alla lista della spesa

Il problema

Una provola non pesa come la successiva. Una porzione si taglia al momento. Il prezzo in scheda è un prezzo al chilo, e il pezzo che il cliente riceverà ancora non esiste.

Un checkout «paga subito» addebiterebbe l’importo sbagliato. La bottega deve prendere la richiesta, pesare, confermare il prezzo reale e solo allora inviare il link di pagamento — o rifiutare, se il pezzo non è disponibile. La spedizione può aspettare finché il cliente non dice quando deve partire il pacco.

Il problema di design era rendere quel processo manuale ovvio per il cliente — e dare alla bottega un’azione chiara per ogni passo.

UX della vetrina

La vetrina porta avanti l’identità visiva del sito marketing — il verde della bottega, gli accenti gialli, le superfici quasi nere. Niente cambia nel passaggio dalla storia del brand alla scheda prodotto. Il sito gira in italiano, inglese e tedesco.

Il problema di UX più difficile è sulla scheda prodotto. Il cliente deve scegliere il taglio — 250 g, 500 g, un pezzo intero — vedere una stima onesta del prezzo e aggiungere senza impegnarsi a pagare. Il bottone dice «Aggiungi alla lista», non «Acquista». Perché questo è una richiesta.

Il carrello è la lista della spesa, e lo dice esplicitamente. Un avviso permanente spiega che i pesi variano e che ogni prezzo è una stima — la bottega confermerà prima che si muova qualsiasi soldo. Il checkout ha quattro passi: lista della spesa, dati dell’ordine, ordine inviato, ordine pronto. Spedizione o ritiro.

Catalogo prodotti della Bottega in browser desktop
Catalogo su desktop
Scheda Provola fresca in browser desktop
Provola fresca — porzione, stima, aggiungi alla lista

Ragionamento sull’esperienza

Ogni scelta dell’interfaccia risale a un dato: la bottega non sa il peso finché non taglia il pezzo. Quel vincolo guida il percorso cliente, gli stati dell’ordine e il layer di automazione. I tre diagrammi rendono esplicito quel ragionamento.

Workflow percorso cliente: scegli il taglio, lista della spesa, invia richiesta, la bottega conferma, paga e spedisci
Percorso cliente — prima stima e richiesta, pagamento solo dopo il peso reale
Swimlane operazioni: cliente, bottega ed email attraverso richiesta, conferma, decisione, pagamento e spedizione
Operazioni di bottega — una macchina a stati dell’ordine d’acquisto condivisa da cliente, bottega ed email
Workflow di automazione per pubblicazione prodotti da chat, contenuti social e newsletter multilingue
Automazioni — l’AI prepara e pubblica; le persone approvano prima che qualcosa vada online

Ordini d’acquisto ed email

All’invio non viene addebitato nulla. Il gateway si chiama «Pagamento alla conferma» perché è esattamente quello che succede — l’ordine arriva come richiesta che la bottega può confermare, rifiutare o mettere in attesa.

Dalla schermata ordine in amministrazione la bottega può:

  • Inviare l’ordine d’acquisto confermato al cliente, con link di accettazione e rifiuto
  • Rifiutare una nuova richiesta e avvisare il cliente
  • Inviare un promemoria di pagamento dopo l’accettazione
  • Reinviare le email corrispondenti quando serve

Ogni cambio di stato arriva al cliente come email di brand — non un avviso WooCommerce generico. Il cliente apre una pagina firmata per accettare, modificare o annullare l’ordine confermato. L’intero percorso decisionale si svolge dall’inbox.

Ho costruito il sistema di email HTML da zero — override dei template YITH e template custom Bottega. La bottega gestisce dall’inbox l’intero ciclo: la stima iniziale, l’email ordine pronto dove il prezzo reale al peso affianca la stima barrata, il rifiuto, il promemoria di pagamento con link sicuro, pagamento ricevuto, spedito, pausa quando manca magazzino, finestra ferie e annullamento. L’italiano è la lingua di partenza; inglese e tedesco seguono.

Email di brand: richiesta ordine d'acquisto ricevuta con stima
Richiesta ricevuta — stima, non addebito
Email di brand: ordine d'acquisto pronto con accetta, modifica o annulla
Ordine pronto — conferma, modifica o annulla
Email di brand con foto di Biagio: ordine temporaneamente in pausa
In pausa — Biagio spiega, l'ordine aspetta al sicuro

Il cliente clicca il link nell'email e atterra su una pagina firmata — da desktop o mobile — per accettare, rifiutare o richiedere una modifica. Nessun account: la decisione vive nell'inbox.

Pagina decisione ordine su desktop: tabella pesi e prezzi confermati, tre pulsanti — accetta, rifiuta, modifica
Ordine pronto su desktop — accetta, rifiuta o modifica
Pagina decisione ordine su mobile: prezzi confermati con stime barrate, accetta / rifiuta / modifica
Ordine pronto su mobile — stessa decisione, ottimizzata per il telefono
Lista della spesa in browser desktop
Lista della spesa su desktop
Checkout in browser desktop
Checkout — spedisci o ritira

UX mobile

La maggior parte degli ordini arriva da telefono. Il flusso è lo stesso — scegli il taglio, vedi la stima, aggiungi alla lista, invia la richiesta — ma il vincolo dei 390px ha obbligato ogni elemento a guadagnarsi il suo posto.

Catalogo mobile con card delle categorie
Shop su mobile — prima le categorie
Scheda prodotto mobile con porzione, 250 g e prezzo stimato
Porzione, 250 g, prezzo stimato, aggiungi alla lista
Lista della spesa mobile con avviso prezzi stimati
Lista della spesa con l’avviso sui prezzi stimati
Checkout mobile con spedizione o ritiro in bottega
Spedisci, oppure ritira in bottega

Operazioni di bottega

Pagare non vuol dire spedire subito. La bottega decide quando. Il cliente riceve un’email con link firmati — spedisci ora o posticipa — e l’ordine aspetta finché non risponde. Se la bottega è in ferie, le nuove richieste ricevono un avviso automatico senza bloccare il checkout.

Packlink gestisce il lato corriere: consegna a domicilio, assicurazione sulla merce e uno stato consegnato allineato a come la bottega tiene traccia dei pacchi.

Ogni caso limite — attesa, pausa, finestra ferie, ritardo di spedizione — è progettato perché un team piccolo gestisca il negozio a mano, senza improvvisare fuori dal sistema.

Automazioni e AI

Un bot Telegram è la sala comandi. I comandi finiscono nei workflow n8n; il team non tocca mai il backend direttamente.

Pubblicazione prodotti da chat

Una foto su Telegram avvia una bozza prodotto. Gemini propone nome, categoria, prezzo e varianti. Un’approvazione e il prodotto è live su WooCommerce.

Contenuti e social

Un brief o un prodotto del catalogo diventa un post multicanale: copy AI, immagini Gemini, video Veo opzionale — revisionato su Telegram tramite il bot BD2M Automatron e archiviato in Notion, poi schedulato su Facebook, Instagram, Pinterest, LinkedIn, Telegram e il blog WordPress. Un poller separato segue i job Veo fino a reel e post.

Immagini di prodotto

Una fotografia di prodotto appetitosa e coerente è un costo reale per un piccolo produttore artigianale. Per la Bottega, Gemini genera immagini di campagna e di prodotto a partire dal brief del catalogo — nome del prodotto, categoria, riferimento di mood. Il risultato viene rifinito e ritagliato in Figma prima di essere pubblicato. I materiali di marketing che richiedevano un set fotografico escono ora da una pipeline Gemini — stessa palette di brand, stesso tono, a scala di catalogo.

Immagine di campagna generata con AI per Bottega dei Due Monti — visual hero di prodotto
Immagine di campagna — generata dal brief del catalogo, rifinita in Figma
Visual brand story generato con AI per Bottega dei Due Monti — palette e tono coerenti
Visual brand story — palette coerente, stessa pipeline dei social
Contatti e newsletter

I contatti da WhatsApp e Messenger finiscono in uno store condiviso per broadcast approvati. Le newsletter settimanali prendono prodotti dal catalogo, generano copy multilingua con Gemini, aspettano l’approvazione su Telegram tramite il bot BD2M Automatron e su Notion, poi partono dalle liste MailPoet in italiano, inglese e tedesco.

Lead

Una pipeline separata trova contatti B2B e HORECA, li valuta e prepara sequenze di follow-up. L’invio è disattivato di default, finché qualcuno non rivede.

Esito

La bottega può ora ricevere ordini online come ha sempre preso quelli di persona — a mano, a prezzi onesti. I clienti sanno che non pagheranno finché il pezzo non è tagliato. La bottega ha un’azione chiara per ogni passo: confermare, rifiutare, mettere in attesa, spedire, posticipare.

Pubblicazioni, social, newsletter e lead girano da Telegram attraverso n8n, revisionati prima che qualcosa vada online. Una persona, o due, possono mandare avanti tutta l’operazione — vendite, marketing, comunicazione con i clienti — senza affogare nell’amministrazione.

5

Paesi — Reach geografico: IT, DE, SE, DK, FR

+80%

Incremento ordini

~88%

Tasso di evasione — 14 consegnati/completati su 16 ordini operativi (esclusi 2 preventivi rifiutati); 1 in posticipo, 1 annullato

Vuoi saperne di più?

Richiedi il case study completo o i file di lavoro per scoprire come porto valore straordinario. Vivi l'impatto in prima persona!

Altri case study

Concept Ticketmaster
TICKETMASTER

Un concept per trovare lo spettacolo e scegliere il posto

BD2M Digital Enablement ecommerce
BD2M Digital Enablement

E-commerce, comunicazione e gestione operativa

pronto-nts
PRONTO NTS

Costruzione della UX da zero all’interno della principale piattaforma ERP australiana

mint
MINT

Automazione degli Ad-Ops attraverso un approccio progettuale integrato

generali
GENERALI

Costruire l’eccellenza di progettazione in-house con soluzioni scalabili ed efficienti

Mostra altri
mint
MINT

Automazione degli Ad-Ops attraverso un approccio progettuale integrato

generali
GENERALI

Costruire l’eccellenza di progettazione in-house con soluzioni scalabili ed efficienti

pronto
PRONTO

Standardizzazione e aumento della qualità dell'interfaccia web di Pronto

banco
BANCO BPPM

Un framework come plug-in progettuale per le piattaforme web

accenture
ACCENTURE

Migliorare la gestione del design dell'interazione: una prospettiva personale

hmi-manufacturing
HMI PER LA PRODUZIONE

Interfacce industriali incentrate sull’operatore, tra efficienza e conformità

intesa
INTESA SAN PAOLO

Una nuova esperienza di concessione del credito

polestar-hmi
POLESTAR HMI

Sicurezza e umanità nell’interfaccia, con un motore DesignOps

job-card
PEDDERS

Un'esperienza rinnovata per le schede di lavoro elettroniche

lorraine
LORRAINE LEA

Soluzione e-business su misura: siti B2C e B2B, CRM e portale vendite

pronto-suite
PRONTO SUITE

Trasformazione dell' App Suite di Pronto

Chiedi all'AI di Carmelo

👋 Ciao! Sono l'assistente AI di Carmelo. Sono stato addestrato sul suo portfolio, case study e competenze in design e trasformazione digitale. Chiedimi pure qualsiasi cosa riguardo il suo lavoro, il suo processo di design o la sua carriera!

Questo modello AI è in versione beta e potrebbe non essere sempre accurato.