UI/UX Design Project
🌸 🌷 💐 🌹 🌼

ร้านดอกไม้ออนไลน์
เว็บสั่งซื้อและจัดส่งช่อดอกไม้

🌻 สั่งช่อดอกไม้ออนไลน์ ออกแบบเองได้ ส่งตรงถึงคนพิเศษ

Figma UI/UX Design E-commerce Buyer Portal Seller Portal

🌸 ปัญหาที่เจอ

ทำไมการสั่งดอกไม้ออนไลน์ในไทยถึงยังไม่ง่ายอย่างที่ควรจะเป็น?

อยากส่งดอกไม้ให้แฟนวันเกิด แต่ต้อง DM ร้านทีละร้าน รอตอบทีละคน เลือกจากแบบที่ร้านมี ไม่ได้เลือกสีหรือดอกที่อยากได้ สุดท้ายไม่รู้ด้วยซ้ำว่าดอกไม้ถึงหรือยัง

-- Insight จากการพูดคุยกับผู้ใช้จริง

ต้อง Chat หาร้านเอง ไม่มีระบบสั่งซื้อ

ร้านดอกไม้ส่วนใหญ่ขายผ่าน Social Media ลูกค้าต้อง DM ทีละร้าน รอตอบ รอราคา รอยืนยัน ไม่มีหน้าเว็บให้กดสั่งได้เลย

Customize ช่อดอกไม้ไม่ได้

ต้องเลือกจากแบบที่ร้านทำไว้เท่านั้น อยากเปลี่ยนสี เพิ่มดอก หรือเลือกขนาดเอง ทำไม่ได้ ได้แต่บอกร้าน "ขอคล้ายๆ แบบนี้"

ร้านเล็กไม่มี Platform จัดการ

ร้านดอกไม้เล็กๆ ใช้ Excel จดออเดอร์ นับสต็อกดอกไม้ด้วยมือ พอออเดอร์เยอะก็สับสน ตกหล่น ลูกค้าไม่ได้ดอกไม้ตามเวลา

ไม่มีระบบ Tracking การจัดส่ง

สั่งดอกไม้แล้วไม่รู้ว่าถึงหรือยัง อยากส่งเซอร์ไพรส์แต่ต้องโทรถามร้านเอง ร้านก็ต้องโทรถาม rider เสียเวลาทุกฝ่าย


💡 วิธีแก้ปัญหา

ออกแบบ 2 Portals ให้ทั้งคนซื้อและคนขายได้ประสบการณ์ที่ดีที่สุด

Buyer Portal -- สั่งซื้อ + Customize ได้เลย

เว็บที่ลูกค้าสั่งช่อดอกไม้ได้ทันที เลือกดอก เลือกสี กำหนดขนาด เพิ่มการ์ดข้อความ เลือกวันส่ง ทั้งหมดทำได้บนหน้าจอเดียว ไม่ต้อง DM ใคร

Seller Portal -- จัดการร้านครบจบ

Dashboard สำหรับร้านดอกไม้ ดูยอดขาย รับออเดอร์ จัดการสต็อกดอกไม้ ดูรายงานรายได้ ทั้งหมดในที่เดียว ไม่ต้อง Excel อีกต่อไป

Real-time Order Tracking

ทั้งลูกค้าและร้านเห็น status ออเดอร์แบบ real-time ตั้งแต่รับออเดอร์ จัดช่อ ออกส่ง จนถึงมือผู้รับ สร้าง trust ให้ทุกฝ่าย

Flower Customization UX

ออกแบบ UX ให้ลูกค้า customize ช่อดอกไม้ได้ง่าย ใช้ Progressive Disclosure ค่อยๆ เลือกทีละขั้น ไม่ overwhelming แม้มีตัวเลือกเยอะ


🎨 สิ่งที่สร้าง

ออกแบบ UI/UX ครบทั้ง 2 Portals ใน Figma กด Tab เพื่อดู Features

