Payload
ภาพรวมโปรเจกต์
KTC Invitation-Only Credit Cards เป็นกลุ่มหน้าผลิตภัณฑ์สำหรับบัตรเครดิตระดับพรีเมียมแบบเรียนเชิญจำนวน 10 ใบ ครอบคลุมบัตรจากเครือข่ายและพันธมิตรหลายประเภท โดยแต่ละหน้ารวบรวมข้อมูลเกี่ยวกับคะแนนสะสม บริการห้องรับรองในสนามบิน สิทธิประโยชน์ด้านการเดินทาง ร้านอาหาร การช้อปปิ้ง ประกันภัย ค่าธรรมเนียม และเงื่อนไขเฉพาะของบัตร
ผมรับผิดชอบการพัฒนา Front-end สำหรับเว็บไซต์ KTC เวอร์ชันเดิมบนระบบ Magento โดยนำดีไซน์ที่ได้รับจากทีมออกแบบมาพัฒนาเป็นหน้าผลิตภัณฑ์ที่ใช้งานได้จริง รองรับ Responsive Design และข้อมูลที่แตกต่างกันของบัตรทั้ง 10 ใบ
ขอบเขตงาน
รับผิดชอบการพัฒนาโครงสร้างและส่วนแสดงผลด้วย HTML, CSS และ JavaScript ตั้งแต่ Hero Section, ภาพและข้อมูลบัตร, คะแนนสะสม, สิทธิประโยชน์หลัก, บริการห้องรับรองในสนามบิน, รายละเอียดค่าธรรมเนียม, ประกันการเดินทาง, เงื่อนไขการรับสิทธิ์ และ Interactive Components สำหรับแสดงข้อมูลเพิ่มเติม
พัฒนาโครงสร้าง Front-end ที่สามารถนำกลับมาใช้ร่วมกันในหน้าบัตรหลายใบ โดยปรับเปลี่ยนข้อความ ภาพ สี และลำดับของ Content Section ให้เหมาะกับสิทธิประโยชน์ของบัตรแต่ละประเภท พร้อมปรับการแสดงผลสำหรับ Desktop, Tablet และ Mobile
ความท้าทาย
ความท้าทายหลักของโปรเจกต์คือการพัฒนาโครงสร้างร่วมกันให้รองรับหน้าผลิตภัณฑ์จำนวน 10 หน้า ซึ่งมีรูปแบบโดยรวมใกล้เคียงกัน แต่มีจำนวน Section เนื้อหา ภาพประกอบ สิทธิประโยชน์ และเงื่อนไขแตกต่างกันในแต่ละบัตร
โครงสร้างจึงต้องมีความยืดหยุ่นเพียงพอสำหรับการเพิ่ม ลด หรือสลับลำดับ Section โดยไม่ทำให้ Layout ของหน้าอื่นได้รับผลกระทบ ขณะเดียวกันยังต้องรักษามาตรฐานของ Spacing, Typography, Card Layout และ Visual Hierarchy ให้มีความสอดคล้องกันตลอดทั้งกลุ่มผลิตภัณฑ์
นอกจากนี้ เนื้อหาบางส่วนมีรายละเอียดและเงื่อนไขค่อนข้างมาก จึงต้องจัดการ Responsive Layout และ Interactive Components ให้ผู้ใช้งานสามารถอ่านและเข้าถึงข้อมูลได้สะดวกบนหน้าจอทุกขนาด
ผลลัพธ์
หน้าผลิตภัณฑ์บัตรเครดิตแบบเรียนเชิญทั้ง 10 ใบได้รับการพัฒนาบนโครงสร้าง Front-end ที่เป็นมาตรฐานเดียวกัน แต่ยังสามารถนำเสนอเอกลักษณ์และสิทธิประโยชน์เฉพาะของบัตรแต่ละใบได้อย่างเหมาะสม
โครงสร้างที่ยืดหยุ่นช่วยให้สามารถจัดการ Content Variation ของแต่ละหน้าได้ พร้อมการแสดงผลแบบ Responsive ซึ่งทำให้ผู้ใช้งานตรวจสอบรายละเอียดบัตร เปรียบเทียบสิทธิประโยชน์ และศึกษาเงื่อนไขต่าง ๆ ได้สะดวกบนอุปกรณ์หลายประเภท
เยี่ยมชมผลงานทั้งหมด
KTC VISA INFINITE
KTC WORLD MASTERCARD
KTC UNIONPAY ASIA PRESTIGE DIAMOND
KTC - FICO VISA INFINITE
KTC - ROYAL ORCHID PLUS VISA INFINITE
KTC - ROYAL ORCHID PLUS WORLD MASTERCARD
KTC - KTB PRECIOUS PLUS VISA INFINITE
KTC - KRUNGTHAI PRIVATE BANKING VISA INFINITE
KTC - KRUNGTHAI PRECIOUS +
KTC - KRUNGTHAI ICONIC