🌱 เคสจำลอง · ลูกค้าจำลองโดย Meth (Gemini) · ออกแบบโดย AICE Team
Basic · Research-led Design

ออกแบบจาก คนจริง
ไม่ใช่จากการเดา

ลูกค้าจำลอง “คุณกานต์” เลือกแพ็กเกจ Basic — แอป FarmLink จับคู่เกษตรกรกับร้านอาหาร. Express เน้นเร็ว, Basic เรามีเวลา เลยลงลึกถึง Research: 2 Persona, Journey, IA แล้วค่อยขึ้น Wireframe ให้ทุกการตัดสินใจมีเหตุผลรองรับ

2User
Personas
5Wireframe
+ Flow
1วัน
ส่งมอบ
2,500฿เริ่มต้น
· แก้ 2 ครั้ง
🧭หัวใจ Basic: “เริ่มถูกทาง ด้วย research จริง ไม่เดา” — ผู้ใช้ 2 กลุ่มต่างขั้ว (เกษตรกรสูงวัย vs เชฟเร่งรีบ) ต้องไม่ออกแบบแบบ one-size-fits-all
The Brief

โจทย์จากลูกค้า

Meth สวมบทลูกค้าจริง — โปรไฟล์ ปัญหาสองฝั่งของตลาด และข้อความสั่งงานที่ทีมรับมาทำ research ต่อ

คุณกานต์
Founder · FarmLink (Farm-to-Table Marketplace)
ธุรกิจแพลตฟอร์มจับคู่เกษตรกรรายย่อยกับร้านอาหาร/คาเฟ่ · ระยะ MVP กำลังระดมทุน Seed
โจทย์ให้เกษตรกรขายได้ราคาดีขึ้น–ตัดพ่อค้าคนกลาง และร้านอาหารได้วัตถุดิบสด ตรวจสอบคุณภาพได้
ปัญหาแอปในตลาดออกแบบแบบเดียว (one-size-fits-all) → เกษตรกรสูงวัยใช้ยาก / เชฟเร่งรีบก็ไม่ทันใจ
เป้าหมายWireframe ไปพิตช์นักลงทุน + เอาไปเทสต์กับผู้ใช้จริงทั้งสองกลุ่ม
อ้างอิง
GrabFood · สั่งง่ายAirbnb · เล่า story แหล่งที่มา
FASTWORK · ข้อความสั่งงาน
คุณกานต์ — FarmLink “สวัสดีครับคุณนักออกแบบ ผมกานต์นะครับ พอดีผมทำแอป Marketplace เชื่อมเกษตรกรกับร้านอาหาร โจทย์คือต้องทำ UX ให้คนสองกลุ่มนี้ใช้งานง่ายที่สุดโดยไม่สับสนครับ ผมแนบ Persona และรายละเอียด 5 จอไว้ให้แล้ว รบกวนเน้น research พฤติกรรมจริงของกลุ่มผู้สูงอายุและกลุ่มเชฟที่เร่งรีบด้วยนะครับ งานนี้ผมต้องเอาไปพิตช์นักลงทุนต่อ อยากได้ Wireframe ที่ดูแล้วเข้าใจ Flow ทันที และตอบ pain point จริงๆ ครับ”
เมื่อวาน · 09:12 น.
How we worked · 1 วัน

มีเวลา = ทำ research ก่อนวาด

ต่างจาก Express ที่วิ่งเข้าหา wireframe ทันที — Basic ลงทุนกับความเข้าใจผู้ใช้ก่อน ทุกจอที่ส่งจึงตอบ pain ได้จริง ไม่ใช่เดา

STEP 01

Desk Research

สแกนพฤติกรรม 2 กลุ่ม + ถอดแพตเทิร์น GrabFood/Airbnb หา convention ที่ผู้ใช้คุ้นอยู่แล้ว

METH · Sensor
STEP 02

Persona สังเคราะห์

ปั้น 2 persona จากข้อมูล แยก goal/frustration/พฤติกรรม-เทคโนโลยี ให้ทีมยึดเป็นเข็มทิศ

