งานวิชาการ·2025
Chalapao
CS251 Database Systems 1: แพลตฟอร์มปล่อยเช่า–เช่าของออนไลน์
- บทบาท
- UX/UI Designer & Frontend Developer
- ทีม
- Group Project
- ปี
- 2025
ตัวเลขสำคัญ
- 2
- บทบาทผู้ใช้
- 5
- หน้าหลักของระบบ
- Figma
- ออกแบบด้วย
- CS251
- รายวิชา
เว็บแอปพลิเคชันสำหรับเป็นแพลตฟอร์มให้ผู้ใช้งานสามารถ “ปล่อยเช่า” และ “เช่า” อุปกรณ์หรือสิ่งของออนไลน์ได้อย่างเป็นระบบ ครอบคลุมตั้งแต่การลงประกาศ การค้นหาและดูรายละเอียดสินค้า การส่งคำขอเช่า ไปจนถึงการติดตามสถานะรายการ โดยโปรเจกต์นี้มุ่งเน้นการออกแบบประสบการณ์ใช้งาน (UX) และการไหลของระบบ (User Flow) ให้ชัดเจนสำหรับผู้ใช้ทั้งสองฝั่ง เพื่อให้การเช่า–ปล่อยเช่าทำได้ง่าย เข้าใจตรงกัน และลดความสับสนในกระบวนการใช้งาน
โจทย์และปัญหา
- 01การเช่า–ปล่อยเช่าแบบไม่เป็นระบบทำให้การสื่อสารคลาดเคลื่อน ติดตามสถานะยาก และมีความเสี่ยงต่อความผิดพลาด
- 02ผู้เช่าต้องการมองเห็นรายการที่พร้อมให้เช่า พร้อมรายละเอียดและเงื่อนไขที่ชัดเจน ก่อนตัดสินใจ
- 03ผู้ปล่อยเช่าต้องการช่องทางจัดการรายการของตนเองและติดตามคำขอเช่าได้สะดวก
- 04การออกแบบ UX สำหรับผู้ใช้ 2 บทบาท (ผู้ปล่อยเช่า/ผู้เช่า) จำเป็นต้องมี Flow ที่สอดคล้องกันและใช้งานได้จริง
วิธีแก้
- 01ออกแบบ UX/UI ด้วย Figma โดยเริ่มจากกำหนด Persona, User Journey และ System Flow เพื่อจัดลำดับขั้นตอนการใช้งานให้เป็นธรรมชาติ
- 02วางโครงสร้างหน้าหลักของระบบ เช่น หน้ารายการสินค้า หน้ารายละเอียด หน้าลงประกาศ หน้าคำขอเช่า และหน้าติดตามสถานะ เพื่อให้ผู้ใช้เข้าใจเส้นทางการใช้งานตั้งแต่ต้นจนจบ
- 03พัฒนา Frontend ด้วย React และ Tailwind เพื่อให้ UI สอดคล้องกับแบบจาก Figma และรองรับการใช้งานบนอุปกรณ์หลากหลาย
- 04เชื่อมต่อกับ Backend (Node.js) เพื่อรองรับการทำงานของฟีเจอร์หลัก เช่น การแสดงรายการ การส่งคำขอ และการอัปเดตสถานะรายการ
ผลลัพธ์
- 01ได้ต้นแบบแพลตฟอร์มเช่า–ปล่อยเช่าที่มีขั้นตอนการใช้งานชัดเจน รองรับผู้ใช้สองบทบาทได้อย่างเป็นระบบ
- 02ผู้ใช้สามารถค้นหาและดูรายละเอียดสินค้าได้สะดวก พร้อมส่งคำขอเช่าและติดตามสถานะรายการได้
- 03ผู้ปล่อยเช่าสามารถจัดการรายการของตนเองและตรวจสอบคำขอเช่าได้ง่ายขึ้นผ่านโครงสร้างหน้าที่ออกแบบไว้
แกลเลอรี
Main
16:9 / MD
ภาพ UI หน้าเข้าสู่ระบบ
ภาพ UI หน้าลงทะเบียนสมัครสมาชิก
ภาพ UI หน้าฟีดรายการสินค้า
ภาพ UI หน้ารายละเอียดสินค้า
ภาพ UI หน้าแสดงรายละเอียดสินค้าก่อนจอง
ภาพ UI หน้าขั้นตอนการจองรอผู้ปล่อยเช่ายืนยัน
ภาพ UI หน้าการชำระเงิน
ภาพ UI หน้าแจ้งว่าการเช่าสำเร็จ
ภาพ UI หน้าโปรไฟล์ของฉัน
ภาพ UI หน้าร้านปล่อยเช่าของฉัน
ภาพ UI การรีวิวสินค้า/การเช่า
ภาพ UI หน้าจัดการสินค้าปล่อยเช่า
ภาพ UI หน้ารายละเอียดการปล่อยเช่า
ภาพ UI หน้าร้านปล่อยเช่า
ภาพ UI หน้ายืนยันการคืนสินค้า
ทบทวนโปรเจกต์
ความท้าทาย
- การออกแบบ Flow ให้ครอบคลุมขั้นตอนสำคัญของทั้งผู้เช่าและผู้ปล่อยเช่า โดยยังคงความเรียบง่ายและไม่ซับซ้อน
- การทำให้ UI/UX สื่อสารสถานะและขั้นตอนของรายการได้ชัดเจน เพื่อลดความเข้าใจผิดระหว่างผู้ใช้งาน
- การพัฒนา Frontend ให้ใกล้เคียงกับดีไซน์ใน Figma และรองรับ Responsive ได้ดีภายใต้เวลาที่จำกัด
สิ่งที่เรียนรู้
- กระบวนการออกแบบ UX แบบเป็นระบบ ตั้งแต่การทำ Flow, Wireframe ไปจนถึง UI Design บน Figma
- การพัฒนา Frontend ด้วย React ร่วมกับ Tailwind เพื่อสร้าง UI ที่สม่ำเสมอและปรับขนาดได้ตามอุปกรณ์
- การทำงานร่วมกับ Backend (Node.js) ในมุมของการเชื่อมข้อมูลและจัดการสถานะการทำงานของฟีเจอร์หลัก
- การออกแบบผลิตภัณฑ์ที่มีผู้ใช้หลายบทบาท (Multi-role Product Design) และการกำหนดเส้นทางการใช้งานให้สอดคล้องกัน
สนใจงานแนวนี้?
เล่าโจทย์ของคุณให้ผมฟัง ตอบกลับภายใน 24 ชั่วโมง