KPS Drug — B2C vs B2B Wireframe

1. User Journey

B2B — คลินิก / ร้านยา / โรงพยาบาล

อนุมัติล่วงหน้า
มี credit term

→

Dashboard
ภาพรวม

KPI, alerts,
reorder

→

สั่งซื้อ
3 วิธี

Browse / Quick
Order / Upload CSV

→

ตะกร้า
+ PO Ref

ใส่เลข PO,
ที่อยู่จัดส่ง

→

ชำระ
Credit / โอน

30/60 วัน
หรือโอนทันที

→

Track
Order

Real-time
step tracker

B2C — ประชาชนทั่วไป

เข้าหน้าแรก
Browse

ไม่ต้อง login
ก่อนก็ได้

→

ค้นหา
+ เลือกยา

ภาพ, คำอธิบาย,
คำแนะนำ

→

Product
Detail

วิธีใช้, ผลข้าง
เคียง, รีวิว

→

ตะกร้า
ปลีก

ราคา/เม็ด,
Promo code

→

ชำระ
ออนไลน์

QR PromptPay,
บัตรเครดิต

→

Track
Delivery

SMS + Line
แจ้งเตือน

2. Home Page

B2B

หน้าหลัก — Dashboard

เปิดมาเจอ data ทันที — ไม่มี hero

Quick Order

Credit Status Banner

KPI Strip

🔄 สั่งซ้ำด่วน

1-click Reorder

🔔 แจ้งเตือน

Smart Alerts

B2C

หน้าแรก — Discovery

browse, inspire, trust-building

Hero + Search Bar

หมวดหมู่ยอดนิยม

Category Icons

สินค้าแนะนำ

Product Cards
+ ราคาปลีก

3. Product Listing

B2B

สั่งซื้อสินค้า — Table View

เน้นความเร็ว, ข้อมูลครบ, สั่งได้เลยจาก list

Dense Table
ราคาส่ง + LOT + EXP

B2C

ค้นหาสินค้า — Card Grid

รูปใหญ่, ราคาปลีก, รีวิว, เพิ่มตะกร้าง่าย

SALE

NEW

Card Grid
รูปใหญ่ + rating

4. ความแตกต่างหลัก

B2B — Intelligent Procurement

ราคาส่ง + UOM — โหล/กล่อง/ลัง, ราคาต่อหน่วยขายส่ง

LOT / EXP date — แสดงทุก row ใน product table

Quick Order + CSV — สั่งหลายรายการพร้อมกันโดยไม่ต้อง browse

Credit term — ชำระ 30/60 วัน, ดูวงเงินและ due date

PO Reference — ใส่เลขที่ใบสั่งซื้อภายในของลูกค้า

Smart Reorder — แนะนำจากประวัติ, แจ้งเตือนสต็อกต่ำ

B2C — Consumer Shopping

Browse without login — เห็นสินค้าและราคาได้ทันที

ราคาปลีก / เม็ด — แสดง "฿15/เม็ด" ไม่ใช่ "฿180/โหล"

รูปสินค้า + คำอธิบาย — วิธีใช้, ข้อบ่งชี้, ผลข้างเคียง

Rating & Review — ดาว + ความเห็นจากผู้ใช้จริง

Promo / Flash sale — badge SALE, countdown timer

ชำระทันที — QR PromptPay, บัตรเครดิต, COD

แนะนำจาก AI — "ยาที่ซื้อร่วมกัน", personalized

5. Architecture — 1 Codebase ทำทั้ง 2 โหมด

Shared (ทำครั้งเดียว)

· Product catalog + search

· Cart logic

· Order tracking

· Auth system

· API backend

· Payment gateway

B2B เพิ่มเติม

· Credit management

· UOM / LOT display

· Quick Order modal

· CSV upload

· PO Reference field

· Reorder suggestions

· Approval workflow

B2C เพิ่มเติม

· Hero / discovery page

· Product images

· Rating & review

· Retail price display

· Promo banners

· Guest checkout

· SMS/Line notification

💡 แนะนำ: ใช้ userMode = 'b2b' | 'b2c' จาก user profile → render component ต่างกัน ไม่ต้องสร้าง 2 ระบบแยก

KPS Drug Wireframe · B2B + B2C · v3 · 2026