Magento
ภาพรวมโปรเจกต์
Points to Travel เป็นหน้ารวบรวมข้อมูลเกี่ยวกับการโอนคะแนน KTC FOREVER ไปเป็นไมล์สายการบินหรือคะแนนสะสมของเครือโรงแรมชั้นนำ ผู้ใช้งานสามารถตรวจสอบรายชื่อพันธมิตร อัตราการโอนคะแนน ช่องทางการแลก ขั้นตอนการทำรายการผ่าน KTC Mobile และคำถามที่พบบ่อยได้ภายในหน้าเดียว
ผมรับผิดชอบการพัฒนา Front-end สำหรับเว็บไซต์ KTC เวอร์ชันเดิมบนระบบ Magento โดยนำดีไซน์ที่ได้รับจากทีมออกแบบมาพัฒนาเป็นหน้าเว็บที่ใช้งานได้จริง รองรับ Responsive Design และการแสดงผลบนอุปกรณ์หลายขนาด
ขอบเขตงาน
รับผิดชอบการพัฒนาโครงสร้างและส่วนแสดงผลของหน้าเว็บด้วย HTML, CSS และ JavaScript รวมถึงการจัดวาง Hero Banner, รายชื่อพันธมิตร, Card แสดงอัตราการโอนคะแนน, Tab แยกหมวดหมู่, ช่องทางการแลกคะแนน, ขั้นตอนการทำรายการ และ Accordion สำหรับคำถามที่พบบ่อย
ปรับรูปแบบการแสดงผลสำหรับ Desktop, Tablet และ Mobile พร้อมตรวจสอบความถูกต้องของ Layout, Spacing, Typography และ Interactive Components ให้สอดคล้องกับดีไซน์ที่ได้รับก่อนนำขึ้นใช้งานจริง
ความท้าทาย
ความท้าทายของโปรเจกต์นี้คือการนำเสนอข้อมูลของพันธมิตรจำนวนมาก ซึ่งแต่ละรายการมีโลโก้ อัตราการโอนคะแนน รายละเอียด และเงื่อนไขที่แตกต่างกัน จึงต้องออกแบบโครงสร้าง Front-end ให้รองรับข้อมูลที่มีความหลากหลาย โดยยังคงรูปแบบของ Card และการจัดวางเนื้อหาให้เป็นมาตรฐานเดียวกัน
นอกจากนี้ยังต้องปรับ Grid, Tab และองค์ประกอบต่าง ๆ ให้เหมาะสมกับหน้าจอหลายขนาด เพื่อให้ข้อมูลยังคงอ่านง่ายและสามารถเปรียบเทียบอัตราการโอนคะแนนได้สะดวกทั้งบน Desktop และ Mobile
ผลลัพธ์
หน้าเว็บได้รับการพัฒนาให้รวบรวมข้อมูลการโอนคะแนน KTC FOREVER ไปยังพันธมิตรด้านการเดินทางไว้ภายในหน้าเดียว พร้อมโครงสร้างเนื้อหาที่เป็นระบบและการแสดงผลที่เหมาะสมกับอุปกรณ์หลายขนาด ช่วยให้ผู้ใช้งานค้นหาพันธมิตร ตรวจสอบอัตราการโอนคะแนน และศึกษาขั้นตอนการทำรายการได้สะดวก
ภายหลังเว็บไซต์ KTC มีการย้าย CMS และพัฒนาหน้าเว็บขึ้นใหม่ Implementation ปัจจุบันจึงไม่ใช่โค้ดชุดเดียวกับผลงานที่นำเสนอใน Case Study นี้ แม้ว่าหน้าเว็บไซต์จะยังคงใช้แนวทางการออกแบบเดิมอยู่ก็ตาม