🚀 เคสจำลอง · ลูกค้าจำลองโดย Meth (Gemini) · ออกแบบโดย AICE Team
Standard · Phase 2 — Design & Prototype

ผลงานจริง: 10 จอ Hi-fi
+ Prototype กดเล่นได้

จากแผนเฟส 1 สู่ของจริง — แปลงกลยุทธ์ทั้งหมดเป็น Design System + 10 จอ hi-fi ของ LogiFlow ที่ออกแบบมาเพื่อมือพนักงานคลังบน Tablet และผู้บริหารบน Desktop พร้อม prototype ที่คลิกเล่นได้ในหน้านี้จริง

10จอ Hi-fi
สีจริง
1Interactive
Prototype
12+Components
ใช้ซ้ำ
Handoff
specs
เป้า KPI: เวลาจัดออเดอร์ −30%
2 ผู้ใช้: คลัง (Tablet) · เจ้าของ (Desktop)
หัวใจ: Picking flow กันพลาด
Phase 2 · Day 2 deliverable

Persona เต็ม 2 กลุ่ม

ก่อนลงสี เรายืนยันว่ากำลังออกแบบให้ใคร — ทุกจอด้านล่างผูกกลับมาที่ 2 คนนี้

📦
บอย · พนักงานคลัง
26 ปี · ใช้ Tablet ทั้งวัน · ยืนทำงาน เดินหยิบของ
“ออเดอร์เข้ารัวๆ ขอจอที่กดแล้วจบ ไม่ต้องคิดเยอะ ผิดไม่ได้เพราะลูกค้ารอ”
เป้าหมาย
  • หยิบครบ ถูกต้อง เร็ว
  • รู้ว่าของอยู่ช่องไหน (bin)
  • กดยืนยันแล้วมั่นใจ
ความเจ็บ / บริบท
  • จอเดิมเล็ก ปุ่มถี่ กดผิด
  • มือถือของ/ใส่ถุงมือ
  • แสงคลังจ้า มองยาก
📊
คุณเอก · เจ้าของ/ผู้บริหาร
38 ปี · ดู Desktop/มือถือ · ตัดสินใจจากข้อมูล
“ผมอยากเปิดมาแล้วรู้ทันทีว่าวันนี้ธุรกิจเป็นยังไง อะไรต้องรีบจัดการ”
เป้าหมาย
  • ภาพรวมเรียลไทม์ในแวบเดียว
  • เห็นสต็อกใกล้หมดก่อนสาย
  • เชื่อใจตัวเลข = มืออาชีพ
ความเจ็บ / บริบท
  • ข้อมูลกระจัดกระจาย
  • รู้ปัญหาตอนสายเกินแก้
  • กลัว churn จากระบบใช้ยาก
Deliverable · Style Guide + Component

Design System ของ LogiFlow

รากฐานที่ทำให้ 10 จอสม่ำเสมอและส่งต่อ dev ได้ — สี ฟอนต์ และคอมโพเนนต์ที่ใช้ซ้ำทั้งระบบ

สี & ฟอนต์

NavyPrimary
BlueAction/Link
GreenSuccess/Go
AmberWarning
RedUrgent
CloudBG
KANIT · HEADING
ภาพรวมคลังสินค้า
IBM PLEX THAI · BODY/DATA
ตารางออเดอร์ · ตัวเลขอ่านชัดทุกขนาด เหมาะ dashboard
SPACE GROTESK · NUMBERS
1,248 · ฿86,400 · 99.2%

Component Library

Buttonsบันทึก✓ ยืนยันหยิบยกเลิกเตือน
Status badgesเสร็จกำลังหยิบสต็อกต่ำด่วนร่าง
Input · Chips🔍 ค้นหาออเดอร์…ทั้งหมดรอจัด
KPI card
ออเดอร์วันนี้
128
▲ 12% จากเมื่อวาน
เวลาเฉลี่ย/ออเดอร์
3.1 น.
▼ 28% เป้า −30%
The Deliverable · 10 Hi-fi Screens

10 จอที่ออกแบบมาเพื่อสองโลก