Buyer Portal -- ประสบการณ์สั่งดอกไม้แบบใหม่

  • 🌻 เลือกช่อดอกไม้สำเร็จรูป
  • 🎨 Customize ช่อเอง (ดอก/สี/ขนาด)
  • 💌 เพิ่มการ์ดข้อความส่วนตัว
  • 📅 เลือกวันส่ง + ช่วงเวลา
  • 💳 Payment หลายช่องทาง
  • 📦 Order Tracking แบบ real-time
  • 🔄 สั่งซ้ำจากประวัติ
  • Review + Rating ร้านดอกไม้

🎨 ตัวอย่าง Flower Customizer

เลือกดอกไม้
🌹 กุหลาบ 🌷 ทิวลิป 🌼 ซากุระ 🌻 ทานตะวัน
เลือกสีโทน
ขนาดช่อ
S M L XL
เพิ่มเติม
💌 การ์ด 🎁 กล่อง 🧷 ริบบิ้น
💐
ช่อกุหลาบชมพู ขนาด M + การ์ดข้อความ
฿890

Seller Portal -- จัดการร้านดอกไม้ครบจบ

  • 📊 Dashboard ยอดขาย + รายได้
  • 🌸 จัดการสินค้า (เพิ่ม/แก้/ลบ)
  • 📦 จัดการออเดอร์ (รับ/จัด/ส่ง)
  • 📦 สต็อกวัตถุดิบ (ดอกไม้แต่ละชนิด)
  • 💰 รายงานรายได้ + สถิติ
  • 🔔 แจ้งเตือนออเดอร์ใหม่
  • ดู Review จากลูกค้า
  • ⚙️ ตั้งค่าร้าน + เวลาเปิด-ปิด

📊 ตัวอย่าง Seller Dashboard

💰
฿12,450
รายได้วันนี้
▲ 18%
📦
8
ออเดอร์วันนี้
▲ 3 จากเมื่อวาน
4.8
Rating เฉลี่ย
จาก 156 รีวิว
ยอดขาย 7 วันล่าสุด
พฤอา
📦 ออเดอร์ล่าสุด
#VB-0047
ช่อกุหลาบแดง XL + การ์ด
รอรับ
#VB-0046
ช่อทิวลิปชมพู M
กำลังจัด
#VB-0045
ช่อทานตะวัน L + กล่อง
กำลังส่ง
#VB-0044
ช่อดอกซากุระ S
ส่งแล้ว

Order Flow

👩
ลูกค้า
สั่งช่อ
💳
ชำระ
เงิน
🌱
ร้าน
รับออเดอร์
💐
จัดช่อ
ดอกไม้
🚚
ออก
จัดส่ง
💕
ถึงมือ
คนพิเศษ

Key Screens ที่ออกแบบ

🏠

Home + Browse

หน้าแรก แสดงช่อยอดนิยม หมวดหมู่ โปรโมชัน

🎨

Flower Customizer

เลือกดอก สี ขนาด ห่อ การ์ด ออกแบบช่อเอง

🛒

Cart + Checkout

ตะกร้า เลือกวันส่ง ที่อยู่ ชำระเงิน

📦

Order Tracking

ติดตามสถานะ real-time ตั้งแต่สั่งจนถึงมือ

📊

Seller Dashboard

ยอดขาย รายได้ ออเดอร์วันนี้ กราฟสถิติ

🌸

Product Management

เพิ่ม แก้ไข ลบช่อดอกไม้ จัดการหมวดหมู่

📋

Order Management

รับออเดอร์ อัปเดตสถานะ จัดการการจัดส่ง

🌱

Inventory

สต็อกดอกไม้แต่ละชนิด แจ้งเตือนใกล้หมด


📚 Key Takeaways

สิ่งที่ได้เรียนรู้จากการออกแบบ ร้านดอกไม้ออนไลน์

ออกแบบ 2 ฝั่งพร้อมกัน เหมือนออกแบบ "เหรียญ 2 ด้าน":

