· Câu chuyện khách hàng · KOJI

Koji Studio đã dùng Spline để tạo màn trình diễn sản phẩm 3D như thế nào

Koji Studio đã dùng Spline để biến hình ảnh sản phẩm tĩnh thành màn trình diễn sản phẩm 3D theo thao tác cuộn, mang đến trải nghiệm cuốn hút và đáng nhớ hơn, làm nổi bật sự đổi mới và tay nghề của khách hàng.

Khi Ori, một công ty công nghệ y tế, chuẩn bị ra mắt website cho sản phẩm máy quét nha khoa 3D mới, thách thức rất rõ ràng: làm sao truyền tải sự chính xác và đổi mới của một thiết bị vật lý theo cách cũng đổi mới không kém trên môi trường trực tuyến?

Công ty muốn đưa thiết bị mới Ori Intraoral Scanner ra thị trường. Đây là thiết bị quét nha khoa 3D được thiết kế để giúp nha sĩ ghi lại mô hình kỹ thuật số răng của bệnh nhân với độ chính xác cao, theo thời gian thực.

Muốn vượt xa hình ảnh và video tĩnh để cho khách hàng thấy sự tiến bộ kỹ thuật của sản phẩm, họ đã tìm đến KOJI Agency làm đội ngũ sáng tạo cho buổi ra mắt sản phẩm.

Đội ngũ KOJI sau đó quyết định tận dụng tích hợp Spline trong Webflow để tạo nên một trải nghiệm số 3D tương tác, giúp chiếc máy quét trên web trở nên chân thực như khi nằm trong tay nha sĩ.

Website 3D tương tác theo thao tác cuộn của Ori Scan

Một đội ngũ thiết kế full-stack đón nhận công cụ mới

Đội ngũ KOJI Agency đứng sau sự hiện diện trực tuyến của Ori Scan gồm Pavel, Slava, Nikita và Liza, mỗi người đều là nhà thiết kế dày dạn kinh nghiệm với nhiều dự án khách hàng.

Với hơn 20 năm trong lĩnh vực thương hiệu, nhận diện và trải nghiệm số, họ đã xây dựng mọi thứ, từ hệ thống quảng cáo dạng module đến những trang web kể chuyện đắm chìm.

Thế mạnh của họ là những "nhà thiết kế full-stack", kết hợp tư duy sản phẩm, thiết kế thị giác, tương tác và code.

Chúng tôi luôn nghiên cứu, luôn tìm kiếm công cụ mới. Đó là cách chúng tôi tìm đến Spline.

Slava Sheykin, Nhà thiết kế full-stack tại KOJI

Tận dụng Spline để khai mở tương tác

Ban lãnh đạo Ori Scan không chỉ muốn thêm một website sản phẩm y tế nữa. Họ muốn một trải nghiệm thật nổi bật trong mắt nha sĩ và các chuyên gia y tế.

Đội ngũ KOJI xem 3D tương tác là phương tiện tốt nhất để làm nổi bật sự đổi mới của chiếc máy quét, và việc chọn Spline cũng hoàn toàn có chủ đích.

Khách truy cập website xoay và khám phá máy quét khi cuộn qua trang

Đội ngũ biết họ cần sự linh hoạt để lặp lại nhanh, tối ưu hiệu năng và trình bày thiết kế sản phẩm của máy quét một cách tương tác trên mọi thiết bị.

Spline có mặt ở khắp nơi trong cộng đồng thiết kế. Dự án này là cơ hội hoàn hảo để cuối cùng chúng tôi cũng được dùng nó, và tích hợp liền mạch với Webflow khiến quyết định càng dễ dàng hơn.

Pavel Dergachev, Nhà sáng lập và giám đốc sáng tạo tại KOJI

Quy trình thiết kế: từ CAD và tối ưu đa giác đến trải nghiệm web chỉn chu