OPUS × LOGY
STEP 03

Pain → Insight

จัดลำดับความเจ็บของแต่ละฝั่ง แปลงเป็น design response ที่วัดได้

OPUS · Reasoning
STEP 04

Journey + IA

วาง journey จุดที่ผู้ใช้หลุด แล้วจัดโครงข้อมูลแบบ role-based ไม่ยัดทุกอย่างหน้าเดียว

OPUS · Reasoning
STEP 05

Wireframe + Flow

ขึ้น 5 จอ ผูกทุกการตัดสินใจกลับไปที่ persona + ส่ง Figma & style direction

OPUS · Executive

หมายเหตุความซื่อตรง: persona นี้สังเคราะห์จากบรีฟ + ความรู้โดเมน (ระดับที่ Basic ส่งได้ใน 1 วัน) พร้อมระบุ “สมมติฐานที่ควรเทสต์กับผู้ใช้จริง” ชัดเจน — ไม่กล่าวอ้างว่าสัมภาษณ์จริง

User Personas

คนสองกลุ่มที่ต่างกันคนละโลก

หัวใจของ Basic — ก่อนวาดจอแรก เรารู้ก่อนว่ากำลังออกแบบให้ใคร ทุก persona จบด้วย “Design Implications” ที่บังคับการตัดสินใจจริง

🧑‍🌾
ลุงสมบูรณ์
54 ปี · เกษตรกรผักอินทรีย์ · นครปฐม
Persona A · ฝั่งผู้ขาย
“ขอแค่ขายได้ราคา ไม่โดนกดราคา แอปมันต้องง่ายเหมือนเล่นไลน์นะ ตัวหนังสือเล็กๆ ลุงมองไม่เห็น”
เป้าหมาย
  • ขายผลผลิตได้ราคาดี ไม่ผ่านพ่อค้าคนกลาง
  • รู้ว่ามีคน “สนใจซื้อจริง” ก่อนเก็บเกี่ยว
  • รับเงินเข้าใจง่าย ไม่ยุ่งยาก
ความเจ็บปวด
  • เมนูซับซ้อน ตัวหนังสือเล็ก (สายตายาว)
  • กลัวลงขายแล้วไม่มีคนซื้อ เสียของ
  • ระบบการเงิน/แอปธนาคารทำให้สับสน
พฤติกรรม & เทคโนโลยี
ใช้ LINE
ถ่ายรูป
คุ้นแอปใหม่
การเงินออนไลน์
→ Design Implications
  • ตัวอักษร ≥18px คอนทราสต์สูง ปุ่มใหญ่กดง่ายกลางแดด
  • Login ด้วย LINE (ไม่ต้องจำรหัส)
  • ลงขาย 3 ขั้น: ถ่ายรูป → ตั้งราคา → โพสต์
  • พูดภาษาชาวบ้าน บอกผลเป็นบาท + การ์ดให้กำลังใจ “มี 3 ร้านกำลังดู”
👩‍🍳
เชฟมิ้นท์
29 ปี · เจ้าของ-เชฟคาเฟ่ · กรุงเทพฯ
Persona B · ฝั่งผู้ซื้อ
“ของต้องสด ตรงสเปก สั่งจบใน 3 คลิก ส่งช้าคือพังทั้งเมนูวันนั้นเลยนะคะ”
เป้าหมาย
  • วัตถุดิบสดใหม่ ตรงสเปกที่สั่ง
  • สั่งซ้ำของประจำได้เร็ว
  • เช็คสถานะการส่งแบบ real-time
ความเจ็บปวด
  • คุณภาพสินค้าไม่ตรงปก
  • จัดส่งล่าช้า กระทบเมนูอาหาร
  • ต้องโทรถามหลายเจ้า เสียเวลา
