Як Onyx Coffee Lab створює інтерактивне 3D для електронної комерції

Кава — це чуттєвий досвід. А онлайн-шопінг — ні.

Для Onyx Coffee Lab успіх онлайн залежав від того, чи вдасться подолати цей розрив.

У переповненій категорії, де кавові зерна виглядають однаково, а відмінності продуктів криються в ароматі, смаку й текстурі, самими лише словами історію далеко не розповіси.

Onyx потрібен був цифровий досвід, який передає ту саму одержимість майстерністю, що й їхнє обсмажування, без уповільнення роботи сайту чи зниження конверсії.

Тож вони розширили межі: інтерактивне 3D у вебі, створене за допомогою Spline і випущене невеликою командою.

3D-сцена з прокручуванням для адвент-календаря Onyx Coffee Lab 2025

Як вирізнити бренд без участі чуттів

Брендинг кави онлайн — горезвісно складне завдання:

• Більшість продуктів візуально схожі. Світле обсмаження поруч із темним — це однаково кавові зерна.

• Ви продаєте їжу без запаху й смаку. Немає чуттєвого зворотного зв’язку.

• Ринок перенасичений. «Чудова кава» вже не є відмінністю.

Сайт Onyx мав не просто гарно виглядати. Він мав швидко доносити суть. Інакше цільова аудиторія швидко втратила б інтерес і пішла б.

Майстерність як видимий сигнал бренду

Майкл Малер, CTO Onyx Coffee Lab, описав дві опори, що визначають бренд:

1. Найсвіжіша кава з можливих Каву обсмажують під замовлення й швидко відправляють. Часто від обсмажувальні до порога минає 24–48 годин.
2. Етичні закупівлі, що змінюють стимули Onyx платить виробникам у 4–6 разів більше за біржову ціну, вибудовуючи довгострокові стосунки, які створюють важливий цикл зворотного зв’язку: виробники хочуть продавати Onyx свої найкращі лоти, а громади від цього виграють.

Той самий підхід переноситься і на їхній вебдосвід.

Наше гасло — «Ніколи не задовольняйся просто непоганим». Завжди питання: що ми можемо покращити, і цей підхід ніколи не зупиняється.

Сторінка продукту Circadian від Onyx Coffee Lab з інтерактивною 3D-сценою

Дизайн для просюмерів

Onyx створює дизайн не для всіх, а для людей, яким важливі деталі.

Майкл називає їх просюмерами. Це клієнти, які помічають, коли бренд економить на дрібницях, і очікують, що цілісний цифровий досвід відображатиме якість продукту.

Це сформувало свідомий підхід до дизайну: сайт має бути зрозумілим з першого погляду, але водночас балансувати на межі того, що «нормально» для електронної комерції.

Onyx знайшла свою відмінність у 3D-дизайні зі Spline.

Ми хотіли знайти цю межу й іти нею якомога ближче… і цією межею стала 3D-анімація.

Сайт на Shopify, що використовує рантайм Spline

Onyx працює на Shopify, але їхня вітрина — це повністю власний фронтенд, що використовує Shopify на межі можливостей.

Замість того щоб експортувати моделі чи покладатися на окрему інтеграцію, Onyx вбудовує Spline за допомогою Spline Viewer і використовує Code API Spline, щоб програмно керувати сценами.

Це дає змогу створювати інтерактивні моменти, які поводяться як функції продукту. А не просто статичні візуали.

Від сторібордів до взаємодій у Spline

3D-процес Onyx побудовано для швидкості, узгодженості й ефективності:

1. Якісні рендери продукту Часто передаються дизайнерам як вирізані PNG.
2. Сторібординг Дизайн-команда розставляє «ключові кадри» руху: що рухається, коли і чому.
3. Анімація в Spline Команда відтворює ці сторіборди як справжні інтерактивні сцени.
4. Передавання розробникам Вбудовані сцени Spline потрапляють на сайт, а керує ними логіка рантайму.

3D пояснює те, чого клієнти не очікують

Circadian — не типова сторінка кавового продукту.

Замість стандартних описів кави, як-от «світле чи темне обсмаження» чи «смакові ноти», Circadian пропонує варіанти за рівнем кофеїну й містить калькулятор, що допомагає клієнтам розподілити споживання протягом дня.

Onyx використовує 3D-візуали як систему пояснень, щоб донести цю інформацію й зробити її захопливішою:

• Фон візуально представляє концепцію
• Сцена реагує на взаємодію
• Клік на різні варіанти запускає різні рухи в сцені Spline

«Різні варіанти для нас — це буквально кількість кофеїну в продукті. Об’єкт на фоні рухається залежно від того, який варіант переглядає людина».

І що важливо, команда Onyx налаштувала інтерактивні ресурси так, щоб вони не заважали, коли треба, або ставали інтерактивним центром уваги, коли треба. Наприклад, коли сторінкою проходить важливий текст, освітлення вбудованих 3D-об’єктів притлумлюється.

Найбільша перемога: час до розгортання

Для Onyx головна перевага — не лише візуальна якість, а й здійсненність і швидкість для їхньої команди.

З кодом і креативом сайту працюють приблизно 10 людей. Наймати окремих 3D-інженерів і дизайнерів — серйозне зобов’язання й витрати для кавової компанії.

Spline знижує ризик, скорочуючи терміни й роблячи 3D досяжним для всіх.

Найбільша перевага — час до розгортання… Spline знижує ризик, на який доводиться йти, щоб почати робити такі речі в 3D.

Почніть працювати зі Spline

Onyx Coffee Lab взялася за 3D не заради ефектності. Компанія використала його, щоб розв’язати реальну проблему електронної комерції:

Як зробити чуттєвий продукт відчутним онлайн, не жертвуючи швидкістю, ясністю чи конверсією?

Зі Spline вони знайшли процес, який підходить невеликій команді, плавно працює на мобільних і дає змогу швидко випускати інтерактивні історії, вирізняючи бренд на переповненому ринку.

Зв’язатися з відділом продажів