Onyx Coffee Lab สร้างสรรค์ 3D แบบอินเทอร์แอคทีฟสำหรับอีคอมเมิร์ซอย่างไร

กาแฟคือประสบการณ์ทางประสาทสัมผัส แต่การช้อปปิงออนไลน์ไม่ใช่

สำหรับ Onyx Coffee Lab ตัวตนบนโลกออนไลน์ของพวกเขาขึ้นอยู่กับว่าจะเชื่อมช่องว่างนี้ได้อย่างไร

ในหมวดสินค้าที่แข่งขันสูง ที่เมล็ดกาแฟดูเหมือนกันไปหมด และความแตกต่างของผลิตภัณฑ์อยู่ที่กลิ่น รสชาติ และสัมผัส การเล่าเรื่องด้วยคำพูดเพียงอย่างเดียวพาไปได้ไม่ไกลนัก

Onyx ต้องการประสบการณ์ดิจิทัลที่ถ่ายทอดความหลงใหลในงานฝีมือแบบเดียวกับที่เห็นในการคั่วกาแฟของพวกเขา โดยไม่ทำให้ประสิทธิภาพหรือยอดขายลดลง

พวกเขาจึงผลักดันขอบเขต: 3D แบบอินเทอร์แอคทีฟบนเว็บ สร้างด้วย Spline และส่งมอบโดยทีมเล็ก ๆ

ประสบการณ์ 3D ตามการเลื่อนหน้าสำหรับ ปฏิทินอาเวนต์ 2025 ของ Onyx Coffee Lab

สร้างความแตกต่างให้แบรนด์โดยไม่มีประสาทสัมผัส

การสร้างแบรนด์กาแฟบนโลกออนไลน์ขึ้นชื่อว่ายาก:

• ผลิตภัณฑ์ส่วนใหญ่หน้าตาคล้ายกัน กาแฟคั่วอ่อนวางข้างกาแฟคั่วเข้มก็ยังดูเป็นเมล็ดกาแฟเหมือนกัน

• คุณขายอาหารโดยไม่มีกลิ่นหรือรสชาติ ไม่มีวงจรการรับรู้ทางประสาทสัมผัส

• ตลาดอิ่มตัวแล้ว “กาแฟดี” ไม่ใช่จุดเด่นที่สร้างความแตกต่างอีกต่อไป

เว็บไซต์ของ Onyx ต้องทำได้มากกว่าแค่ดูดี ต้องสื่อสารได้อย่างรวดเร็ว ไม่อย่างนั้นกลุ่มเป้าหมายจะหมดความสนใจและออกจากเว็บไปในไม่ช้า

เปลี่ยนงานฝีมือให้เป็นสัญญาณของแบรนด์ที่มองเห็นได้

Michael Mahler, CTO ของ Onyx Coffee Lab อธิบายเสาหลักสองประการที่กำหนดแบรนด์:

1. กาแฟที่สดที่สุดเท่าที่จะเป็นไปได้ กาแฟคั่วตามออร์เดอร์และจัดส่งอย่างรวดเร็ว บ่อยครั้งใช้เวลาเพียง 24-48 ชั่วโมงจากเครื่องคั่วถึงหน้าประตูบ้าน
2. การจัดหาอย่างมีจริยธรรมที่เปลี่ยนแรงจูงใจ Onyx จ่ายให้ผู้ผลิต 4-6 เท่าของราคาตลาดสินค้าโภคภัณฑ์ สร้างความสัมพันธ์ระยะยาวที่ก่อให้เกิดวงจรสำคัญ: ผู้ผลิตอยากขายล็อตที่ดีที่สุดให้ Onyx และชุมชนก็ได้รับประโยชน์ไปด้วย

แนวคิดเดียวกันนี้ส่งต่อมาถึงประสบการณ์บนเว็บของพวกเขา

สโลแกนของเราคือ ‘อย่าพอใจแค่ดีพอ’ เราคิดเสมอว่าจะปรับปรุงอะไรได้อีก และแนวคิดนี้ไม่เคยหยุด

หน้าผลิตภัณฑ์ Circadian ของ Onyx Coffee Lab พร้อมฉาก 3D แบบอินเทอร์แอคทีฟ

ออกแบบสำหรับกลุ่มโปรซูเมอร์

Onyx ไม่ได้ออกแบบสำหรับทุกคน พวกเขาออกแบบสำหรับคนที่ใส่ใจในรายละเอียด

Michael เรียกพวกเขาว่าโปรซูเมอร์ ลูกค้าที่สังเกตเห็นเมื่อแบรนด์ลดคุณภาพในเรื่องเล็ก ๆ และคาดหวังให้ประสบการณ์ดิจิทัลที่สอดคล้องกันสะท้อนคุณภาพของผลิตภัณฑ์

สิ่งนี้หล่อหลอมแนวทางการออกแบบที่ตั้งใจ เว็บไซต์ต้องเข้าใจได้ทันที แต่ก็ต้องอยู่ตรงขอบของสิ่งที่ “ปกติ” สำหรับอีคอมเมิร์ซพอดี

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 พวกเขาพบเวิร์กโฟลว์ที่เหมาะกับทีมเล็ก ทำงานได้ลื่นไหลบนมือถือ และส่งมอบการเล่าเรื่องแบบอินเทอร์แอคทีฟได้รวดเร็ว ช่วยให้แบรนด์โดดเด่นในตลาดที่แข่งขันสูง

ติดต่อฝ่ายขาย