พฤติกรรม & เทคโนโลยี
สั่งออนไลน์
ดูรูป/รีวิว
คุ้นแอปใหม่
อดทนกับ flow ยาว
→ Design Implications
  • Catalog รูปใหญ่ + filter ไว (ประเภท/ความสด/พร้อมส่ง)
  • Badge เกรด/ความสด + เล่า story แหล่งที่มา (Airbnb-style)
  • Real-time tracking + Reorder ในแตะเดียว
  • โน้ตสเปกถึงเกษตรกรได้ตรง ลดการโทร
Pain → Insight → Design

ความเจ็บปวด แปลงเป็นการตัดสินใจ

จัดลำดับ pain ของทั้งสองฝั่ง แล้วผูกกับ design response ที่จับต้องได้ — นี่คือสิ่งที่ทำให้ wireframe “ไม่เดา”

Pain pointฝั่งลำดับInsightDesign response
ตัวหนังสือเล็ก เมนูซับซ้อนเกษตรกรสูงสายตายาว + ไม่คุ้นแอปType ≥18px, ปุ่มใหญ่, 1 งานต่อ 1 จอ
กลัวลงขายแล้วไม่มีคนซื้อเกษตรกรสูงต้องการความมั่นใจก่อนลงแรงการ์ด “ร้านกำลังดู/สนใจ” + ความต้องการตลาด
การเงินยุ่งยาก สับสนเกษตรกรกลางกลัวเรื่องเงินผิดพลาดWallet ภาษาง่าย สรุปเป็นบาท ปุ่มถอนชัด
คุณภาพไม่ตรงปกเชฟ/ร้านสูงเสี่ยงกับเมนู+ชื่อเสียงร้านBadge เกรด/ความสด + รูปจริง + รีวิวล็อตล่าสุด
ส่งช้า กระทบเมนูเชฟ/ร้านสูงเวลาคือทุกอย่างในครัวTracking real-time + ETA + แจ้งเตือนสถานะ
สั่งซ้ำ/หาเจ้าประจำช้าเชฟ/ร้านกลางความอดทนกับ flow ต่ำReorder 1 แตะ + รายการโปรด + โน้ตสเปกเดิม
Journey Map

เส้นทางที่ผู้ใช้ “หลุด” ตรงไหน

โฟกัสเส้นทางที่ฝืดที่สุดก่อน: เกษตรกรลงขายครั้งแรก — เห็นอารมณ์ จุดเจ็บ และโอกาสออกแบบในแต่ละก้าว

🧑‍🌾 ลุงสมบูรณ์ · ลงขายผลผลิตครั้งแรก
STAGE 01
รู้จัก & สมัคร
🤔
Opportunityสมัครด้วย LINE คลิกเดียว
STAGE 02
ลงขายครั้งแรก
😅
Opportunityแนะราคาตลาด + ถ่าย→ตั้งราคา→โพสต์
STAGE 03
รอผู้ซื้อ
😟
Opportunityแจ้ง “3 ร้านกำลังดู” ลดความกังวล
STAGE 04
ได้ออเดอร์ & แพ็ก
😊
Opportunityเช็กลิสต์แพ็กแบบรูปภาพ ทีละขั้น
STAGE 05
ส่ง & รับเงิน
🤗
OpportunityWallet สรุปเป็นบาท + แจ้งเตือนเงินเข้า
👩‍🍳 เชฟมิ้นท์ · สั่งวัตถุดิบ (เส้นทางสั้น เน้นความเร็ว)

เปิด Catalog

filter ความสด/พร้อมส่ง

เช็ก Detail

เกรด+story+รีวิว

สั่ง 3 คลิก

+โน้ตสเปก

ติดตามสด

ETA real-time

รับ+รีวิว

reorder ไว้คราวหน้า

Information Architecture

โครงข้อมูลแบบ Role-based

คำตอบต่อ “one-size-fits-all”: แยกเส้นทางตั้งแต่ล็อกอิน — แต่ละฝั่งเห็นเฉพาะสิ่งที่ตัวเองต้องใช้ ส่วนกลางใช้ร่วม

