Website Case Study : การออกแบบเว็บไซต์ใหม่ให้กับ The String Class

กรณีศึกษาเว็บไซต์: การออกแบบเว็บไซต์ใหม่ให้กับ The String Class

ภาพรวมโครงการ (Overview)

The String Class เป็นโรงเรียนสอนดนตรีในกรุงเทพฯ ที่เปิดสอนเครื่องดนตรีหลากหลายประเภท ได้แก่ กีตาร์ เบส อูคูเลเล่ เปียโน และกลอง โดยมีรูปแบบการเรียนการสอนทั้งที่บ้านของผู้เรียน ผ่านระบบออนไลน์แบบ Live และที่สตูดิโอ 2 สาขา ได้แก่ อนุสาวรีย์ชัยสมรภูมิ และแยกติวานนท์

Digital Agency Bangkok ได้ออกแบบเว็บไซต์ thestringclass.com ใหม่ให้ใช้งานง่ายขึ้นสำหรับค้นหาคอร์สเรียนที่เหมาะสม ทำความรู้จักกับครูผู้สอน และสมัครทดลองเรียนได้ง่ายผ่านเว็บไซต์ที่ออกแบบให้ใช้งานสะดวกและโหลดรวดเร็ว

ความท้าทายของโครงการ (The Challenge)

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

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

เป้าหมายของโครงการ (Project Goals)

เป้าหมายของเราคือการนำเสนอรายละเอียดคอร์สเรียนทุกประเภทให้ชัดเจน พร้อมสร้างความน่าเชื่อถือผ่านการแนะนำครูผู้สอนแต่ละคน

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

แนวทางการพัฒนาเว็บไซต์ (Our Solution)

ออกแบบและพัฒนาเว็บไซต์ใหม่ (A Redesigned Website)

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

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

แบบฟอร์มลงทะเบียนเรียน (Web Forms)

เราเพิ่มแบบฟอร์มลงทะเบียนทดลองเรียนไว้บนหน้าแรกโดยตรง พร้อมสร้างหน้าแยกสำหรับลงทะเบียนคอร์สเรียนและทดลองเรียนโดยเฉพาะ

แบบฟอร์มรวบรวมข้อมูลที่จำเป็นสำหรับการติดต่อกลับ ได้แก่

• ชื่อและนามสกุล
• อีเมล
• หมายเลขโทรศัพท์
• LINE ID
• รูปแบบการเรียนที่ต้องการ (เรียนที่บ้าน เรียนออนไลน์ หรือเลือกเรียนที่สตูดิโอทั้ง 2 สาขา)
• ประเภทเครื่องดนตรีที่สนใจ
• วันที่และช่วงเวลาที่ต้องการเริ่มเรียน
• เป้าหมายในการเรียนหรือแนวเพลงที่ชื่นชอบ

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

คอร์สเรียนออนไลน์ (Online Course)

เราออกแบบหน้า Online Course แยกโดยเฉพาะ เพื่ออธิบายรูปแบบการเรียนแบบตัวต่อตัวผ่านวิดีโอคอลแบบ Live ช่วยให้ผู้ที่อยู่นอกพื้นที่ให้บริการสอนที่บ้าน หรือผู้ที่มีตารางเวลาไม่แน่นอน สามารถทำความเข้าใจรูปแบบการเรียนและเห็นโอกาสในการเรียนดนตรีได้จากทุกที่

แนะนำครูผู้สอน (Teacher Introductions)

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

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

ปรับปรุงความเร็วเว็บไซต์ (Website Speed)

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

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

เชื่อมต่อ Google Maps และแสดงตำแหน่งสาขา (Google Location Map)

The String Class มีสตูดิโอสำหรับเรียนดนตรี 2 สาขา และยังให้บริการสอนที่บ้านในหลายพื้นที่ของกรุงเทพฯ ทำให้ข้อมูลสถานที่และพื้นที่ให้บริการเป็นสิ่งที่ผู้สนใจต้องการทราบอยู่เสมอ

เราจึงเพิ่มลิงก์ Google Maps เพื่อให้ผู้เข้าชมสามารถค้นหาตำแหน่งสตูดิโอและวางแผนการเดินทางได้สะดวก พร้อมแสดงคำแนะนำการเดินทางด้วย BTS และรถยนต์ รวมถึงระบุพื้นที่ที่สามารถให้บริการสอนที่บ้านได้อย่างชัดเจน ช่วยให้นักเรียนสามารถตรวจสอบได้ก่อนสมัครเรียนว่ามีสาขาใกล้บ้านหรือสามารถเลือกเรียนที่บ้านในพื้นที่ของตนเองได้หรือไม่

ระบบจัดการเนื้อหาเว็บไซต์ (Content Management System)

เว็บไซต์พัฒนาด้วย WordPress ร่วมกับ Elementor ทำให้ทีมงาน The String Class สามารถจัดการและอัปเดตเนื้อหาได้ด้วยตนเอง โดยไม่จำเป็นต้องแก้ไขโค้ด ไม่ว่าจะเป็นการเพิ่มโปรไฟล์ครูผู้สอนใหม่ อัปเดตข้อมูลคอร์สเรียน เผยแพร่บทความ หรือเปลี่ยนแบนเนอร์ประชาสัมพันธ์ ก็สามารถดำเนินการได้ตามต้องการ

ระบบนี้ช่วยให้เว็บไซต์มีข้อมูลที่ทันสมัยอยู่เสมอ รองรับการขยายทีมครูและเพิ่มคอร์สเรียนในอนาคต นอกจากนี้ บล็อกของเว็บไซต์ยังเป็นช่องทางสำหรับเผยแพร่บทความให้ความรู้เกี่ยวกับดนตรี เช่น วิธีอ่านตารางคอร์ดกีตาร์ (Guitar Chord Charts) และระบบ CAGED เพื่อสร้างเนื้อหาที่เป็นประโยชน์ให้กับผู้เรียนอย่างต่อเนื่อง

ผลลัพธ์ของโครงการ (Results)

เว็บไซต์ใหม่ช่วยให้ The String Class มีแพลตฟอร์มออนไลน์ที่รวบรวมข้อมูลคอร์สเรียน ครูผู้สอน และระบบลงทะเบียนไว้ในที่เดียวอย่างเป็นระเบียบ

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