Quy trình bắt đầu với các tệp CAD kỹ thuật của Ori Scan, được agency tinh chỉnh và tối ưu trước khi đưa vào Spline.

Quy trình mang tính lặp lại, cân đối số đa giác, vật liệu và ánh sáng để đảm bảo sự cân bằng giữa kết quả đẹp mắt và hiệu năng mượt mà trên web.

Spline gắn kết khía cạnh kỹ thuật và sáng tạo của quy trình. Các công cụ hiệu năng của nó giúp đội ngũ hiểu rõ việc tối ưu mô hình, đảm bảo tích hợp mượt mà trên mọi thiết bị. Hệ thống sự kiện giúp thiết lập chuyển động tương tác thật đơn giản, trong khi công cụ vật liệu và ánh sáng linh hoạt giúp tinh chỉnh vẻ ngoài của sản phẩm để nó trông chỉn chu và chân thực trên web.

Mô hình 3D và bản triển khai cuối cùng trên di động

Một trong những chi tiết nổi bật? Mô hình răng 3D. Để cho thấy máy quét hoạt động thực tế, đội ngũ đã dựng hình bộ răng trông tự nhiên trong Spline, một điểm nhấn thiết yếu giúp bản demo trở nên chân thực.

Sự chú ý đến từng chi tiết này đưa bản demo vượt xa một màn trình diễn kỹ thuật. Bằng cách kết hợp tính chân thực với tương tác, đội ngũ đã tạo nên câu chuyện sản phẩm chân thực, cuốn hút và gắn liền với cách nha sĩ thực sự sử dụng máy quét.

Vừa vui lại vừa rất quan trọng. Vì mục đích của máy quét là quét răng, mô hình 3D phải trông và mang cảm giác thật tự nhiên.

Liza Grin, Nhà sản xuất nội dung số tại KOJI
Từ trên xuống: bản triển khai cuối cùng, mô hình 3D gốc và bản nháp ban đầu

Tích hợp với Webflow

Đội ngũ KOJI dựa vào Spline để thổi hồn vào sản phẩm Ori Scan, và vào tích hợp Webflow gốc của Spline để đưa tài nguyên 3D vào website một cách liền mạch.

Nhờ vậy, họ có thể kết hợp hoạt ảnh theo thao tác cuộn với 3D tương tác, cho phép khách truy cập xoay và khám phá máy quét khi cuộn qua trang.

Rất đơn giản và nhanh chóng. Thời gian làm quen rất ngắn, ngay cả nhà thiết kế junior cũng có thể bắt tay vào và tích hợp 3D vào Webflow.

Pavel Dergachev, Nhà sáng lập và giám đốc sáng tạo tại KOJI
Tích hợp Webflow gốc của Spline

Vì sao tương tác quan trọng

Với Ori Scan, màn trình diễn sản phẩm 3D tương tác không chỉ là chuyện thẩm mỹ. Đó là về sự rõ ràng và sức tác động. Bằng cách cho khách hàng cuộn qua sản phẩm, xoay nó và khám phá các tính năng trong bối cảnh, họ đã tạo nên một trải nghiệm vượt xa những gì ảnh chụp hay video tĩnh có thể làm được.

Tương tác thay đổi mọi thứ. Nó làm sản phẩm trở nên chân thực. Và quan trọng hơn, nó giúp khách hàng kể câu chuyện của mình theo một cách đầy đổi mới.

Pavel Dergachev, Nhà sáng lập và giám đốc sáng tạo tại KOJI

Bắt đầu với Spline

Đội ngũ KOJI tiếp tục thử nghiệm với Spline. Với họ, dự án này mở ra một chương mới, nơi 3D và thiết kế tương tác không chỉ là "có thì tốt" mà là yếu tố thiết yếu để kể câu chuyện sản phẩm.

Đây là một ví dụ ấn tượng về cách tương tác có thể biến thiết kế sản phẩm số thành một trải nghiệm chân thực.

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

Thêm câu chuyện khách hàng