FarmLink · เลือกบทบาทตอน Login
🧑‍🌾 ฝั่งเกษตรกร
  • หน้าหลัก · ยอดขายวันนี้
  • ลงขายผลผลิต
  • คำสั่งซื้อเข้า
  • กระเป๋าเงิน / รายได้
👩‍🍳 ฝั่งเชฟ/ร้านอาหาร
  • หน้าหลัก · ออเดอร์วันนี้
  • Catalog / ค้นหา · filter
  • ตะกร้า / สั่งซื้อ
  • ติดตามการส่ง
  • กระเป๋าเงิน
โมดูลใช้ร่วม (Shared)
  • รายละเอียดสินค้า + Story แหล่งที่มา
  • โปรไฟล์
  • แชต / ติดต่อ
  • รีวิว & เรตติง
Wireframes · 5 จอ

โครงจอที่ research ออกแบบให้

ระดับ wireframe (โครง+flow ก่อนลงสี) — ทุกจอมีหมายเหตุว่ามาจาก persona/insight ข้อไหน สีจริงอยู่ในหัวข้อ Style Direction ด้านล่าง

SCREEN 01 · CENTERPIECE

หน้าหลัก — แอปเดียว ปรับตามบทบาท

คำตอบต่อ pain “one-size-fits-all”: เกษตรกรเห็นจอ ใหญ่–ง่าย–1 งานเด่น / เชฟเห็นจอ แน่น–เร็ว–สั่งซ้ำไว

9:41▦ ▮▮▮
🧑‍🌾 โหมดเกษตรกร
สวัสดี ลุงสมบูรณ์
ผักอินทรีย์ · นครปฐม
🔔 วันนี้มี 3 ร้านสนใจผักของลุง
แตะดูว่าใครกำลังมองอยู่
รายได้เดือนนี้
฿12,400
งานหลัก
+ ลงขายผลผลิต
หน้าหลัก
ลงขาย
ออเดอร์
กระเป๋า
9:41▦ ▮▮▮
👩‍🍳 โหมดเชฟ/ร้าน
สวัสดี เชฟมิ้นท์
คาเฟ่ · ทองหล่อ
🔍 ค้นหาวัตถุดิบ…
พร้อมส่งวันนี้ผักผลไม้
สั่งซ้ำล่าสุด
ภาพ
มะเขือเทศราชินี · 5 กก
จากลุงสมบูรณ์
สั่งซ้ำ
กำลังจัดส่ง
ออเดอร์ #FL204 · กำลังมา
ถึงใน ~18 นาที
หน้าหลัก
Catalog
ตะกร้า
ติดตาม
กระเป๋า
🔠

เกษตรกร = ใหญ่ & ง่าย

ตัว 18px, 1 งานเด่น (“ลงขาย”), การ์ดให้กำลังใจ “3 ร้านสนใจ” แก้ pain กลัวไม่มีคนซื้อ

← Persona A · implications

เชฟ = แน่น & เร็ว

Search+filter บนสุด, “สั่งซ้ำ” 1 แตะ, ออเดอร์กำลังส่งพร้อม ETA แก้ pain ความอดทนต่ำ

← Persona B · implications
🧭

เลือกบทบาทตั้งแต่ Login

ไม่ยัดทุกอย่างหน้าเดียว — IA แยกสองสาย ลดความสับสนที่เป็นโจทย์ตั้งต้นของคุณกานต์

← IA · role-based
9:41▦ ▮▮▮
👩‍🍳 เชฟ
Catalog
🔍 ผัก, ผลไม้, สมุนไพร…
พร้อมส่งเกรด Aใกล้ฉันราคา
ผลผลิตวันนี้ · 42 รายการ
ภาพผลผลิต
มะเขือเทศราชินี
ลุงสมบูรณ์ · 4 กม
เกรด A฿45/กก
ภาพผลผลิต
ผักสลัดเคล
ป้าจิ๋ม · 7 กม
สดวันนี้฿60/ถุง
รูปใหญ่นำสายตา + badge เกรด/ความสด ตอบ pain “คุณภาพไม่ตรงปก” ของเชฟ
หน้าหลัก
Catalog
ตะกร้า
ติดตาม
กระเป๋า
Persona B · เชฟมิ้นท์
SCREEN 02

