Case study · E-commerce · Torrefazione
Cardo
Una torrefazione specialty ha un problema che il sito può risolvere: la gente compra il caffè sbagliato per la caffettiera che ha. Cardo parte da lì: prima ti chiede come lo fai, poi ti consiglia, e se la combinazione non funziona te lo scrive in arancione invece di venderti il sacchetto più caro.
- Progetto
- Cardobrand concept, progetto dimostrativo
- Settore
- Torrefazione di caffè specialtyNapoli, cinque caffè in listino
- Tipo
- E-commercelistino, schede, abbonamento, selettore
- Cosa abbiamo fatto
- Concept, testi, design, sviluppostile stampa risografica
- Tecnologie
- HTML, CSS e JavaScript puriun solo file, niente framework
Il punto di partenza
Un negozio che dice di no
Tutte le torrefazioni ti chiedono che gusto vuoi. Nessuna ti chiede la cosa che conta: con che cosa lo prepari a casa. Un etiope tostato chiaro nella moka esce aspro, e il cliente pensa di aver sbagliato lui. Il sacchetto dice «fragola e lampone» e ti augura buona fortuna.
Cardo è il concept di una torrefazione che parte dal metodo: un listino corto di cinque caffè, una tabella che dice cosa va con cosa, le ricette in grammi, gradi e secondi, un abbonamento che si gestisce da una mail. E al centro un selettore in tre domande che ti consiglia il caffè, ti spiega perché e, quando serve, ti dice che con la tua combinazione il fruttato non ci arriva.
01
Vendere il caffè giusto, non il più caro
Il selettore consiglia in base a metodo, gusto e modo di berlo. Se il cliente sceglie cappuccino e filtro, gli dice di prendere il Vesuvio e risparmiare sei euro.
02
Pochi caffè, tutto scritto
Cinque schede con origine, tostatura, prezzo al produttore e i sei metodi con i pallini. Una tabella sola per tutto il listino.
03
Un sito che pesa niente
Un file HTML, nessun framework, nessun tracker. Le pagine cambiano senza ricaricare e il tutto sembra stampato in due colori.
Cosa abbiamo costruito
Cinque caffè, sei metodi, tre domande
Otto pagine in un solo file: home, i caffè, le schede, le ricette, la torrefazione, l'abbonamento, il selettore, i contatti.
01
L'apertura che ti chiede come lo fai
Un titolo in arancione con l'ombra fuori registro, come una stampa riso. Sotto, la tesi: se hai la moka, metà dei caffè specialty ti verranno male, e non è colpa tua. Il nastro arancione scorre con i sei metodi.
Poi la tostatrice, i quattro numeri che contano e il problema raccontato da chi sta al banco.
02
Il listino e la tabella
Cinque caffè, niente di più. Ogni scheda ha l'origine, cinque quadratini per la tostatura, le note e il prezzo; i sacchetti sono foto o illustrazioni a retino. In alto, prima del prezzo, c'è scritto se in moka funziona.
Sotto, la tabella «cosa va con cosa»: cinque caffè per sei metodi, con i pallini e le celle arancioni.
03
Il selettore che dice la verità
Con che cosa lo fai, che gusto ti piace, come lo bevi, ti serve senza caffeina. Ogni risposta aggiorna il risultato a destra: il caffè, il perché in due righe, la ricetta esatta per il tuo metodo.
Se hai scelto moka e fruttato, un riquadro arancione ti dice che non ci arriva e ti propone il più aromatico tra quelli che in moka funzionano.
04
La scheda con i sei metodi
Ogni caffè ha la sua pagina: note, tostatura, prezzo, il tasto per metterlo in abbonamento e «va bene per me?». Sotto, i sei metodi con i pallini e una riga di giudizio, e la scheda tecnica con altitudine, varietà e prezzo pagato al produttore.
Le ricette hanno una pagina a parte: sei metodi, numeri veri, e le tre cose da sistemare prima di tutto.
05
L'abbonamento e la torrefazione
Tre piani con il prezzo chiaro e la spedizione inclusa; si salta, si sposta e si annulla da una mail. Le domande frequenti dicono anche che il macinato perde gli aromi in una settimana, e che conviene prenderlo in grani.
La pagina della torrefazione racconta i quaranta metri quadri, i tre che ci lavorano e come si lavora. I contatti chiudono con un modulo che chiede con che cosa fai il caffè.
Da telefono il selettore sta in una colonna e il risultato compare sotto le domande: è la pagina più usata.
Come è fatto
Sotto il cofano: un file solo
Sei meccanismi scritti a mano in JavaScript puro, uno alla volta. Dal selettore allo stile riso.
- HTML
- CSS
- JavaScript puro
- Router a hash
- IntersectionObserver
- Nessun tracker
Con che cosa lo fai?
Mokala caffettieraCuccumellala napoletanaV60a gocciaChe gusto ti piace?
ClassicocioccolatoEquilibratoagrumeFruttatoacido, florealeacqua 70 °C · 3–4 minuti
punteggio: metodo ×3, gusto ×2, modo ×1 · e l'avviso onesto
Il selettore che consiglia e dice di no
Cosa vedi. Scegli metodo, gusto e modo di berlo: il caffè a destra cambia subito, con il perché e la ricetta. Se la combinazione non funziona, un riquadro arancione te lo dice.
Come è fatto. Ogni caffè ha tre tabelle di punteggi: per metodo, per gusto e per modo di berlo, da zero a tre. A ogni scelta si calcola un punteggio, metodo per tre più gusto per due più modo, e vince il più alto tra quelli ammessi. Gli avvisi sono regole esplicite: fruttato con un metodo a pressione, latte con un caffè delicato. La ricetta è quella del metodo scelto.
| Caffè | Moka | Cuccumella | Espresso | V60 | Aeropress | French |
|---|---|---|---|---|---|---|
| Vesuvio | ||||||
| Sanità | ||||||
| Kayanza | ||||||
| Chelbesa | ||||||
| Sierra |
tre pallini: il suo metodo · zero: lascia perdere
La tabella generata dai dati
Cosa vedi. Cinque caffè per sei metodi: tre pallini pieni è il suo metodo, cella arancione; zero è lascia perdere, cella grigia.
Come è fatto. Non è scritta a mano: viene costruita dagli stessi punteggi del selettore. Così tabella, schede e consigli non possono contraddirsi. Ogni cella ha anche un testo per chi usa un lettore di schermo: «il suo metodo», «si può fare», «lascia perdere».
come lo fai.
niente di più.
un solo HTML · le pagine cambiano con l'hash
Otto pagine in un file, senza ricaricare
Cosa vedi. Clicchi «I caffè» o una scheda: la pagina cambia in un attimo, l'indirizzo si aggiorna, il tasto giusto nel menu si accende.
Come è fatto. Tutte le pagine sono nello stesso HTML e solo una è attiva. Un piccolo router legge la parte dopo il cancelletto nell'indirizzo, mostra la pagina giusta con una dissolvenza di 420 millisecondi, cambia il titolo della scheda e segna la voce corrente nel menu. Le schede dei caffè hanno un indirizzo ciascuna: si possono condividere.
partono quando entrano nello schermo, veloci e poi frenano
I numeri che salgono e frenano
Cosa vedi. Cinque, sei, nove, 2019: quando i quattro numeri entrano nello schermo partono da zero e si fermano sul valore, veloci all'inizio e piano alla fine.
Come è fatto. Un'animazione a fotogrammi di 1,3 secondi con una curva cubica in uscita: il valore cresce come uno meno il cubo del tempo rimasto. I numeri sono formattati all'italiana, con il punto delle migliaia. Se il sistema chiede meno movimento, compaiono già finiti.
come lo fai.
fuori registro · retino · multiply · il tasto che si preme
Lo stile della stampa risografica
Cosa vedi. Titoli con l'ombra fuori registro, retini di puntini, colori che si sovrappongono come inchiostri, tasti che si premono davvero.
Come è fatto. Quattro inchiostri: carta, nero, arancione, blu. I titoli hanno un'ombra piena spostata di qualche pixel; le illustrazioni usano un retino fatto con un gradiente radiale ripetuto e si moltiplicano sul fondo con mix-blend-mode. I tasti hanno un'ombra dura che al passaggio si accorcia mentre il tasto si sposta, come se lo premessi.
La barra, la barra del menu e le comparse
Cosa vedi. Scorrendo, una riga arancione in alto segna quanto manca, il menu si abbassa, e i blocchi compaiono salendo di poco uno dopo l'altro.
Come è fatto. Un solo ascoltatore di scroll, limitato a un fotogramma per volta, aggiorna la larghezza della barra e la classe del menu. I blocchi hanno una classe di comparsa gestita da un osservatore di intersezione, con una scansione di sicurezza per quelli già in vista al cambio pagina. I contatori partono nello stesso momento.
Cosa puoi portare nel tuo sito
Cinque cose che valgono per ogni negozio online
Torrefazioni, cantine, botteghe, artigiani: se vendi cose che vanno scelte bene, il sito deve aiutare a scegliere.
01
Parti dalla domanda giusta
Non «che gusto vuoi» ma «con che cosa lo fai». La domanda che nessuno fa è quella che fa vendere il prodotto giusto.
02
Di' di no, per iscritto
Un avviso onesto costa una vendita oggi e ne porta dieci dopo. Chi si sente consigliato torna.
03
Una fonte dati per tutto
Tabella, schede e consigli escono dagli stessi numeri: non possono contraddirsi, e aggiornarli è un lavoro solo.
04
Pochi prodotti, tutto scritto
Cinque caffè con ricette e prezzo al produttore battono trenta caffè con tre aggettivi.
05
Leggero è una scelta
Un file, nessun framework, nessun tracker: apre in un attimo anche in negozio, sul telefono del cliente.
Il prossimo potrebbe essere il tuo
Vuoi un negozio che aiuti a scegliere?
Torrefazioni, cantine, botteghe, artigiani: se il tuo negozio online vende ma non consiglia, ripartiamo dalla domanda giusta. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti