Case study · Sito one-page · Benessere per cani
BauWow
Un integratore per cani è un prodotto invisibile: il cane non può dirti come sta. Il sito doveva farsi guardare, spiegare quattro formule a colpo d'occhio e far scegliere senza sensi di colpa.
- Progetto
- BauWowbrand concept
- Settore
- Pet careintegratori in abbonamento
- Tipo
- Sito one-pagecon test e listino
- Cosa abbiamo fatto
- Brand, design, sviluppoimmagini e mascotte comprese
- Tecnologie
- HTML · CSS · JS purozero dipendenze
Il punto di partenza
Un prodotto che non si vede, per un cliente che non parla
Gli integratori per cani si somigliano tutti: barattoli bianchi, promesse vaghe, foto di stock. E chi compra non può chiedere al cane se funzionano. Il sito doveva fare tre cose in ordine: farsi guardare, rendere le quattro formule distinguibili in un secondo, e portare a una scelta che non sembri un azzardo.
Il modello è l'abbonamento mensile: una, due o tutte le formule. Serviva un modo per far scegliere la formula giusta senza un catalogo da studiare. La risposta è un test in sei domande che finisce con un consiglio, non con una vendita.
01
Attenzione
Un cucciolo che segue il cursore vale più di uno slogan: chi arriva si ferma a giocare, e intanto legge.
02
Chiarezza
Quattro formule, quattro colori, un solo barattolo. Si distinguono prima ancora di leggere il nome.
03
Il test
Un'unica azione, ripetuta ovunque: sei domande, tre minuti, e il sito ti dice cosa serve al tuo cane.
Cosa abbiamo costruito
Un personaggio, quattro colori, una sola azione
Otto blocchi a tutta larghezza che si alternano di colore. Ogni blocco ha un compito e un tasto solo.
01
Biscotto ti guarda
Il cucciolo in apertura non è una foto: segue il cursore con la testa, si inclina, e quando lo lasci torna a guardarti. Sta davanti al titolo, non dietro, perché è lui il messaggio.
Sotto, una promessa sola: quattro formule, una routine, un cane che si sveglia meglio. E il tasto del test.
02
Il problema prima del prodotto
«Il tuo cane non sa dirti come sta.» Prima di parlare di barattoli, il sito dà un nome al dubbio di chi legge: manto opaco, notti agitate, digestione. Tre numeri grandi, in tre colori, lo rendono concreto.
È il blocco che fa sentire capito chi arriva, e che rende la formula giusta una conseguenza, non una vendita.
03
Quattro barattoli, un solo barattolo
Le quattro formule sono lo stesso barattolo fotografato una volta e ricolorato in codice, con l'etichetta stampata sopra con i font del brand. Così sembrano una linea vera, non quattro prodotti diversi.
Ogni formula ha il suo colore, e quel colore torna nel test, nel listino e nelle storie.
04
Il listino a tre colonne
Una formula, due, tutte. La colonna centrale è quella consigliata, con il badge storto «Più scelto» e il risparmio scritto in chiaro. Sospendi o annulla in un clic, detto prima che lo chiedano.
Il prezzo non è nascosto dietro il test: chi vuole solo comprare può farlo.
05
Il test che sceglie per te
Sei domande in una finestra sopra la pagina: nome, età, peso, manto, movimento, notti e digestione. Ogni risposta pesa su una o più formule; alla fine il sito consiglia quelle che servono, con la dose calcolata sul peso.
Se non emerge niente, lo dice: «sta benissimo». Un test onesto vende più di un test che trova sempre un problema.
Da telefono Biscotto segue il dito, i barattoli si allineano uno sotto l'altro e il test occupa tutto lo schermo.
Come è fatto
Sotto il cofano: uno sprite, un poster e zero dipendenze
Sei effetti, uno alla volta. Tutto in HTML, CSS e JavaScript scritti a mano.
- HTML
- CSS
- JavaScript
- Canvas 2D
- Sprite WebP con alpha
- <dialog>
- IntersectionObserver
- Python per le immagini
48 pose ordinate per rotazione della testa
Biscotto segue il cursore
Cosa vedi. Muovi il mouse e il cucciolo gira la testa verso di te. Lo lasci, e dopo un attimo torna a guardarti.
Come è fatto. Un video di 10 secondi è diventato 48 pose, riordinate per rotazione della testa: la X del cursore sceglie la posa, non il tempo. Una molla smorzata rende il movimento morbido, tra una posa e l'altra c'è una dissolvenza che toglie lo scatto.
Il cane compare subito
Cosa vedi. Biscotto c'è dal primo istante, anche con la rete lenta. Non un'attesa, non un caricamento.
Come è fatto. Lo sprite pesa 560 KB. Prima arriva un poster da 21 KB con la sola posa a riposo, nella stessa inquadratura. Quando lo sprite è pronto il canvas disegna lo stesso fotogramma e il poster sparisce: lo scambio è identico al pixel.
Una foto, quattro etichette
x → asin(x) · luminanza × tintaUn barattolo, quattro etichette
Cosa vedi. Quattro formule che sembrano una linea vera: stessa forma, stessa luce, etichette diverse.
Come è fatto. Una sola fotografia con la fascia vuota. Il colore viene rimappato sulla luminanza dell'originale, così grana e luce restano. La grafica è stampata in codice con proiezione cilindrica: la x torna a posizione sull'arco con asin, e il testo si comprime ai bordi.
Il test in sei domande
Cosa vedi. Una finestra sopra la pagina, sei domande, un consiglio con dose e prezzo. Esc per chiudere, sempre.
Come è fatto. È un <dialog> nativo: focus e chiusura li gestisce il browser. Ogni risposta pesa su una o più formule; sopra la soglia la formula entra nel risultato, sotto resta un segnale debole. Nessun segnale? «Sta benissimo».
Le sezioni entrano a onda
Cosa vedi. Scorrendo, le schede salgono una dopo l'altra. In fondo, il nastro con «Veterinari, Made in Italy» non si ferma mai.
Come è fatto. Gli elementi partono visibili: la classe che li nasconde la aggiunge lo script solo se può osservarli. Uno script rotto non lascia mai la pagina bianca. Il nastro duplica la fila e scorre a velocità costante, non a durata fissa.
Omega 3-6, biotina, zinco.
bordo 3px · ombra 7px 7px 0 · retino · badge
La grammatica pop, in CSS
Cosa vedi. Bordi neri spessi, ombre dure, retini a mezzatinta, badge storti. Nessuna sfocatura, nessun gradiente morbido.
Come è fatto. Un sistema di regole: bordo 3px su tutto, ombra 7px 7px 0 al posto del blur, retino come unica texture, badge ruotati. Un tema solo, dichiarato colore per colore: la pagina tiene su qualsiasi sfondo la ospiti.
Cosa puoi portare nel tuo sito
Cinque cose che valgono anche senza cani
Un brand concept, ma le decisioni sono quelle di un sito che deve vendere in abbonamento.
01
Un personaggio batte uno slogan
Chi arriva si ferma a giocare con Biscotto e intanto legge. Se hai una mascotte, un prodotto o una persona, mettila in primo piano e falla reagire.
02
Colora le differenze
Quattro formule, quattro colori, e quel colore torna ovunque. Il visitatore impara la tua gamma senza studiarla.
03
Fai scegliere con un test, non con un catalogo
Sei domande tolgono la paura di sbagliare. E un test che sa dire «non ti serve niente» rende credibile quello che consiglia.
04
Il prezzo con una colonna consigliata
Tre opzioni, quella centrale segnata «Più scelto» con il risparmio in chiaro. La scelta diventa facile prima di essere conveniente.
05
Le prestazioni sono design
Un poster da 21 KB prima di uno sprite da 560 KB, sezioni che restano visibili anche senza script. Un sito che non fa mai aspettare vende più di uno che stupisce dopo tre secondi.
Il prossimo potrebbe essere il tuo
Vuoi un sito con un carattere così?
Non serve un cucciolo. Serve un prodotto, un'idea di chi lo compra e la voglia di farlo notare. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti