Onyx Coffee Lab tạo 3D tương tác cho thương mại điện tử như thế nào

Cà phê là một trải nghiệm giác quan. Nhưng mua sắm trực tuyến thì không.

Với Onyx Coffee Lab, sự hiện diện trực tuyến của họ phụ thuộc vào cách họ thu hẹp khoảng cách đó.

Trong một thị trường đông đúc, nơi hạt cà phê trông giống hệt nhau và khác biệt sản phẩm nằm ở hương thơm, vị và cảm giác, chỉ kể chuyện bằng lời thì chỉ đi được đến một mức nào đó.

Onyx cần một trải nghiệm số mang được cùng niềm say mê với nghề như trong cách họ rang cà phê, mà không làm chậm hiệu năng hay giảm tỷ lệ chuyển đổi.

Vì vậy họ đã vượt qua giới hạn: 3D tương tác trên web, xây dựng bằng Spline, và được ra mắt bởi một đội ngũ nhỏ.

Trải nghiệm 3D theo thao tác cuộn cho Onyx Coffee Lab's 2025 Advent

Tạo khác biệt thương hiệu khi không có giác quan

Xây dựng thương hiệu cà phê trên mạng nổi tiếng là khó:

• Hầu hết sản phẩm trông giống nhau. Cà phê rang nhạt đặt cạnh cà phê rang đậm vẫn chỉ trông như hạt cà phê.

• Bạn bán đồ ăn uống mà không có mùi hay vị. Không có vòng phản hồi giác quan nào.

• Thị trường đã bão hòa. "Cà phê ngon" không còn là điểm khác biệt nữa.

Website của Onyx không chỉ cần đẹp. Nó phải truyền tải thật nhanh. Nếu không, khách hàng mục tiêu sẽ nhanh chóng mất hứng thú và rời đi.

Biến tay nghề thành tín hiệu thương hiệu hữu hình

Michael Mahler, CTO tại Onyx Coffee Lab, mô tả hai trụ cột định hình thương hiệu:

1. Cà phê tươi nhất có thể Cà phê được rang theo đơn và giao nhanh chóng. Thường chỉ 24-48 giờ từ lò rang đến tận cửa nhà.
2. Nguồn cung có đạo đức, thay đổi cách tạo động lực Onyx trả cho người sản xuất gấp 4-6 lần giá thị trường hàng hóa, xây dựng mối quan hệ lâu dài tạo nên một vòng phản hồi thiết yếu: người sản xuất muốn bán cho Onyx những lô tốt nhất, và cộng đồng cũng được hưởng lợi trong quá trình đó.

Chính tư duy đó cũng được mang vào trải nghiệm web của họ.

Khẩu hiệu của chúng tôi là 'Never settle for good enough' (Đừng bao giờ hài lòng với "đủ tốt"). Chúng tôi luôn hỏi: mình có thể cải thiện điều gì, và tinh thần đó không bao giờ dừng lại.

Trang sản phẩm Circadian của Onyx Coffee Lab với một cảnh 3D tương tác

Thiết kế cho prosumer

Onyx không thiết kế cho tất cả mọi người. Họ thiết kế cho những người quan tâm đến chi tiết.

Michael gọi họ là prosumer. Những khách hàng nhận ra khi một thương hiệu làm qua loa những điều nhỏ nhặt, và kỳ vọng trải nghiệm số nhất quán phản ánh chất lượng sản phẩm.

Điều này định hình một cách tiếp cận thiết kế có chủ đích: website phải dễ hiểu ngay lập tức, nhưng cũng phải nằm ngay sát ranh giới của những gì "bình thường" với thương mại điện tử.

Onyx đã tìm thấy lợi thế khác biệt đó ở một nơi: thiết kế 3D với Spline.

Chúng tôi muốn tìm ra ranh giới đó và bám sát nó hết mức có thể… ranh giới đó chính là hoạt ảnh 3D.

Website Shopify khai thác runtime của Spline