ฝั่งผู้บริหารบน Desktop เน้นภาพรวม · ฝั่งคลังบน Tablet เน้นกดเร็ว–กันพลาด · ใช้ design system ชุดเดียวกัน

🖥️ ฝั่งผู้บริหาร · Desktop
01

Dashboard — ภาพรวม

OWNER
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/dashboard
LF
📊
📋
📦
🛒
🔔
⚙️
ภาพรวมวันนี้
ศ. 6 มิ.ย. · อัปเดตเรียลไทม์
🔍 ค้นหา…
ออเดอร์วันนี้
128
▲ 12% จากเมื่อวาน
รอจัดส่ง
24
▲ 6 ค้างนาน
สต็อกใกล้หมด
7
ต้องเติมด่วน
เวลาเฉลี่ย/ออเดอร์
3.1 น.
▼ 28% · เป้า −30%
ออเดอร์ล่าสุด ดูทั้งหมด →
ออเดอร์ลูกค้าสถานะ
#LF-10482ครัวคุณอรกำลังหยิบ
#LF-10481Shopee · ส้มโอรอจัด
#LF-10479Lazada · มินิส่งแล้ว
ต้องจัดการก่อน
🔴
น้ำตาลทราย เหลือ 8 ถุง
ต่ำกว่าจุดสั่งซื้อ · แตะเพื่อเติมสต็อก
🟠
3 ออเดอร์ค้าง > 2 ชม.
เกิน SLA · มอบหมายพนักงานคลัง
อ่านรู้เรื่องในแวบเดียวKPI 4 ตัวบนสุด เห็นสุขภาพธุรกิจทันทีที่เปิด
← Persona: คุณเอก
KPI ผูกกับเป้า“เวลาเฉลี่ย ▼28% · เป้า −30%” โชว์ตรงๆ ว่าดีไซน์ขยับตัวเลขธุรกิจ
← Goal → KPI
Proactive ไม่ตั้งรับ“ต้องจัดการก่อน” ดันปัญหามาหา ก่อนสายเกินแก้
← Pain: รู้ตอนสาย
02

Order List — รายการคำสั่งซื้อ

ทั้งคู่
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/orders
LF
📊
📋
📦
🛒
🔔
⚙️
คำสั่งซื้อ
🔍 ค้นหาออเดอร์/ลูกค้า…
+ สร้างออเดอร์
ทั้งหมด 128รอจัด 32กำลังหยิบ 18ส่งแล้ว 78
ออเดอร์ลูกค้าช่องทางยอดสถานะ
#LF-10482ครัวคุณอรLINE฿1,240กำลังหยิบดู
#LF-10481ส้มโอ คาเฟ่Shopee฿860รอจัดจัดเลย
#LF-10480บ้านขนมป้าLazada฿2,150รอจัดจัดเลย
#LF-10479มินิ มาร์ทหน้าร้าน฿540ส่งแล้วดู
#LF-10478Grab · ครัวกลางGrab฿3,420ส่งแล้วดู
Filter ตามสถานะ + จำนวนเห็นทันทีว่ามีอะไรค้าง แตะกรองได้เร็ว
← Pain: ออเดอร์รัว
Badge สี = สถานะเหลือบมองรู้เลย พร้อมปุ่ม action ตามสถานะ (“จัดเลย”)
← Principle: glanceable
Multi-channel ในที่เดียวLINE/Shopee/Lazada/Grab รวมจบ แก้ pain ข้อมูลกระจาย
← Business context
03

Order Detail — รายละเอียดออเดอร์

ทั้งคู่
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/orders/10482
LF
📊
📋
📦
🛒
🔔
⚙️
← ออเดอร์ #LF-10482
ครัวคุณอร · LINE · 6 มิ.ย. 09:14
กำลังหยิบ
รายการสินค้า (3)
สินค้าBinจำนวน
มะเขือเทศราชินีA-125 กก
น้ำตาลทรายC-0310 ถุง
นมข้นจืดB-2112 กระป๋อง
สถานะ
รับออเดอร์ · 09:14
กำลังหยิบ · บอย
แพ็ก & ส่ง
📦 ส่งไปหยิบของ พิมพ์ใบจัดของ
ครบจบในจอเดียวสินค้า + bin + สถานะ + action ไม่ต้องสลับหน้า
← Principle: 1 จอ 1 งาน
Bin ติดทุกชิ้นพนักงานรู้ตำแหน่งของทันที = หยิบเร็ว ลดเดินวน
← Persona: บอย
Action หลักเด่นชัดปุ่ม “ส่งไปหยิบของ” สีกรม เด่นกว่าปุ่มรอง
← Principle: primary action
04

