Jak Onyx Coffee Lab tworzy interaktywne 3D dla e-commerce

Kawa to doświadczenie zmysłowe. Zakupy w internecie – już nie.

Dla Onyx Coffee Lab obecność w sieci zależała od tego, jak uda się zasypać tę lukę.

W zatłoczonej kategorii, w której ziarna kawy wyglądają tak samo, a różnice między produktami kryją się w aromacie, smaku i konsystencji, samymi słowami można opowiedzieć tylko tyle.

Onyx potrzebował cyfrowego doświadczenia, które przeniesie tę samą obsesję na punkcie rzemiosła, którą widać w ich paleniu kawy – bez spowalniania strony i spadku konwersji.

Przesunęli więc granicę: interaktywne 3D w sieci, zbudowane w Spline i wdrożone przez niewielki zespół.

Doświadczenie 3D sterowane przewijaniem dla kalendarza adwentowego Onyx Coffee Lab 2025

Wyróżnienie marki bez udziału zmysłów

Budowanie marki kawy w internecie jest wyjątkowo trudne:

• Większość produktów wygląda podobnie. Jasno palona kawa obok ciemno palonej to wciąż ziarna kawy.

• Sprzedajesz jedzenie bez zapachu i smaku. Nie ma zmysłowej informacji zwrotnej.

• Rynek jest nasycony. „Świetna kawa” nie jest już wyróżnikiem.

Strona Onyx musiała robić więcej, niż tylko dobrze wyglądać. Musiała szybko komunikować. W przeciwnym razie docelowi odbiorcy szybko by się znudzili i odeszli.

Rzemiosło jako widoczny sygnał marki

Michael Mahler, CTO w Onyx Coffee Lab, opisał dwa filary, które definiują markę:

1. Najświeższa możliwa kawa Kawa jest palona na zamówienie i szybko wysyłana. Często w ciągu 24–48 godzin od palarni do drzwi klienta.
2. Etyczne pozyskiwanie, które zmienia zachęty Onyx płaci producentom 4–6 razy więcej niż giełdowa cena surowca, budując długoterminowe relacje, które tworzą kluczową pętlę: producenci chcą sprzedawać Onyx swoje najlepsze partie, a lokalne społeczności na tym korzystają.

To samo nastawienie przenosi się na ich doświadczenie w sieci.

Nasze hasło to „Nigdy nie zadowalaj się tym, co wystarczająco dobre”. Zawsze pytamy: co możemy poprawić – i to nastawienie nigdy się nie kończy.

Strona produktu Circadian Onyx Coffee Lab z interaktywną sceną 3D

Projektowanie dla prosumentów

Onyx nie projektuje dla wszystkich. Projektuje dla ludzi, którym zależy na szczegółach.

Michael nazywa ich prosumentami. To klienci, którzy zauważają, gdy marka idzie na skróty w drobiazgach, i oczekują spójnych doświadczeń cyfrowych, które odzwierciedlają jakość produktu.

To ukształtowało przemyślane podejście do projektowania: strona musi być od razu zrozumiała, ale jednocześnie balansować na granicy tego, co „normalne” w e-commerce.

Onyx znalazł tę wyróżniającą krawędź w jednym miejscu: projektowaniu 3D w Spline.

Chcieliśmy znaleźć tę granicę i jechać jak najbliżej niej… tą granicą okazała się animacja 3D.

Strona w Shopify wykorzystująca runtime Spline

Onyx działa na Shopify, ale ich sklep ma w pełni własny frontend, który wyciska z Shopify wszystko, co się da.

Zamiast eksportować modele czy polegać na dedykowanej integracji, Onyx osadza Spline za pomocą Spline Viewer i steruje scenami programowo przez Code API Spline.

Pozwala im to budować interaktywne momenty, które działają jak funkcje produktu. Nie tylko statyczne grafiki.

Od storyboardów do interakcji w Spline

Proces produkcji 3D w Onyx jest nastawiony na szybkość, zgranie zespołu i efektywność:

1. Wysokiej jakości rendery produktów Często przekazywane projektantom jako wycięte pliki PNG.
2. Storyboard Zespół projektowy rozpisuje ruch w „klatkach kluczowych”: co się porusza, kiedy i dlaczego.
3. Animacja w Spline Zespół odtwarza te storyboardy jako prawdziwe interaktywne sceny.
4. Przekazanie deweloperom Osadzone sceny Spline trafiają na stronę i są sterowane logiką w runtime.

3D, które wyjaśnia to, czego klienci się nie spodziewają

Circadian to nie jest typowa strona produktu kawowego.

Zamiast standardowych opisów kawy, takich jak „jasne czy ciemne palenie” albo „nuty smakowe”, Circadian wprowadza warianty oparte na poziomie kofeiny i zawiera kalkulator, który pomaga klientom rozłożyć jej spożycie w ciągu dnia.

Onyx wykorzystuje grafikę 3D jako system objaśniający, który pomaga przekazać te informacje i uczynić je bardziej angażującymi:

• Tło wizualnie wprowadza koncepcję
• Scena reaguje na interakcję
• Kliknięcie różnych wariantów uruchamia różne ruchy w scenie Spline

„Poszczególne warianty to dla nas dosłownie ilość kofeiny w produkcie. Element w tle porusza się w zależności od tego, które doświadczenie ogląda użytkownik”.

Co najważniejsze, zespół Onyx zaprojektował interaktywne zasoby tak, by schodziły na drugi plan, gdy trzeba, albo stawały się interaktywnym centrum uwagi, gdy jest to potrzebne. Na przykład gdy przez stronę przechodzi ważny tekst, oświetlenie osadzonych zasobów 3D jest przygaszane.

Największa korzyść: czas do wdrożenia

Dla Onyx główną zaletą nie jest tylko jakość wizualna – to wykonalność i szybkość dla ich zespołu.

Nad kodem i warstwą kreatywną strony pracuje około 10 osób. Zatrudnienie dedykowanych inżynierów i projektantów 3D to dla firmy kawowej poważne zobowiązanie i wydatek.

Spline zmniejsza ryzyko, skracając terminy i czyniąc 3D osiągalnym dla wszystkich.

Największą zaletą jest czas do wdrożenia… Spline zmniejsza ryzyko związane z rozpoczęciem pracy nad takimi rzeczami w 3D.

Zacznij ze Spline

Onyx Coffee Lab nie sięgnął po 3D, żeby błyszczeć. Użył go, by rozwiązać prawdziwy problem e-commerce:

Jak sprawić, by zmysłowy produkt wydawał się prawdziwy w sieci, bez utraty szybkości, przejrzystości i konwersji?

Dzięki Spline znaleźli proces, który pasuje do małego zespołu, płynnie działa na urządzeniach mobilnych i pozwala szybko wdrażać interaktywne opowieści – a to pozwala im wyróżnić markę na zatłoczonym rynku.

Skontaktuj się z działem sprzedaży