Catalog — รูปนำ ตัดสินใจไว

Filter เด่นบนสุด “พร้อมส่ง/เกรด/ใกล้ฉัน” — เชฟเร่งรีบกรองได้ใน 1 แตะ
การ์ดรูปใหญ่ + badge เกรด/ความสด + ระยะทาง สร้างความมั่นใจเรื่องคุณภาพทันที
ชื่อเกษตรกรติดทุกการ์ด ปูทาง storytelling แบบ Airbnb ตั้งแต่หน้ารวม
9:41▦ ▮▮▮
รายละเอียดสินค้า
ภาพผลผลิต · เลื่อนดูได้ ● ○ ○
มะเขือเทศราชินี ออร์แกนิก
เกรด A
฿45 / กก · เก็บเช้านี้
แหล่งที่มา
👤
สวนลุงสมบูรณ์
นครปฐม · ปลูกอินทรีย์ 12 ปี · ⭐ 4.9
“ปลูกแบบไม่ใช้สารเคมี เก็บตอนเช้าส่งตรงถึงครัวเชฟ”
โน้ตถึงเกษตรกร (สเปก)
เช่น “เอาลูกขนาดกลาง สุกกำลังดี ส่งก่อน 9 โมง”
+ เพิ่มลงตะกร้า
Persona B · ใช้ร่วม A
SCREEN 03

รายละเอียด — เล่า story สร้างความเชื่อใจ

Story แหล่งที่มา (Airbnb-style) โปรไฟล์เกษตรกร+รีวิว แปลง “วัตถุดิบ” เป็น “คนที่ไว้ใจได้”
วันเก็บเกี่ยว + เกรด เด่นข้างราคา ตอบความสด/คุณภาพที่เชฟกังวล
โน้ตสเปกถึงเกษตรกร ลดการโทรถาม — pain “ต้องโทรหลายเจ้า” หายไป
9:41▦ ▮▮▮
ติดตามการส่ง
#FL204
แผนที่ · เส้นทางสวน → ร้าน 🚚
ถึงร้านโดยประมาณ~18 นาที
สถานะ (ภาษาที่ผู้ใช้เข้าใจ)
🌾 เก็บเกี่ยวแล้ว
07:10 · สวนลุงสมบูรณ์
📦 แพ็กเรียบร้อย
08:05
🚚 กำลังส่ง
ออกจากสวน 08:30
🏪 ถึงร้าน
📞 ติดต่อคนส่ง
Persona B · ใช้ร่วม A
SCREEN 04

ติดตามการส่ง — เห็นตามจริง คลายกังวล

Real-time + ETA เด่น ตอบ pain “ส่งช้ากระทบเมนู” โดยตรง — เชฟวางแผนครัวได้
สถานะใช้ภาษาเกษตร “เก็บเกี่ยว → แพ็ก → ส่ง” ตรง mental model ทั้งสองฝั่ง
ปุ่มติดต่อสำรอง มีไว้อุ่นใจ แต่ออกแบบให้ “ไม่ต้องโทร” เป็นค่าเริ่มต้น
9:41▦ ▮▮▮
🧑‍🌾 โหมดเกษตรกร
กระเป๋าเงิน
เงินของลุงตอนนี้
฿8,250
+ ฿1,500 จากออเดอร์เมื่อวาน
ถอนเข้าบัญชี
รายการล่าสุด
ขายมะเขือเทศ · เชฟมิ้นท์
เมื่อวาน 15:40
+฿1,500
ถอนเข้าบัญชี ธ.ก.ส.
2 วันก่อน
−฿5,000
ภาษาเงินแบบชาวบ้าน “เงินของลุง” + ปุ่มถอนใหญ่ชัด ตอบ pain การเงินยุ่งยาก
หน้าหลัก
ลงขาย
ออเดอร์
กระเป๋า
Persona A · ลุงสมบูรณ์
SCREEN 05