Inventory Overview — ภาพรวมสต็อก

OWNER
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/inventory
LF
📊
📋
📦
🛒
🔔
⚙️
คลังสินค้า
🔍 ค้นหา SKU…
+ เพิ่มสินค้า
SKU ทั้งหมด
1,248
มูลค่าสต็อก
฿1.86M
ใกล้หมด
7 รายการ
SKUสินค้าBinคงเหลือสถานะ
TMT-001มะเขือเทศราชินีA-12240 กกปกติ
SGR-004น้ำตาลทรายC-038 ถุงต่ำมาก
MLK-012นมข้นจืดB-2136 กระป๋องใกล้หมด
EGG-008ไข่ไก่ เบอร์ 2D-05120 แผงปกติ
เห็นใกล้หมดก่อนสายสถานะสี + KPI “ใกล้หมด 7” ดันให้เติมทัน
← Pain: สต็อกไม่ตรง
Color-coded ชัดเขียว/เหลือง/แดง อ่านสถานะได้โดยไม่ต้องอ่านตัวเลข
← Principle: glanceable
Bin + SKU ครบผูกกับจอ Picking ได้ตรง ลดของหาย/หยิบผิด
← เชื่อมจอ 06–07
09

Alert Center — ศูนย์แจ้งเตือน

OWNER
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/alerts
LF
📊
📋
📦
🛒
🔔
⚙️
แจ้งเตือน
ทั้งหมดยังไม่อ่าน 4
🔴
น้ำตาลทราย (SGR-004) เหลือ 8 ถุง
ต่ำกว่าจุดสั่งซื้อ 20 ถุง · 5 นาทีที่แล้ว
สั่งเติม
🔴
ออเดอร์ #LF-10475 ค้าง 3 ชม.
เกิน SLA 2 ชม. · ยังไม่มีคนรับหยิบ
มอบหมาย
🟠
นมข้นจืด ใกล้ถึงจุดสั่งซื้อ
เหลือ 36 จาก 50 · 1 ชม.ที่แล้ว
ดู
🟢
ปรับสต็อกมะเขือเทศ +200 กก สำเร็จ
โดยบอย · 2 ชม.ที่แล้ว
จัดลำดับความด่วนแดง=ด่วน อยู่บนสุด ไล่ลงเหลือง/เขียว ตา jump ไปจุดสำคัญก่อน
← Principle: glanceable
แตะแก้ได้ทันทีทุก alert มีปุ่ม action (สั่งเติม/มอบหมาย) ไม่ใช่แค่แจ้ง
← Pain: รู้แล้วทำต่อยาก
ยืนยันงานสำเร็จแจ้งเชิงบวกด้วย (เขียว) สร้างความเชื่อใจระบบ
← Goal: ลด churn
📱 ฝั่งคลัง · Tablet 10″ — เน้นกดเร็ว กันพลาด
05

Stock Adjustment — ปรับสต็อก

STAFF
📱 Tablet 10″ Touch
⚙️ ปรับสต็อกบอย · คลัง A
📷 สแกนบาร์โค้ด หรือค้นหา SKU
🧂
น้ำตาลทราย
SGR-004 · ช่อง C-03
คงเหลือ
8 ถุง
จำนวนที่ปรับ
+20
เหตุผล
รับเข้านับใหม่เสียหาย
✓ ยืนยัน · 8 → 28 ถุง
สแกนก่อน พิมพ์ทีหลังลดการพิมพ์ = ลดพลาด + เร็วขึ้น สำหรับมือที่ไม่ว่าง
← Persona: บอย
ปุ่ม +/− ใหญ่แตะแม่นแม้ใส่ถุงมือ ตัวเลขใหญ่อ่านกลางแสงจ้า
← Principle: big tap
เหตุผลบังคับเลือกกันปรับมั่ว + ได้ audit trail ว่าใครปรับเพราะอะไร
← Pain: สต็อกไม่ตรง
06