Onyx chạy trên Shopify, nhưng trải nghiệm cửa hàng của họ là một frontend tùy chỉnh hoàn toàn, đẩy Shopify đến giới hạn.

Thay vì xuất mô hình hay dựa vào một tích hợp chuyên dụng, Onyx nhúng Spline bằng Spline Viewer, và dùng Code API của Spline để điều khiển cảnh bằng lập trình.

Điều này cho phép họ xây dựng những khoảnh khắc tương tác hoạt động như tính năng sản phẩm. Không chỉ là hình ảnh tĩnh.

Từ storyboard đến tương tác trong Spline

Quy trình sản xuất 3D của Onyx được xây dựng cho tốc độ, sự đồng bộ và hiệu quả:

1. Hình render sản phẩm chất lượng cao Thường được giao cho bộ phận thiết kế dưới dạng PNG đã tách nền.
2. Storyboard Đội ngũ thiết kế "đặt keyframe" cho chuyển động: cái gì chuyển động, khi nào và vì sao.
3. Tạo hoạt ảnh trong Spline Đội ngũ tái tạo các storyboard đó thành những cảnh tương tác thực sự.
4. Bàn giao cho lập trình viên Các bản nhúng Spline được đưa lên website, điều khiển bằng logic runtime.

Dùng 3D để giải thích những điều khách hàng không ngờ tới

Circadian không phải là một trang sản phẩm cà phê thông thường.

Thay vì những mô tả cà phê tiêu chuẩn như 'rang nhạt hay rang đậm' hay 'hương vị', Circadian giới thiệu các biến thể dựa trên hàm lượng caffeine và có một công cụ tính để giúp khách hàng điều chỉnh lượng tiêu thụ trong ngày.

Onyx dùng hình ảnh 3D như một hệ thống giải thích để truyền tải thông tin này và làm nó cuốn hút hơn:

• Hình nền giới thiệu khái niệm bằng hình ảnh
• Cảnh phản hồi theo tương tác
• Nhấp vào các biến thể khác nhau sẽ kích hoạt những chuyển động khác nhau trong cảnh Spline

"Với chúng tôi, các biến thể khác nhau chính là lượng caffeine có trong sản phẩm. Tài nguyên ở hình nền sẽ chuyển động tùy theo trải nghiệm mà khách hàng đang xem."

Và điều quan trọng là đội ngũ Onyx đã bố trí các tài nguyên tương tác để lùi lại khi cần, hoặc trở thành tâm điểm tương tác khi cần. Ví dụ, khi có đoạn văn bản quan trọng chạy qua trang, ánh sáng trên các tài nguyên 3D được nhúng sẽ dịu xuống.

Chiến thắng lớn nhất: thời gian triển khai

Với Onyx, lợi thế lớn nhất không chỉ là chất lượng hình ảnh, mà là tính khả thi và tốc độ cho đội ngũ của họ.

Có khoảng 10 người làm việc với code và nội dung sáng tạo của website. Tuyển kỹ sư và nhà thiết kế 3D chuyên trách là một cam kết và khoản chi lớn với một công ty cà phê.

Spline giảm rủi ro bằng cách rút ngắn tiến độ và giúp ai cũng có thể làm 3D.

Lợi thế lớn nhất là thời gian triển khai… Spline giảm rủi ro khi bắt đầu làm một số thứ như thế này bằng 3D.

Bắt đầu với Spline

Onyx Coffee Lab không dùng 3D để phô trương. Họ dùng nó để giải quyết một vấn đề thương mại điện tử thực sự:

Làm sao để một sản phẩm thiên về giác quan trở nên chân thực trên mạng mà không đánh đổi tốc độ, sự rõ ràng hay tỷ lệ chuyển đổi?

Với Spline, họ đã tìm được một quy trình phù hợp với đội ngũ nhỏ, chạy mượt trên di động và giúp kể chuyện tương tác được ra mắt nhanh chóng, cho phép họ tạo khác biệt cho thương hiệu trong một thị trường đông đúc.

Liên hệ bộ phận kinh doanh