กระเป๋าเงิน — เรื่องเงินต้องไม่งง

ยอดเงินตัวใหญ่สุด + ภาษาง่าย “เงินของลุง” ลดความกังวลเรื่องการเงิน
ปุ่ม “ถอนเข้าบัญชี” เดียวเด่น ไม่มีศัพท์การเงินซับซ้อน 1 งานต่อจอ
รายการเข้า-ออกอ่านง่าย สีเขียว=เงินเข้า ชื่อร้านที่ซื้อชัด สร้างความไว้ใจ
Style Direction

ทิศทางสีที่จะลงในขั้นถัดไป

Basic ส่ง wireframe + ทิศทางสไตล์ (ยังไม่ลงสีเต็ม) — Earth tone ตามแบรนด์: สดใหม่ เป็นธรรมชาติ น่าเชื่อถือ พร้อมต่อยอดเป็น hi-fi ใน Standard

พาเลตต์ · Earth Tone

เขียวมะกอก/ใบไม้ = สด-เชื่อถือ · น้ำตาลไม้/ดินเผา = อบอุ่น-งานเกษตร · ครีม = สบายตา

#5B7A3AOlive · Primary
#6FA32BFresh · Success
#8A5A33Wood · Depth
#B5703EClay · Accent
#D69A2DHoney · Highlight
#F4EFE3Cream · BG

ฟอนต์ + หลักการ

สดจากสวน ส่งตรงครัว
KANIT · หัวข้อ · เน้นความเป็นมิตร
เนื้อหาอ่านง่ายทุกวัย — สำคัญมากกับฝั่งเกษตรกร ตั้ง base ≥18px บนจอผู้ขาย
IBM PLEX SANS THAI · เนื้อหา
หลักสองโหมด: ฝั่งเกษตรกรเน้น “ใหญ่-คอนทราสต์-1 งาน/จอ” · ฝั่งเชฟเน้น “แน่น-รูปนำ-เร็ว” แต่ใช้ระบบสี/คอมโพเนนต์ชุดเดียวกัน
Reference ที่ลูกค้าชอบ → เราถอดมาใช้
GrabFood · ความง่าย/เร็วในการสั่ง → ฝั่งเชฟ
Airbnb · เล่า story แหล่งที่มา/เจ้าของ → product detail
Handoff

ส่งมอบ · พร้อมพิตช์ & เทสต์

ครบตามแพ็กเกจ Basic — เอกสารที่เอาไปคุยนักลงทุน และเอาไปเทสต์กับผู้ใช้จริงได้ทั้งสองกลุ่ม

👥

2 Personas (เกินสเปก)

Basic ให้ 1 persona — เคสนี้ตลาดสองฝั่ง เราส่ง 2 persona พร้อม design implications ใช้เป็นเข็มทิศทีม

📐

Wireframe + Flow + IA

5 จอ role-adaptive + journey + information architecture ในไฟล์ Figma ส่งต่อ dev/ทีมได้

🔁

แก้ได้ 2 ครั้ง

ปรับตามฟีดแบ็กนักลงทุนหรือผลเทสต์ผู้ใช้ รวมอยู่ในแพ็กเกจ Basic แล้ว

Next step

research พร้อมแล้ว — ขึ้น hi-fi ต่อเลยไหม?

Basic วาง foundation ที่ “ไม่เดา” ให้ FarmLink แล้ว ถ้าผลเทสต์/พิตช์ผ่าน ขยับเป็นดีไซน์สีเต็ม กดเล่นได้ (Standard) หรือ Design System ทั้งระบบ (Premium) ต่อยอดจาก persona ชุดนี้ได้ทันที

Basic · Wireframe + Persona · 2,500฿ ← คุณอยู่ตรงนี้
Standard · Hi-fi + Prototype กดเล่นได้ · 6,800฿
Premium · Design System ครบวงจร · 14,500฿
🏠 หน้าหลัก
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 ฟรี