ตอนแรกโฟกัส Buyer Portal อย่างเดียว ทำสวยมาก แต่พอเริ่มทำ Seller Portal ถึงรู้ว่าฟีเจอร์บางอย่างที่ Buyer ใช้สะดวก กลับทำให้ Seller ทำงานยากขึ้น เช่น "เลือกเวลาส่งได้ทุกช่วง" ฟังดูดีสำหรับลูกค้า แต่ร้านดอกไม้มีเวลาจัดช่อจำกัด — บทเรียนคือ ต้องคิดทั้ง 2 ฝั่งตั้งแต่ต้น ไม่ใช่ทำทีหลัง

"เลือกดอก → เลือกสี → เลือกขนาด" — ง่ายแค่ 3 คลิก ได้ช่อที่ใช่:

ตอน wireframe แรก ยัดทุก option ลงหน้าเดียว — ดอก 15 ชนิด, สี 8 สี, ขนาด 4 แบบ, ห่อ 3 แบบ, การ์ด, ริบบิ้น... ลูกค้าดูแล้วงง ไม่รู้จะเริ่มจากไหน พอเปลี่ยนเป็น Progressive Disclosure ค่อยๆ โชว์ทีละ step พร้อม preview สดๆ ว่าช่อจะหน้าตาเป็นยังไง — user test ผ่านฉลุย คนชอบมากเพราะรู้สึกเหมือน "สร้างช่อดอกไม้ของตัวเอง"

Dashboard ที่ดีไม่ได้โชว์ "ตัวเลข" แต่โชว์ "สิ่งที่ต้องทำต่อ":

เวอร์ชันแรกของ Seller Dashboard มีกราฟสวยมาก — รายได้รายเดือน, ยอดขายเปรียบเทียบ, funnel chart... แต่ร้านดอกไม้ตื่นมาตอน 6 โมงเช้า มีเวลาแป๊บเดียวก่อนลูกค้าสั่ง ไม่ได้นั่งวิเคราะห์ data พอเปลี่ยนหน้าแรกเป็น "3 ออเดอร์รอรับ / 2 ออเดอร์กำลังจัด / ดอกกุหลาบเหลือ 12 ดอก" — ร้านรู้เลยว่าต้องทำอะไรก่อน

ดอกไม้ไม่เหมือนพัสดุ — "ถึงตอนไหน" สำคัญกว่า "ถึงหรือยัง":

ส่งพัสดุช้าไป 1 วันก็ไม่เป็นไร แต่ดอกไม้วันเกิดถ้าถึงหลังเที่ยงคืน = เสียทุกอย่าง Order Tracking ที่ดีต้องบอก "ช่อกำลังจัด → กำลังส่ง → ถึงใน 30 นาที" ให้ทั้งคนส่งและคนรับรู้ — โดยเฉพาะออเดอร์เซอร์ไพรส์ ลูกค้าอยากรู้ว่าดอกไม้ถึงมือคนรับ moment ไหน เพื่อโทรอวยพรตามหลังได้พอดี

Design System เดียว แต่ "บุคลิก" ต่างกันได้:

Buyer Portal ต้องดูสวย อบอุ่น รู้สึกเหมือนเดินเข้าร้านดอกไม้ แต่ Seller Portal ต้อง clean, functional, ใช้งานเร็ว — ทั้งสองฝั่งใช้ Component Library เดียวกัน (ปุ่ม, การ์ด, input, spacing) แต่เปลี่ยนสี เปลี่ยน layout ผลคือรู้สึกเป็น "แพลตฟอร์มเดียวกัน" แม้หน้าตาต่าง — Design System ที่ดีไม่ได้แปลว่าทุกหน้าต้องเหมือนกัน แต่ต้อง "เป็นญาติกัน"

30+
หน้าจอที่ออกแบบ
2
Portals
5
User Flows หลัก
100+
Components
Aw mascot

🌸 ส่งดอกไม้ ส่งความรู้สึก

ร้านดอกไม้ออนไลน์ ไม่ใช่แค่ร้านดอกไม้ออนไลน์ แต่เป็นการออกแบบประสบการณ์ที่ทำให้ "การส่งดอกไม้ถึงคนพิเศษ" เป็นเรื่องง่ายและมีความหมาย

Figma UI/UX Design E-commerce Design System 2 Portals
Projects