Picking List — รายการหยิบ

❤️ หัวใจSTAFF
📱 Tablet 10″ Touch
🛒 รายการหยิบ · #LF-10482ครัวคุณอร
หยิบแล้ว 1 จาก 3เหลือ 2 รายการ
🍅
มะเขือเทศราชินี
A-12 หยิบแล้ว
5 กก
🧂
น้ำตาลทราย
C-03 ถัดไป →
10 ถุง
🥫
นมข้นจืด
B-21
12
นำทางด้วย Binเรียงตามเส้นทางเดิน + ป้ายช่องเด่น ลดเดินวน หยิบเร็วขึ้น
← Goal: เวลา −30%
Progress เห็นชัด“1 จาก 3” + แถบ ทำให้รู้ว่าเหลือเท่าไร ไม่หลงลืม
← Principle: glanceable
ทีละรายการชี้ “ถัดไป” ทีละชิ้น ลดภาระความจำ = หัวใจการกันพลาด
← Strategy: confirm flow
07

Picking Confirmation — ยืนยันการหยิบ

❤️ หัวใจSTAFF
📱 Tablet 10″ Touch
✓ ยืนยันการหยิบ (2/3)
🧂
น้ำตาลทราย
ช่อง C-03SGR-004
⚠ ตรวจก่อนยืนยัน
หยิบจากช่อง C-03 จำนวน 10 ถุง
หยิบครบ 10 / 10 ถุง
✓ ยืนยันหยิบครบ
⚠ ของไม่ครบ / มีปัญหา
Confirm — ไม่ให้เดาการ์ดเหลือง “ตรวจก่อนยืนยัน” บังคับเช็ก bin+จำนวน ก่อน commit
← Strategy: กันพลาด
ปุ่มยืนยันใหญ่สุดเขียวเต็มความกว้าง แตะง่าย จบไว — งานหลักของจอนี้
← Principle: 1 จอ 1 งาน
มีทางออกเมื่อพลาดปุ่ม “ของไม่ครบ” กันพนักงานฝืนยืนยันทั้งที่ของขาด
← Pain: สต็อกไม่ตรง
08

Shipping Label — พิมพ์ใบปะหน้า

STAFF
📱 Tablet 10″ Touch
🏷 ใบปะหน้า · #LF-10482
เลือกขนส่ง
FlashKerryJ&Tไปรษณีย์
ผู้รับ
ครัวคุณอร
ทองหล่อ 10 · กทม. 10110
COD ฿1,240
FL 8842 1097 TH
เลือกขนส่งแตะเดียวchip ใหญ่ จำค่าล่าสุด ลดขั้นตอนซ้ำ
← Goal: เวลา −30%
พรีวิวก่อนพิมพ์เห็นที่อยู่+บาร์โค้ด+COD ชัด กันพิมพ์ผิดเสียกระดาษ/เวลา
← Pain: กดผิด
ปิดจบ flowต่อจาก Picking → ส่ง = พนักงานทำจบในเครื่องเดียว
← Flow: end-to-end
⚙️ ใช้ร่วม
10

Settings — ตั้งค่า & โปรไฟล์

ทั้งคู่
🖥️ Desktop Web app
LogiFlowapp.logiflow.co/settings
LF
📊
📋
📦
🛒
🔔
⚙️
ตั้งค่า
โปรไฟล์
คุณเอก ธนกร
เจ้าของ · [email protected]
เจ้าของ
โหมดแสดงผล
Desktop · สบายตาTablet คลัง · ตัวใหญ่
การแจ้งเตือน
สต็อกใกล้หมด
ออเดอร์ค้างเกิน SLA
สรุปรายวันทางอีเมล
Role-basedเจ้าของเห็นการตั้งค่าธุรกิจ · พนักงานเห็นเฉพาะของตัวเอง
← IA: role-based
โหมดแสดงผล 2 densityสลับ Desktop/Tablet ตอบ 2 persona ด้วยระบบเดียว
← 2 personas
Toggle ชัดเจนคอนโทรลมาตรฐาน เข้าใจง่าย ไม่ต้องเทรน
← Principle: clean
Deliverable · Interactive Prototype

