BITE NOW — แอปสั่งอาหารเป็นกลุ่ม
แนวคิดแอปมือถือที่ช่วยให้เพื่อน นักศึกษา และทีมงาน สั่งอาหารร่วมกันในออเดอร์เดียว จัดการรายการของแต่ละคน และหารค่าส่งกับค่าบริการได้อย่างชัดเจน ตั้งแต่สร้างกลุ่มจนถึงติดตามการจัดส่ง
UX/UI design exercise ที่ออกแบบจากสมมติฐานที่กำหนดไว้ ยังไม่ได้ทดสอบกับผู้ใช้จริง
โจทย์และบริบท
สมมติฐานของปัญหา: เมื่อต้องสั่งอาหารร่วมกัน คนหนึ่งมักต้องรวบรวมรายการจากหลายช่องทาง ตรวจสอบว่าใครสั่งอะไร และจัดการค่าส่งหรือค่าบริการให้ครบทุกคน
เมนูและหมายเหตุถูกส่งผ่านแชตหลายข้อความ
ต้องคำนวณรายการและค่าใช้จ่ายของแต่ละคนเอง
สมาชิกไม่เห็นว่าออเดอร์อยู่ขั้นตอนไหน
นักศึกษา สั่งอาหารร่วมกันระหว่างเรียน · ทีมทำงาน รวมออเดอร์ช่วงพักกลางวัน · กลุ่มเพื่อน สั่งอาหารมารับประทานร่วมกัน
กลุ่มผู้ใช้นี้กำหนดขึ้นเพื่อใช้เป็นกรอบในการออกแบบ ยังไม่ได้ยืนยันจากการวิจัยผู้ใช้จริง
User Flow
แยกบทบาท โฮสต์ (สร้างกลุ่ม · ตั้งเวลา · ปิดรับออเดอร์ · ยืนยันออเดอร์) และ สมาชิก (เข้าร่วมกลุ่ม · เลือกเมนู · ชำระตามรายการของตน) ออกจากกัน แต่เชื่อมข้อมูลสำคัญไว้ในตะกร้ากลุ่มเดียวกัน
ตั้งชื่อกลุ่ม เวลา และร้านอาหาร
แชร์ลิงก์เพื่อให้สมาชิกเข้าร่วม
สมาชิกเพิ่มรายการและหมายเหตุของตนเอง
คำนวณยอดแต่ละคนและหารค่าธรรมเนียมตามจำนวนรายการ
ทุกคนเห็นสถานะเดียวกันจนจัดส่งสำเร็จ
ลดการเพิ่มรายการหลังเริ่มสรุปออเดอร์
เห็นว่าใครสั่งอะไรและยอดรวมแบบรวมศูนย์
ทำให้กติกาการหารเงินชัดเจนตั้งแต่ก่อนยืนยัน เช่น ค่าส่งและค่าบริการ ฿30 สำหรับ 5 รายการ = ฿6 ต่อรายการ
Design System
ใช้สีและองค์ประกอบซ้ำอย่างสม่ำเสมอ สีส้มใช้กับการกระทำหลัก สีเขียวยืนยันสถานะสำเร็จ สีแดงใช้กับ error ที่ผู้ใช้ดำเนินการต่อไม่ได้ และพื้นครีมช่วยให้งานดูอบอุ่นเหมาะกับบริบทอาหาร
H1 Bold 32 · H2 Semi Bold 24 · H3 Semi Bold 20 · Body 16 · Caption 14 · Button Semi Bold 16 — ใช้ระยะบรรทัด 130% เพื่อลดการชนของสระบนและล่าง และจัดจุดตัดบรรทัดเองเมื่อข้อความไทยยาว
องค์ประกอบหลัก: Primary button · Active category pill · Order status badge · Payment status badge · Grid 4 คอลัมน์ บนหน้าจอ 390 × 844
Key Screens
Final UI มีทั้งหมด 10 หน้าจอ High-fidelity เป็นภาษาไทยทั้งระบบ หน้าจอหลักทั้ง 3 ถูกออกแบบให้ทุกคนเห็นข้อมูลกลุ่มเดียวกัน ตั้งแต่สร้างออเดอร์จนถึงติดตามการจัดส่ง
Edge Cases
นอกจาก happy path ระบบยังต้องบอกสถานะและทางเลือกให้ผู้ใช้เข้าใจได้ เมื่อออเดอร์ไม่ดำเนินไปตามปกติ
สมาชิกไม่สามารถเพิ่มหรือแก้ไขรายการหลังโฮสต์ปิดรับออเดอร์
ระบบตอบสนอง: แสดงเวลาที่ปิดรับ และนำผู้ใช้ไปดูตะกร้ากลุ่มได้
โฮสต์เห็นรายชื่อและยอดของสมาชิกที่ยังไม่ได้ชำระ
ระบบตอบสนอง: ส่งการแจ้งเตือนซ้ำ และยังไม่เปิดปุ่มยืนยันออเดอร์
ระบบแจ้งโฮสต์ก่อนเริ่มเตรียมอาหาร เพื่อป้องกันความสับสนของสมาชิก
ระบบตอบสนอง: ให้โฮสต์เลือกร้านใหม่ หรือดำเนินการคืนเงิน
Prototype & Next Steps
เชื่อม Prototype ใน Figma ให้กดใช้งานได้ตาม flow หลัก: สร้างกลุ่ม → เชิญสมาชิก → เลือกเมนู → ยืนยันออเดอร์ → ติดตามออเดอร์
Reflection
โปรเจกต์นี้เป็นการฝึกออกแบบ product flow ที่มีผู้ใช้หลายคน ข้อมูลร่วมกัน และสถานะการชำระเงินที่ต้องสื่อสารอย่างชัดเจน
การแสดงวิธีหารค่าส่งและค่าบริการตั้งแต่ต้น flow ช่วยให้สมาชิกเข้าใจยอดที่ต้องชำระ
ตะกร้ากลุ่มและหน้าติดตามออเดอร์ช่วยให้ทุกคนเห็นข้อมูลชุดเดียวกันโดยไม่ต้องถามผ่านแชต
การใช้ Prompt ระยะบรรทัด 130% และการจัดจุดตัดบรรทัดเองช่วยให้ข้อความไทยอ่านง่ายบนหน้าจอมือถือ
หากพัฒนาต่อ: ทดสอบ Prototype โดยให้ผู้ใช้ลองสร้างกลุ่มและเพิ่มเมนู → เก็บข้อสังเกตเรื่องความเข้าใจเวลาปิดรับและการหารค่าธรรมเนียม → ปรับปรุง flow ในจุดที่ผู้ใช้สับสนก่อนนำไปพัฒนาจริง
BITE NOW เป็น Personal Concept Project ที่สร้างจากสมมติฐาน จึงยังไม่มีผลการทดสอบผู้ใช้จริง
เครดิตภาพประกอบ
ภาพอาหารในหน้าจอแอปใช้ภาพฟรีจาก Unsplash ภายใต้ Unsplash License