Case study · E-commerce · Frantoio
Casa Aurelia
Sull'etichetta di un olio si può scrivere quasi tutto. Casa Aurelia è il concept di un frantoio che fa il contrario: pubblica il numero di lotto, e chiunque può cercarlo sul sito e vedere l'oliveto, il giorno della raccolta, le ore passate fino alla frangitura e le analisi di quella partita.
- Progetto
- Casa Aureliabrand concept, progetto dimostrativo
- Settore
- Frantoio e olivetoValle d'Itria, due monocultivar
- Tipo
- E-commercelistino, schede, lotto, visite, ordini
- Cosa abbiamo fatto
- Concept, testi, design, illustrazioni, sviluppostile caldo, da masseria
- Tecnologie
- HTML, CSS e JavaScript puriun solo file, illustrazioni SVG
Il punto di partenza
Un olio che si può verificare
«Prodotto in Italia» può voler dire imbottigliato in Italia. «Estratto a freddo» è un limite di temperatura, non una garanzia. La data sulla bottiglia è quella di scadenza, non quella della raccolta, e per un olio è la seconda che conta. In un settore in cui nessuno crede più a nessuno, l'unico modo per farsi credere è pubblicare i dati.
Casa Aurelia parte da lì: un frantoio con due cultivar mai mescolate, la frangitura entro sei ore e un numero di lotto su ogni bottiglia. Il sito ha il listino, le schede con le analisi, le visite, gli ordini senza pagamento immediato, e al centro la pagina che cerca il lotto.
01
Il lotto prima del prezzo
Chi ha una bottiglia in mano deve poter scrivere il codice e vedere tutto: oliveto, ore, analisi. È la prova che regge il resto.
02
Due oli, spiegati bene
Coratina e Ogliarola con carattere, cucina e numeri. Chi non sa da dove partire trova tre situazioni e un consiglio ciascuna.
03
Ordinare senza fretta
Una richiesta d'ordine con il riepilogo via mail, non un carrello: imbottigliano dopo che hai ordinato, e lo dicono.
Cosa abbiamo costruito
Il lotto, gli oli, il frantoio
Nove pagine in un solo file: home, gli oli, tre schede, il frantoio, il lotto, le visite, gli ordini.
01
L'apertura che promette un numero
Un titolo in un serif caldo, con l'ultima riga in corsivo: sappiamo da quale albero viene, e lo scriviamo. Due tasti: ordina l'olio nuovo, cerca il tuo lotto. Sotto, l'oliveto al tramonto e i quattro numeri che contano.
Poi il problema, raccontato senza giri: cosa vuol dire davvero quello che c'è sull'etichetta.
02
Due cultivar, mai mescolate
Coratina è il carattere, Ogliarola la gentilezza, l'olio nuovo non filtrato arriva a novembre e finisce a gennaio. Tre bottiglie fotografate nelle nicchie di pietra, o disegnate quando la foto non c'è.
«Se non sai da dove partire»: se cucini molto la lattina, se ami i sapori forti la Coratina, se è un regalo il duo in cassetta.
03
La ricerca del lotto
Scrivi il codice stampato sul retro della bottiglia e compare la scheda: cultivar, contrada e altitudine, filari e piante, raccolta con gli orari, ingresso in frantoio, frangitura, le ore in mezzo, imbottigliamento, bottiglie del lotto.
In fondo le tre analisi di quella partita, con accanto i limiti di legge. Se il codice non esiste, una spiegazione gentile.
04
Le schede e il frantoio
Ogni olio ha la sua pagina: il carattere, la cucina, la scheda tecnica con cultivar, oliveto, raccolta, invaiatura, estrazione, acidità, polifenoli e perossidi. E il tasto per verificare il lotto.
Il frantoio racconta il ciclo in sei passaggi, dall'albero alla bottiglia senza uscire dall'azienda, e le tre generazioni.
05
Le visite e gli ordini
Da ottobre a dicembre il frantoio lavora e si può entrare: tre esperienze con durata e prezzo, e un modulo che si salda in azienda. La pagina ordini ha il listino con lattine e cassette, e una richiesta d'ordine: nessun addebito adesso, il riepilogo arriva via mail.
Ristoranti e regali aziendali hanno una riga a parte.
Da telefono la ricerca del lotto è la pagina più usata: chi ha la bottiglia in mano scrive il codice e legge la scheda.
Come è fatto
Sotto il cofano: i dati di un lotto
Sei meccanismi scritti a mano, uno alla volta. Dalla ricerca del lotto alle illustrazioni.
- HTML
- CSS
- JavaScript puro
- Router a hash
- SVG inline
- Nessun tracker
- Cultivar
- Coratina 100%
- Oliveto
- Contrada Lamie · 240 m
- Raccolta
- 18 ottobre 2025, 7:10–13:40
- Frangitura
- 18 ottobre 2025, ore 18:20
- Raccolta → frangitura
- 4 ore e 40 minuti
codice normalizzato · scheda in 520 ms · errore gentile
La ricerca del lotto
Cosa vedi. Scrivi il codice, anche in minuscolo o con gli spazi, e la scheda compare salendo di poco. Un codice sbagliato dà una spiegazione, non un errore.
Come è fatto. Il codice viene ripulito: spazi tolti, tutto in maiuscolo. Poi si cerca in una tabella dei lotti e la scheda viene costruita riga per riga dai dati: cultivar, oliveto, orari, analisi. L'animazione di comparsa viene riavviata a ogni ricerca forzando un ricalcolo del layout. I tre lotti di esempio sono cliccabili e riempiono il campo.
i valori del lotto, non la media: contro i limiti di legge
Le analisi contro i limiti di legge
Cosa vedi. Acidità 0,16% con il limite a 0,80. Perossidi 5,8 con il limite a 20. Polifenoli 648 con la soglia per il claim a 250. I numeri salgono e le barre si riempiono.
Come è fatto. Ogni analisi è un valore del lotto, non la media aziendale, mostrato con il limite accanto: così chi legge capisce quanto margine c'è. Nella demo le barre sono in scala sul limite; nel sito i tre riquadri stanno in fondo alla scheda del lotto con il limite scritto in piccolo.
fa salire l'acidità
sei ore, non sei giorni: la linea del tempo di un lotto
Sei ore, non sei giorni
Cosa vedi. La linea del tempo di un lotto: raccolta alle 7:10, ingresso in frantoio alle 14:05, frangitura alle 18:20. Il contatore delle ore si ferma a quattro ore e quaranta.
Come è fatto. Per ogni lotto la tabella registra gli orari di raccolta, ingresso e frangitura e le ore trascorse. La scheda le mette in fila, con il tempo totale in grassetto, perché è la promessa del frantoio: ogni ora in cassetta fa salire l'acidità e abbassa i polifenoli.
Le illustrazioni disegnate in SVG
Cosa vedi. Dove la foto manca c'è un disegno: cielo a gradiente, sole, colline, olivi. Leggero e sempre nitido.
Come è fatto. Le illustrazioni sono simboli SVG definiti una volta in cima al file, con due gradienti condivisi, cielo e olio, e richiamati con use dove servono. Non pesano quasi niente, si adattano a ogni misura e hanno lo stesso colore dei testi. Le foto vere, quando arrivano, le sostituiscono senza toccare il layout.
richiesta, non checkout: il riepilogo arriva via mail
La richiesta d'ordine senza pagamento
Cosa vedi. Compili e invii: se manca un campo obbligatorio, una nota rossa e il cursore va lì. Se è tutto a posto, la conferma in verde: il riepilogo arriva via mail.
Come è fatto. Un solo gestore per i due moduli, ordini e visite: controlla i campi richiesti uno per uno, ferma il primo vuoto e lo mette a fuoco, altrimenti mostra il messaggio e svuota il modulo. Niente carrello: il frantoio imbottiglia dopo l'ordine e vuole confermare a mano.
Amaro e piccante decisi, carciofo e mandorla verde. Su legumi, carne, verdure amare.
nove pagine in un file · ogni olio ha il suo indirizzo
Nove pagine in un file, ogni olio con il suo indirizzo
Cosa vedi. Clicchi una scheda e l'indirizzo cambia, la pagina compare con una dissolvenza, il titolo della scheda del browser si aggiorna.
Come è fatto. Tutte le pagine sono nello stesso HTML; un router legge la parte dopo il cancelletto e attiva quella giusta, aggiornando titolo e voce corrente nel menu. Coratina, Ogliarola, olio nuovo e la ricerca del lotto hanno un indirizzo ciascuna: si possono condividere e mettere sull'etichetta.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni produttore che vende online
Frantoi, cantine, caseifici, apicoltori: se vendi qualcosa che gli altri promettono, dimostralo.
01
Pubblica il dato, non l'aggettivo
Un numero di lotto cercabile vale più di «estratto a freddo». Chi può verificare, crede.
02
Metti i limiti accanto ai valori
Acidità 0,16 non dice niente da sola; con il limite a 0,80 accanto dice tutto.
03
Racconta il tempo
Le ore tra raccolta e frangitura sono la differenza che si sente. Se le misuri, mostrale.
04
Ordina senza carrello, se serve
Per un prodotto che si imbottiglia su ordine, una richiesta con riepilogo via mail è più onesta di un checkout.
05
Disegna dove non hai foto
Un'illustrazione coerente è meglio di una foto d'archivio. E si sostituisce quando la foto arriva.
Il prossimo potrebbe essere il tuo
Vuoi un sito che dimostri quello che prometti?
Frantoi, cantine, caseifici, produttori: se il tuo prodotto ha dei numeri che gli altri non pubblicano, costruiamo il sito intorno a quelli. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti