Hoe Onyx Coffee Lab interactieve 3D maakt voor e-commerce

Koffie is een zintuiglijke ervaring. Online winkelen niet.

Voor Onyx Coffee Lab hing hun online aanwezigheid af van hoe ze die kloof konden overbruggen.

In een drukke categorie waarin koffiebonen er hetzelfde uitzien en productverschillen zitten in aroma, smaak en textuur, kom je met alleen woorden niet ver.

Onyx had een digitale ervaring nodig die dezelfde obsessie voor vakmanschap uitstraalt als het branden van hun koffie, zonder de prestaties of conversie te vertragen.

Dus verlegden ze de grens: interactieve 3D op het web, gebouwd met Spline en opgeleverd door een klein team.

3D-ervaring die op scrollen reageert, voor de adventskalender 2025 van Onyx Coffee Lab

Merkonderscheid zonder de zintuigen

Een koffiemerk neerzetten is online berucht lastig:

• De meeste producten lijken visueel op elkaar. Lichtgebrande bonen naast donkergebrande bonen zien er nog steeds uit als koffiebonen.

• Je verkoopt eten zonder geur of smaak. Er is geen zintuiglijke terugkoppeling.

• De markt is verzadigd. ‘Geweldige koffie’ onderscheidt je niet meer.

De site van Onyx moest meer doen dan er goed uitzien. Hij moest snel communiceren. Anders zou hun doelgroep snel de interesse verliezen en weggaan.

Vakmanschap omzetten in een zichtbaar merksignaal

Michael Mahler, CTO bij Onyx Coffee Lab, beschreef twee pijlers die het merk bepalen:

1. Zo vers mogelijke koffie Koffie wordt op bestelling gebrand en snel verzonden. Vaak zit er 24-48 uur tussen de brander en de voordeur.
2. Ethische inkoop die de prikkels verandert Onyx betaalt producenten 4-6x de marktprijs voor grondstoffen en bouwt langdurige relaties op die een essentiële wisselwerking creëren: producenten willen hun beste partijen aan Onyx verkopen, en hun gemeenschappen profiteren ervan.

Diezelfde mentaliteit zie je terug in hun webervaring.

Onze slogan is ‘Never settle for good enough.’ Het is altijd: wat kunnen we verbeteren? En die mentaliteit stopt nooit.

De productpagina van Circadian van Onyx Coffee Lab, met een interactieve 3D-scène

Ontwerpen voor prosumers

Onyx ontwerpt niet voor iedereen. Ze ontwerpen voor mensen die om details geven.

Michael noemt ze prosumers: klanten die merken wanneer een merk beknibbelt op de kleine dingen, en die verwachten dat een samenhangende digitale ervaring de productkwaliteit weerspiegelt.

Dat leidde tot een bewuste designaanpak: de site moet direct te begrijpen zijn, maar ook precies op de grens zitten van wat ‘normaal’ is in e-commerce.

Onyx vond dat onderscheidende randje op één plek: 3D-design met Spline.

We wilden die grens opzoeken en er zo dicht mogelijk langs gaan… en die grens was 3D-animatie.

Een Shopify-site die de runtime van Spline benut

Onyx draait op Shopify, maar hun webwinkel is een volledig eigen frontend die Shopify tot het uiterste drijft.

In plaats van modellen te exporteren of te vertrouwen op een speciale integratie, sluit Onyx Spline in met Spline Viewer en bestuurt het scènes programmatisch met de Code API van Spline.

Zo bouwen ze interactieve momenten die zich gedragen als productfuncties. Niet alleen statische visuals.

Van storyboards tot interacties in Spline

De 3D-productieflow van Onyx is gebouwd op snelheid, afstemming en efficiëntie:

1. Productrenders van hoge kwaliteit Vaak aan design geleverd als uitgeknipte PNG’s.
2. Storyboarding Het designteam legt de beweging vast in ‘keyframes’: wat beweegt er, wanneer en waarom.
3. Animeren in Spline Het team bouwt die storyboards na als echte interactieve scènes.
4. Overdracht aan development Spline-embeds komen op de site terecht en worden bestuurd met logica in de runtime.

3D gebruiken om uit te leggen wat klanten niet verwachten

Circadian is geen typische productpagina voor koffie.

In plaats van standaardomschrijvingen als ‘lichte vs. donkere branding’ of ‘smaaknoten’ biedt Circadian varianten op basis van cafeïnegehalte, met een calculator die klanten helpt hun inname over de dag af te stemmen.

Onyx gebruikt 3D-visuals als uitlegsysteem om deze informatie over te brengen en boeiender te maken:

• De achtergrond introduceert het concept visueel
• De scène reageert op interactie
• Klikken op verschillende varianten triggert verschillende bewegingen in de Spline-scène

‘De verschillende varianten zijn voor ons letterlijk hoeveel cafeïne er in het product zit. Het asset op de achtergrond beweegt afhankelijk van welke ervaring ze bekijken.’

En cruciaal: het team van Onyx zorgde ervoor dat hun interactieve assets op de achtergrond blijven als dat nodig is, of juist interactief op de voorgrond treden als dat nodig is. Gaat er bijvoorbeeld belangrijke tekst over de pagina, dan wordt de belichting van de ingesloten 3D-assets gedimd.

De grootste winst: snel live

Voor Onyx is het grootste voordeel niet alleen de visuele kwaliteit, maar vooral de haalbaarheid en snelheid voor hun team.

Er werken ongeveer 10 mensen aan de code en de creatieve kant van de site. Eigen 3D-engineers en -designers aannemen is voor een koffiebedrijf een grote verplichting en een flinke uitgave.

Spline verlaagt dat risico door doorlooptijden te verkorten en 3D voor iedereen haalbaar te maken.

Het grootste voordeel is hoe snel je live bent… Spline verlaagt het risico om met dit soort dingen in 3D te beginnen.

Aan de slag met Spline

Onyx Coffee Lab koos niet voor 3D om op te vallen. Ze gebruikten het om een echt e-commerceprobleem op te lossen:

Hoe laat je een zintuiglijk product online echt aanvoelen zonder in te leveren op snelheid, helderheid of conversie?

Met Spline vonden ze een workflow die past bij een klein team, soepel draait op mobiel en interactieve storytelling snel live brengt, zodat ze hun merk kunnen onderscheiden in een drukke markt.

Neem contact op met sales