Haliviq
กลับไปหน้า WorkFitness & Wellness

BASE: เว็บไซต์ฟิตเนสสตูดิโอ พร้อมระบบจองคลาสออนไลน์

คนมาเรียนที่ BASE เพราะเทรนเนอร์และบรรยากาศในคลาส แต่เว็บไซต์เดิมไม่มีทางให้คนใหม่ดูตารางหรือจองคลาสทดลองได้ง่ายๆ เราเลยทำเว็บโทนเข้มดูมั่นใจ แล้วต่อกับระบบจองคลาสที่ใช้งานได้จริง ให้คนที่ดูแล้วถูกใจกดจองได้ในหน้าจอเดียวกัน เทรนเนอร์แต่ละคนมีหน้าโปรไฟล์ของตัวเอง ส่วนตารางคลาสดึงจากแหล่งเดียว ไม่ต้องไล่แก้ทีละหน้าเอง สรุปด้านล่างเป็นงานที่ส่งมอบ ขั้นตอนทำงาน และเทคโนโลยีที่ใช้

อุตสาหกรรม

Fitness & Wellness

แพลตฟอร์ม

เว็บไซต์ (รองรับทุกขนาดหน้าจอ)

ปี

2025

บริการ

4

บริการที่ให้

ออกแบบเว็บไซต์ (UX/UI)พัฒนาเว็บไซต์ระบบจองคลาสออนไลน์กำกับภาพถ่ายและคอนเทนต์
BASE

เป้าหมายของโปรเจกต์

  • ตัดช่องว่างระหว่างการพบสตูดิโอทางออนไลน์ กับการจองคลาสทดลอง
  • ให้เทรนเนอร์แต่ละคนมีหน้าของตัวเอง สมาชิกใหม่จะเลือกคลาสตามคนสอนได้
  • แสดงตารางคลาสที่ถูกต้องอยู่เสมอ โดยไม่ต้องมีใครไล่แก้หน้าเว็บด้วยมือ
  • ออกแบบจากมือถือก่อน เพราะคนที่สนใจส่วนใหญ่ดูและจองจากมือถือ
  • ใช้ภาพถ่ายและแนวออกแบบที่สื่อบรรยากาศของสตูดิโอให้เข้ากับคลาสที่สอน
  • วางโครงสร้างหน้าให้ชัด เพื่อให้คลาสและเทรนเนอร์ถูกค้นพบผ่านการค้นหา

สิ่งที่เราส่งมอบ

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

ขั้นตอนการทำงาน

1

ศึกษาสตูดิโอและกลุ่มสมาชิก

เราเริ่มจากทำความเข้าใจรูปแบบคลาส รายชื่อเทรนเนอร์ และสมาชิกแบบที่ BASE อยากได้ เพื่อตัดสินว่าข้อมูลไหนควรขึ้นก่อนบนหน้าแรก

2

ออกแบบ UX ให้จองก่อน

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

3

พัฒนาและเชื่อมต่อระบบ

เราพัฒนาเว็บที่โหลดเร็ว แล้วต่อกับระบบจองคลาสให้ครบตั้งแต่ดูตารางจนถึงได้การจอง

4

จัดคอนเทนต์และเปิดตัว

เราจัดภาพถ่ายเทรนเนอร์และสตูดิโอ วางโครงหน้าสำหรับคลาสและโค้ช แล้วส่งมอบตารางที่แก้เองได้ หลังเปิดตัวสตูดิโอปรับตารางได้เอง

เทคโนโลยีและเครื่องมือ

Next.js front-end ให้หน้าเว็บโหลดเร็วบนเน็ตมือถือต่อกับระบบจองคลาส ครอบคลุมทั้งตารางและตัวการจองเลย์เอาต์ที่ออกแบบสำหรับมือถือเป็นหลัก ตามหน้าจอที่สมาชิกใช้บ่อยที่สุดCloud hosting และ CDN ให้ภาพสตูดิโอและเทรนเนอร์โหลดเร็วCMS แบบเบาสำหรับตารางและคอนเทนต์เทรนเนอร์ มีหน้าแก้ไขที่ใช้ง่ายพื้นฐาน SEO บนหน้าเว็บสำหรับหน้าคลาสและหน้าเทรนเนอร์

ผลลัพธ์

  • ได้เว็บไซต์ใหม่ที่เปิดตัวพร้อมระบบจองคลาสใช้งานได้ตั้งแต่วันแรก
  • บนมือถือ ผู้เข้าชมกดเข้าขั้นตอนจองได้ภายในไม่กี่แตะจากหน้าแรก
  • หน้าเทรนเนอร์ช่วยให้สมาชิกใหม่เลือกคลาสแรกจากคนสอนได้
  • สตูดิโออัปเดตตารางได้เอง ไม่ต้องพึ่งนักพัฒนา
  • โครงสร้างหน้าที่ชัดเป็นพื้นฐานให้คลาสและเทรนเนอร์ถูกค้นพบ

คำถามที่พบบ่อย

คำตอบสั้น ๆ เกี่ยวกับโปรเจกต์นี้

เว็บสตูดิโอที่มีระบบจองต่ออยู่แบบนี้ ปกติใช้เวลาราวสองเดือน ถ้าเตรียมรายการคลาส ข้อมูลเทรนเนอร์ และภาพถ่ายไว้ก่อน งานจะเสร็จเร็วขึ้น

ใช้ Next.js ทำเว็บให้รองรับมือถือ ต่อกับระบบจองคลาส ใช้ CMS แบบเบาสำหรับอัปเดตตารางและข้อมูลเทรนเนอร์ และวางบน Cloud hosting ที่มี CDN

ได้ เราออกแบบเว็บจากมือถือก่อน และจากหน้าแรกกดเข้าขั้นตอนจองได้ภายในไม่กี่แตะ

ตารางดึงมาจากแหล่งกลาง ไม่ได้พิมพ์ลงในหน้าเว็บทีละหน้า เวลาสตูดิโอเปลี่ยนเวลาคลาสหรือเพิ่มรอบ เว็บจะแสดงข้อมูลใหม่โดยไม่ต้องให้นักพัฒนาแก้

สตูดิโอแบบนี้หลายคนเลือกคลาสเพราะโค้ช หน้าโปรไฟล์ทำให้คนใหม่เห็นว่าใครสอนอะไรก่อนจอง การมาครั้งแรกจึงไม่รู้สึกเสี่ยงเกินไป

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

มีโปรเจกต์ในใจแล้วใช่ไหม?

มาสร้างโปรเจกต์ถัดไปด้วยกัน

คุยกับเรา