Så skapar Onyx Coffee Lab interaktiv 3D för e-handel

Kaffe är en upplevelse för sinnena. Men att handla på nätet är det inte.

För Onyx Coffee Lab hängde närvaron på nätet på hur de kunde överbrygga det glappet.

I en trång kategori där kaffebönor ser likadana ut och skillnaderna mellan produkterna sitter i doft, smak och textur kommer man bara så långt med att berätta en historia i ord.

Onyx behövde en digital upplevelse som kunde bära samma besatthet av hantverket som syns i deras rostning, utan att sänka prestanda eller konvertering.

Så de tänjde på gränsen: interaktiv 3D på webben, byggd med Spline och lanserad av ett litet team.

Scrollstyrd 3D-upplevelse för Onyx Coffee Labs adventskalender 2025

Att sticka ut som varumärke utan sinnena

Kaffevarumärken är notoriskt svåra på nätet:

• De flesta produkter ser likadana ut. En ljusrost bredvid en mörkrost ser fortfarande ut som kaffebönor.

• Du säljer mat utan doft eller smak. Det finns ingen återkoppling till sinnena.

• Marknaden är mättad. ”Riktigt bra kaffe” är inte längre något som skiljer ut en.

Onyx webbplats behövde göra mer än att se bra ut. Den var tvungen att kommunicera snabbt. Annars skulle målgruppen snabbt tappa intresset och lämna.

Att göra hantverket till en synlig varumärkessignal

Michael Mahler, CTO på Onyx Coffee Lab, beskriver två pelare som definierar varumärket:

1. Det färskaste kaffet som går att få Kaffet rostas på beställning och skickas snabbt. Ofta tar det 24–48 timmar från rosteriet till dörren.
2. Etiska inköp som ändrar drivkrafterna Onyx betalar producenterna 4–6 gånger råvarumarknadens pris och bygger långsiktiga relationer som skapar en viktig återkoppling: producenterna vill sälja sina bästa partier till Onyx, och lokalsamhällena gynnas på kuppen.

Samma tankesätt präglar deras webbupplevelse.

Vår slogan är ”Nöj dig aldrig med tillräckligt bra”. Det handlar alltid om vad vi kan göra bättre, och det tankesättet tar aldrig slut.

Onyx Coffee Labs produktsida för Circadian med en interaktiv 3D-scen

Design för prosumenter

Onyx designar inte för alla. De designar för människor som bryr sig om detaljer.

Michael kallar dem prosumenter. Kunder som märker när ett varumärke slarvar med småsakerna och som förväntar sig att sammanhängande digitala upplevelser speglar produktens kvalitet.

Det formade ett medvetet designval: webbplatsen måste vara begriplig direkt, men samtidigt ligga precis på gränsen för vad som är ”normalt” inom e-handel.

Onyx hittade den särskiljande kanten på ett ställe: 3D-design med Spline.

Vi ville hitta den gränsen och ligga så nära den vi bara kunde … och den gränsen var 3D-animation.

En Shopify-sajt som utnyttjar Splines runtime

Onyx kör på Shopify, men butiksupplevelsen är en helt egenbyggd frontend som pressar Shopify till det yttersta.

I stället för att exportera modeller eller förlita sig på en särskild integration bäddar Onyx in Spline med Spline Viewer och använder Splines Code API för att styra scenerna programmatiskt.

Det låter dem bygga interaktiva ögonblick som fungerar som produktfunktioner. Inte bara statiska bilder.

Från storyboards till interaktioner i Spline

Onyx produktionsflöde för 3D är byggt för fart, samsyn och effektivitet:

1. Produktrenderingar i hög kvalitet Levereras ofta till designteamet som frilagda PNG-filer.
2. Storyboarding Designteamet sätter ”keyframes” för rörelsen: vad som rör sig, när och varför.
3. Animering i Spline Teamet återskapar storyboards som riktiga interaktiva scener.
4. Överlämning till utvecklarna Inbäddningar från Spline hamnar på sajten och styrs med runtime-logik.

3D för att förklara det kunderna inte väntar sig

Circadian är ingen typisk produktsida för kaffe.

I stället för vanliga kaffebeskrivningar som ”ljus eller mörk rost” eller ”smaknoter” erbjuder Circadian varianter baserade på koffeinhalt och har en kalkylator som hjälper kunderna att anpassa sitt intag under dagen.

Onyx använder 3D-bilder som ett system för förklaringar, för att sprida informationen och göra den mer engagerande:

• Bakgrunden introducerar konceptet visuellt
• Scenen reagerar på interaktion
• Ett klick på olika varianter utlöser olika rörelser i Spline-scenen

”Våra olika varianter handlar bokstavligen om hur mycket koffein som finns i produkten. Objektet i bakgrunden rör sig beroende på vilken upplevelse de tittar på.”

Och avgörande: Onyx-teamet utformade sina interaktiva tillgångar så att de håller sig i bakgrunden när det behövs, eller blir interaktiva och hamnar i centrum när det behövs. När viktig text går över sidan dämpas till exempel belysningen på de inbäddade 3D-tillgångarna.

Den största vinsten: tiden till lansering

För Onyx är den största fördelen inte bara den visuella kvaliteten – det är genomförbarheten och farten för teamet.

Ungefär 10 personer arbetar med sajtens kod och kreativa innehåll. Att anställa dedikerade 3D-utvecklare och 3D-designers är ett stort åtagande och en stor kostnad för ett kafferosteri.

Spline sänker risken genom att korta tidsplanerna och göra 3D möjligt för alla.

Den största fördelen är tiden till lansering … Spline sänker risken det innebär att börja göra sådana här saker i 3D.

Kom igång med Spline

Onyx Coffee Lab började inte med 3D för att imponera. De använde det för att lösa ett verkligt problem inom e-handel:

Hur får man en produkt för sinnena att kännas verklig på nätet, utan att ge avkall på fart, tydlighet eller konvertering?

Med Spline hittade de ett arbetsflöde som passar ett litet team, fungerar smidigt i mobilen och låter interaktivt berättande lanseras snabbt – så att de kan sticka ut med sitt varumärke på en trång marknad.

Kontakta sälj