งานร่วมพัฒนา
XIRCLE Brand Experience
พื้นที่ให้ลองกดและเดินสำรวจ Clover X ผ่าน XIRCLE, Habix และ RoutineX เลือกสิ่งที่สนใจแล้วแผนที่พาไปต่อ พร้อมคลิป official และลิงก์โหลดแอป
- เว็บ · Interactive brand experience
- HTML · CSS · JavaScript
- แผนที่และ URL state
- WebGL2 แบบ optional
- Official video queues
โจทย์
บริษัทต้องการพื้นที่กลางที่ X-VISOR ทุกคนเปิดใช้กับลูกค้าได้ คนควรลองกดแล้วเห็นความสัมพันธ์ระหว่างข้อมูล อุปกรณ์ โภชนาการและกิจวัตร โดยเลือกเดินต่อเองได้บนมือถือ
การตัดสินใจสำคัญ
- ให้สิ่งที่เลือกเปลี่ยนเส้นทางเริ่มจากการพัก มื้ออาหาร หรือการขยับ แล้วจัดลำดับจุดแวะต่างกัน แผนที่บอกตำแหน่งและให้เลือกข้ามหรือย้อนกลับได้
- ใช้โค้ดอธิบายความสัมพันธ์ลองประกอบภาพหนึ่งวัน เปลี่ยนอุปกรณ์ สำรวจ ABCD และเลือก Habix ทีละตัว เพื่อเห็นบทบาทที่ต่างกันโดยไม่คำนวณผลสุขภาพให้ผู้ชม
- เชื่อมของเดิมเป็นประสบการณ์เดียวพาเข้าห้อง Absorb และ Build ของ RoutineX แล้วกลับแผนที่พร้อมบริบทเดิม แยกให้ชัดว่า Control คือพฤติกรรมและ FIVES คือกรอบคิด
- พร้อมเปิดอธิบายร่วมกันโหมดนำเสนอใช้สถานะชุดเดียวกับหน้าเว็บ ย้อนกลับและเปิดซ้ำได้ ปลายทางเป็นแอปและข้อมูลบริษัทโดยไม่มีนัดหรือบริการส่วนตัว
- ให้เรียนรู้แล้วไปใช้ต่อจัดคลิปจากช่อง official เป็นหมวดและคิวในหน้า โหลด player เมื่อเลือกเล่น พร้อมทางเข้าห้องความรู้และลิงก์สโตร์ที่ตรวจจากเว็บทางการ
ภาพจากการใช้งานจริง
สิ่งที่ Teem สร้าง
บทบาทภาพรวมใน myClover ตามประวัติ; เคสนี้แสดงงานพัฒนา Brand Experience กลางสำหรับ Clover Xวางแนวคิด โครงสร้างเว็บไซต์ และประสบการณ์ที่เชื่อมถึงกัน
- แผนที่หกจุดแวะและสามเส้นทางตามความสนใจ
- ภาพหนึ่งวันที่ลองประกอบและเปลี่ยนได้
- ตัวเลือก App / Band / Scale และ Habix ห้าผลิตภัณฑ์
- RoutineX ABCD พร้อมทางเข้าห้อง Absorb / Build
- โหมดนำเสนอที่ใช้สถานะเดียวกับหน้าเว็บ
- คลิป official แบ่งหมวด ห้องความรู้ และลิงก์โหลดแอป
ลองอะไรได้บ้าง
- เลือกสิ่งที่สนใจ แล้วดูแผนที่เปลี่ยนลำดับ
- ลองเก็บจังหวะในภาพหนึ่งวัน แล้วเปลี่ยนช่วงเวลา
- สำรวจ ABCD เข้าห้อง RoutineX และกลับแผนที่
- เลือกหมวดคลิป official และเปิดลิงก์ดาวน์โหลดแอป
หลักฐานว่าใช้ได้จริง
- ภาพหน้าจอบันทึกจาก local preview ของโค้ดจริง วันที่ 2026-11-09
- มีรายงานการตรวจ layout และการเดินทางบน Chromium แยกจากผลบน production
- รายการคลิปและลิงก์สโตร์ตรวจจากช่องและเว็บไซต์ทางการ
ข้อจำกัดและสถานะ
- ภาพและตัวเลือกใน showroom ใช้เพื่ออธิบาย ไม่ใช่ข้อมูลสุขภาพหรือคำแนะนำผลิตภัณฑ์เฉพาะบุคคล
- การตรวจเบราว์เซอร์ใช้ Chromium ยังไม่ได้รับรอง Safari, Firefox หรือโทรศัพท์จริง
- ไม่ได้รับรองผลสุขภาพ การเล่นคลิปทุกเครือข่าย การติดตั้งแอป หรือเงื่อนไขการขายในงานออกแบบนี้
อยากได้แบบนี้
งานของคุณเริ่มจากคุยโจทย์ แล้วจัดซอสจากข้อมูลธุรกิจของคุณ