ลองกดเล่น Picking flow จริง

นี่คือ prototype หัวใจของงาน — กดผ่าน flow หยิบ→ยืนยัน→เสร็จ ได้จริงในหน้านี้ (ของจริงส่งมอบเป็นไฟล์ Figma กดเล่นได้)

หยิบ → ยืนยัน → เสร็จ

3 จังหวะของพนักงานคลัง ออกแบบให้ กดน้อย พลาดยาก — แต่ละก้าวมีจุดกันพลาดคั่นก่อน commit

👉 แตะปุ่มในแท็บเล็ตเพื่อเดินผ่าน flow

↺ เริ่มเดโมใหม่
🛒Picking · #LF-10482
หยิบแล้ว 1 จาก 3เหลือ 2
🍅
มะเขือเทศ
A-12 หยิบแล้ว
🧂
น้ำตาลทราย
C-03 ถัดไป
10
🥫
นมข้นจืด
B-21
12
🧂
น้ำตาลทราย
ช่อง C-03 · 10 ถุง
⚠ ตรวจก่อนยืนยัน
หยิบจาก C-03 จำนวน 10 ถุง
✓ ยืนยันหยิบครบ
← กลับ
หยิบครบทุกรายการ!
ออเดอร์ #LF-10482 พร้อมแพ็ก & ส่ง
↺ เริ่มใหม่ (เดโม)
Deliverable · Handoff Specs

ส่งต่อ dev ได้ทันที

ไม่ใช่แค่ภาพสวย — แนบ spec, token และ state ครบ ให้ทีม Dev ขึ้นโค้ดตรงตามดีไซน์

Redline · ปุ่มยืนยันหยิบ
✓ ยืนยันหยิบครบ
พื้นหลังcolor/green #1F9D6B
ตัวอักษรKanit 800 · 17px · #FFFFFF
มุมโค้ง / สูงradius 14 · height 56
ระยะขอบในpadding 18 · gap 8
tap target≥ 48px (ผ่าน)

🎨 Design Tokens

สี/ฟอนต์/ระยะ เป็นตัวแปร เช่น --lf-navy --lf-green radius/12 ส่งเป็น JSON/CSS variables

🔁 States ครบทุกปุ่ม

default · hover · pressed · disabled · loading · error — dev ไม่ต้องเดา behavior

📐 Spacing System

ยึด grid 4/8px · density 2 ระดับ (Desktop / Tablet) ระบุชัดต่อ component

📝 Annotation บนทุกจอ

โน้ตพฤติกรรม (empty/loading/มากสุด) + เงื่อนไข แนบในไฟล์ Figma

Wrap-up

ส่งมอบครบแพ็กเกจ Standard

4 วัน · แก้ 3 รอบ · ครบทุกอย่างที่สัญญาไว้ พร้อมให้ทีม Dev ของ LogiFlow ลงมือต่อ

🖥️
10 จอ Hi-fi

สีจริง Tablet+Desktop

▶️
Interactive Prototype

Picking flow กดเล่นได้

🎨
Style Guide + Component

12+ component ใช้ซ้ำ

📋
Handoff Specs

token · state · redline

Done · Standard

งาน Standard เสร็จสมบูรณ์ 🎉

จากโจทย์ → วิเคราะห์ (เฟส 1) → 10 จอ hi-fi + prototype + handoff (เฟส 2) ครบลูป ทุกการตัดสินใจผูกกลับ persona & KPI −30% — พร้อมเทสต์กับพนักงานคลังจริงและส่ง dev

Standard · เสร็จแล้ว ✓ Premium · ขยายเป็น Design System เต็ม 20+ จอ · 14,500฿

เชิญ “คุณเอก” (และ ICE) ตรวจงานแบบจัดเต็มได้เลย — ติตรงไหน แก้ได้ 3 รอบ

🏠 หน้าหลัก
Explore · สำรวจต่อ
🌐 Key sections shown in English — detailed annotations remain in Thai (authentic Thai-market casework). Ask us for an English walkthrough anytime!
AICE Hub🔎 ตรวจ AI ฟรี