พัฒนาประสบการณ์ชำระเงินผ่าน SwatchPAY!

ภาพรวมโปรเจกต์

KTC x SwatchPAY! เป็นหน้าเว็บไซต์ที่ให้ข้อมูลเกี่ยวกับบริการชำระเงินแบบ Contactless ผ่านนาฬิกา Swatch ผู้ใช้งานสามารถศึกษาจุดเด่นของบริการ วิธีเปิดใช้งานผ่านแอปพลิเคชัน รุ่นนาฬิกาที่รองรับ และคำถามที่พบบ่อยได้ภายในหน้าเดียว

ผมรับผิดชอบการพัฒนา Front-end สำหรับเว็บไซต์ KTC เวอร์ชันเดิม โดยนำดีไซน์ที่ได้รับจากทีมออกแบบมาพัฒนาเป็นหน้าเว็บที่ใช้งานได้จริง รองรับ Responsive Design และการแสดงผลบนอุปกรณ์หลายขนาด

ขอบเขตงาน

รับผิดชอบการพัฒนาโครงสร้างและส่วนแสดงผลด้วย HTML, CSS และ JavaScript ตั้งแต่ Hero Banner, Feature Cards, ขั้นตอนการเปิดใช้งาน SwatchPAY!, ส่วนแนะนำการชำระเงินแบบ Contactless, รายการนาฬิกาที่รองรับ, Accordion สำหรับคำถามที่พบบ่อย และส่วน Call to Action สำหรับสมัครบัตรเครดิต KTC

ปรับรูปแบบการแสดงผลสำหรับ Desktop, Tablet และ Mobile พร้อมตรวจสอบ Layout, Spacing, Typography, ภาพประกอบ และ Interactive Components ให้สอดคล้องกับดีไซน์ที่ได้รับก่อนนำขึ้นใช้งานจริง

ความท้าทาย

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

อีกส่วนหนึ่งคือการจัดการ Section ที่มีรูปแบบแตกต่างกัน ทั้ง Grid ของ Feature Cards, ขั้นตอนการเปิดใช้งาน, การจัดวางภาพและข้อความแบบสองคอลัมน์, รายการรุ่นนาฬิกา และ FAQ Accordion จึงต้องพัฒนาโครงสร้างให้ยืดหยุ่นและปรับเปลี่ยน Layout ได้เหมาะสมในแต่ละ Breakpoint

ผลลัพธ์

หน้าเว็บได้รับการพัฒนาให้สื่อสารข้อมูลเกี่ยวกับ SwatchPAY! ได้ครบถ้วนภายในหน้าเดียว พร้อม Responsive Layout และ Interactive Components ที่ช่วยให้ผู้ใช้งานทำความเข้าใจบริการ ตรวจสอบรุ่นนาฬิกาที่รองรับ และศึกษาขั้นตอนการเปิดใช้งานได้สะดวกบนอุปกรณ์หลายประเภท