Come Onyx Coffee Lab crea 3D interattivo per l’e-commerce

Il caffè è un’esperienza sensoriale. Lo shopping online no.

Per Onyx Coffee Lab, la presenza online dipendeva dalla capacità di colmare questa distanza.

In una categoria affollata, in cui i chicchi di caffè sembrano tutti uguali e le differenze tra i prodotti stanno nell’aroma, nel gusto e nella consistenza, raccontare una storia solo con le parole ti porta fino a un certo punto.

Onyx aveva bisogno di un’esperienza digitale capace di trasmettere la stessa ossessione per il mestiere che mette nella tostatura, senza penalizzare prestazioni e conversioni.

Così ha spinto più in là il limite: 3D interattivo sul web, costruito con Spline e realizzato da un piccolo team.

Esperienza 3D guidata dallo scroll per il calendario dell’Avvento 2025 di Onyx Coffee Lab

Differenziare il brand senza i sensi

Il branding del caffè online è notoriamente difficile:

• La maggior parte dei prodotti è visivamente simile. Una tostatura chiara accanto a una scura sembra sempre caffè in chicchi.

• Vendi cibo senza odore né sapore. Non c’è alcun riscontro sensoriale.

• Il mercato è saturo. “Un ottimo caffè” non è più un elemento distintivo.

Il sito di Onyx doveva fare più che essere bello. Doveva comunicare in fretta. Altrimenti il suo pubblico avrebbe perso rapidamente interesse e se ne sarebbe andato.

Trasformare la cura artigianale in un segnale visibile del brand

Michael Mahler, CTO di Onyx Coffee Lab, ha descritto i due pilastri che definiscono il brand:

1. Il caffè più fresco possibile Il caffè viene tostato su ordinazione e spedito rapidamente. Spesso passano 24-48 ore dalla tostatrice alla porta di casa.
2. Un approvvigionamento etico che cambia gli incentivi Onyx paga i produttori 4-6 volte il prezzo di mercato della materia prima e costruisce relazioni di lungo periodo che creano un circolo virtuoso fondamentale: i produttori vogliono vendere a Onyx i loro lotti migliori e le comunità ne traggono beneficio.

Lo stesso approccio si ritrova nella sua esperienza web.

Il nostro slogan è ‘Mai accontentarsi del sufficiente’. Ci chiediamo sempre cosa possiamo fare per migliorare, e questa mentalità non si ferma mai.

La pagina di prodotto di Circadian di Onyx Coffee Lab con una scena 3D interattiva

Progettare per i prosumer

Onyx non progetta per tutti. Progetta per le persone che tengono ai dettagli.

Michael li chiama prosumer: clienti che si accorgono quando un brand trascura le piccole cose e che si aspettano esperienze digitali coerenti, all’altezza della qualità del prodotto.

Questo ha dato forma a un approccio di design preciso: il sito deve essere immediatamente comprensibile, ma deve anche spingersi fino al limite di ciò che è “normale” per l’e-commerce.

Onyx ha trovato quel margine di differenziazione in un unico punto: il design 3D con Spline.

Volevamo trovare quel limite e restarci il più vicino possibile… e quel limite era l’animazione 3D.

Un sito Shopify che sfrutta il runtime di Spline

Onyx usa Shopify, ma l’esperienza del suo negozio è un frontend completamente personalizzato, che spinge Shopify al limite.

Invece di esportare modelli o affidarsi a un’integrazione dedicata, Onyx incorpora Spline con Spline Viewer e usa la Code API di Spline per controllare le scene in modo programmatico.

Così può costruire momenti interattivi che si comportano come funzionalità del prodotto, non semplici immagini statiche.

Dagli storyboard alle interazioni in Spline

Il flusso di produzione 3D di Onyx è pensato per velocità, allineamento ed efficienza:

1. Render di prodotto di alta qualità Spesso consegnati al design come PNG scontornati.
2. Storyboard Il team di design definisce i “keyframe” del movimento: cosa si muove, quando e perché.
3. Animazione in Spline Il team ricrea gli storyboard come vere scene interattive.
4. Passaggio agli sviluppatori Gli embed di Spline arrivano sul sito, controllati dalla logica del runtime.

Usare il 3D per spiegare ciò che i clienti non si aspettano

Circadian non è la classica pagina di prodotto di un caffè.

Invece dei soliti descrittori come ‘tostatura chiara o scura’ o ‘note di degustazione’, Circadian propone varianti basate sul livello di caffeina e include un calcolatore per aiutare i clienti a distribuire l’assunzione nel corso della giornata.

Onyx usa le immagini 3D come sistema esplicativo per trasmettere queste informazioni e renderle più coinvolgenti:

• Lo sfondo introduce visivamente il concetto
• La scena risponde all’interazione
• Cliccando sulle diverse varianti si attivano movimenti diversi nella scena Spline

“Per noi le diverse varianti indicano letteralmente quanta caffeina c’è nel prodotto. L’elemento sullo sfondo si muove a seconda dell’esperienza che si sta guardando.”

E, aspetto cruciale, il team di Onyx ha impostato i suoi elementi interattivi in modo che restino in disparte quando serve o passino in primo piano quando serve. Ad esempio, quando un testo importante attraversa la pagina, l’illuminazione degli elementi 3D incorporati si abbassa.

Il vantaggio più grande: i tempi di rilascio

Per Onyx il vantaggio principale non è solo la qualità visiva, ma la fattibilità e la velocità per il suo team.

Sono circa 10 le persone che lavorano sul codice e sulla parte creativa del sito. Assumere ingegneri e designer 3D dedicati è un impegno e una spesa importanti per un’azienda di caffè.

Spline riduce il rischio comprimendo le tempistiche e rendendo il 3D accessibile a tutti.

Il vantaggio più grande sono i tempi di rilascio… Spline riduce il rischio di iniziare a fare alcune di queste cose in 3D.

Inizia con Spline

Onyx Coffee Lab non ha adottato il 3D per fare scena. Lo ha usato per risolvere un vero problema dell’e-commerce:

Come rendere reale online un prodotto sensoriale senza sacrificare velocità, chiarezza o conversioni?

Con Spline ha trovato un flusso di lavoro adatto a un piccolo team, che funziona in modo fluido su mobile e permette di pubblicare rapidamente racconti interattivi, aiutandolo a distinguere il brand in un mercato affollato.

Contatta le vendite