UX/UI CASE STUDY · DESIGN HANDOFF

VERDA Mobile App · UX/UI Case Study & Design Handoff

VERDA คือแนวคิด mobile marketplace ที่ช่วยให้ชุมชนไทยนำโครงการคาร์บอนเครดิตเข้าสู่ตลาดได้ง่ายขึ้น และช่วยให้ผู้ซื้อตรวจสอบหลักฐานก่อนตัดสินใจได้ ในบทบาท UX/UI Designer ผมพัฒนางานตั้งแต่การทำความเข้าใจผู้ใช้ วางโครงสร้างผลิตภัณฑ์ ออกแบบ interface และ prototype ไปจนถึงจัดทำ design specification เอกสารนี้จึงทำหน้าที่ทั้ง portfolio case study ที่เล่ากระบวนการคิด และ handoff document ที่ทีม dev นำไปพัฒนาต่อได้

Component set Design tokens LINE-first Support
RoleUX/UI Designer รับผิดชอบ product structure, interaction design, visual system และ prototype
Design scopePersona, journey, feature priority, IA, user flow, hi-fi screens และ design system
Handoff outputRoutes, tokens, components, states, data fields, QA checklist และ redline สำหรับทีม dev
10:245G 100%
V
โครงการของฉัน ชุมชนบ้านแม่วาง
T-VER
ราคาคาดการณ์หลังหักค่าธรรมเนียม ฿860 - ฿940 / tCO2e

อิงจากรายการซื้อใกล้เคียงและคุณภาพเอกสารล่าสุด

เพิ่มเอกสารระบบช่วยตรวจทีละขั้น
ติดต่อผู้ซื้อส่งโปรไฟล์โครงการ
แปลเป็นอังกฤษพร้อมส่งต่างประเทศ
คุยกับเจ้าหน้าที่ผ่าน LINE หรือโทร
ป่าชุมชนแม่วาง เชียงใหม่ · Forestry · Vintage 2025
Verified
Serial ready Story profile Doc 80%
ราคาผู้ซื้อโดยประมาณ฿1,020
ค่าดำเนินการ VERDA- ฿90
ประมาณการจ่ายให้ชุมชน฿930
1
ยืนยันข้อมูลโครงการชื่อพื้นที่ พิกัด เจ้าของโครงการ
Done
2
แนบเอกสาร T-VERระบบช่วยบอกไฟล์ที่ยังขาด
80%
3
พร้อมส่งให้ผู้ซื้อสร้างหน้าโครงการสองภาษา
Next
00 / Context

หลักการและเหตุผล

ตลาดคาร์บอนกำลังเป็นกลไกการเงินสำคัญสู่ net-zero และปี 2026 คือหน้าต่างเวลาสำคัญของไทยในการเข้าสู่ตลาดคาร์บอนภาคสมัครใจที่กำลังจะเปิด

Market timing

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

ตลาดภาคสมัครใจทั่วโลกเติบโตจาก 1.55 พันล้านดอลลาร์ในปี 2024 สู่ราว 4.13 พันล้านดอลลาร์ในปี 2029 สำหรับไทยถือเป็นจุดเปลี่ยน เพราะร่าง พ.ร.บ.การเปลี่ยนแปลงสภาพภูมิอากาศได้รับอนุมัติจาก ครม. เมื่อธันวาคม 2025 คาดบังคับใช้ปี 2027 และตลาดภาคสมัครใจจะเปิดภายในปี 2027 โดยเน้นเครดิตอิงธรรมชาติ โดยเฉพาะป่าไม้ ซึ่งตรงกับฐานทรัพยากรไทย

2026 window
Structural gap

โอกาสถูกจำกัดด้วยตลาดที่กระจัดกระจาย

ตลาดยังไม่เป็นมาตรฐานเดียว ไม่รวมศูนย์ และกระจัดกระจาย ผู้ซื้อกังวล greenwashing ส่วนชุมชนเข้าถึงตลาดไม่ได้และถูกกดราคา

VERDA role

แพลตฟอร์มบนหลักความน่าเชื่อถือที่ตรวจสอบได้ด้วยตนเอง

VERDA เชื่อมโครงการลดคาร์บอนในไทย เช่น ป่าไม้และนาข้าว กับผู้ซื้อทั้งในและต่างประเทศ ให้ผู้ซื้อยืนยันเครดิตกับทะเบียนทางการได้โดยตรง และเปิดให้ชุมชนเข้าถึงราคาและผู้ซื้อเองโดยลดการพึ่งคนกลาง

ปัญหา

  • ชาวบ้านขายคาร์บอนเครดิตเองไม่ได้ ต้องผ่านนายหน้า แล้วโดนกดราคา เกษตรกรและชุมชนไม่มีช่องทางขายเอง ต้องพึ่งนายหน้า แต่นายหน้าส่วนใหญ่ไม่บอกว่าหักค่าหัวคิวเท่าไหร่ มีแค่ราว 10% เท่านั้นที่เปิดเผยค่าคอมมิชชันและกำไรที่แท้จริง ชาวบ้านจึงไม่รู้ราคาตลาดจริงและไม่รู้ว่าสุดท้ายตัวเองได้เงินกี่เปอร์เซ็นต์
  • คนซื้อกลัวซื้อของปลอม แล้วเสียชื่อเสียงบริษัท องค์กรที่ซื้อเครดิตไปลดคาร์บอนกลัวโดนกล่าวหาว่าฟอกเขียว เพราะตลาดวันนี้ไม่มีที่ให้ตรวจสอบง่าย ๆ ว่าเครดิตจริงหรือเปล่า ทั้งที่การตรวจสอบทะเบียนให้ถูกต้องคือกุญแจสำคัญที่กันไม่ให้เครดิตถูกนับซ้ำ
  • ขายให้ต่างประเทศยิ่งยุ่งยาก ผู้ซื้อต่างชาติต้องมั่นใจว่าเครดิตจะไม่ถูกนับซ้ำข้ามประเทศ แต่การตรวจสอบจริงยังยากและกระจัดกระจาย ทำให้ผู้ซื้อต่างประเทศลังเลที่จะซื้อ

สรุปโจทย์ที่ VERDA แก้

ตลาดคาร์บอนไทยกำลังจะเปิดและมีของดี เช่น ป่าไม้และนาข้าว แต่ยังขาดที่ที่เชื่อใจได้: ที่ชาวบ้านขายได้ราคาเป็นธรรม และคนซื้อตรวจสอบได้ว่าของจริง

Fair seller price Self-verifiable credit Lower broker dependence
Target users

กลุ่มเป้าหมาย

VERDA เป็นแพลตฟอร์มแบบสองฝั่ง คือเชื่อมคนขายที่เป็นชุมชนผู้ผลิตเครดิตกับคนซื้อที่เป็นองค์กรซึ่งต้องการลดคาร์บอนเข้าด้วยกัน จึงมีกลุ่มเป้าหมายหลัก 3 กลุ่ม

Two-sided platform
ฝั่งคนขาย
วิสาหกิจชุมชน / ป่าชุมชน

ชุมชนที่มีโครงการป่าไม้หรือนาข้าวที่สร้างคาร์บอนเครดิตได้ ใช้มือถือเป็นหลัก เก่ง LINE แต่ไม่ถนัดเทคโนโลยีใหม่ ต้องพึ่งนายหน้าในการขาย และระแวงแพลตฟอร์มใหม่ว่าจะโดนหลอกหรือใช้ยากไหม

สิ่งที่ต้องการ: ขายได้ง่าย รู้ราคาที่เป็นธรรม และมีคนช่วยเหลือเมื่อติดขัด

ฝั่งคนซื้อ
ผู้ซื้อในประเทศ

ผู้จัดการด้านความยั่งยืนหรือ ESG ในบริษัทส่งออกขนาดกลางของไทย ซื้อเครดิตเพื่อให้บริษัทบรรลุเป้าหมายลดคาร์บอน กังวลเรื่องโดนกล่าวหาว่าฟอกเขียว และต้องเตรียมเอกสารให้พร้อมตรวจสอบ

สิ่งที่ต้องการ: เครดิตที่ตรวจสอบได้ชัด และเอกสารที่ใช้ได้ทั้งงานตรวจสอบและงานสื่อสาร

Global buyer
ผู้ซื้อต่างประเทศ

ฝ่ายจัดซื้อคาร์บอนระดับสากล ฐานในสิงคโปร์ ซื้อในปริมาณมากและมีมาตรฐานสูง ต้องการตรวจสอบย้อนกลับได้ลึกถึงระดับ serial และยืนยันสถานะ corresponding adjustment ว่าเครดิตใช้เคลมข้ามประเทศได้จริง

สิ่งที่ต้องการ: ความน่าเชื่อถือตามมาตรฐานสากล และการตรวจสอบที่ครบถ้วน

00.5 / Business model

Business Model Canvas ของ VERDA

ภาพรวมโมเดลธุรกิจ 9 ช่อง ขับเคลื่อนด้วยหลักการ “Trust that buyers can verify by themselves” — เชื่อมโครงการคาร์บอนชุมชนไทยกับผู้ซื้อในและต่างประเทศแบบ assisted marketplace ไม่ใช่ trading terminal

Key partners
  • อบก. / TGO, Verra, Gold Standard — registry และ CA
  • ผู้ตรวจสอบ / VVB (verification body)
  • วิสาหกิจชุมชน และ ป่าชุมชน
  • LINE OA และช่องทาง messaging
  • ธนาคาร / payment gateway / escrow
  • ที่ปรึกษา ESG, auditor, สมาคมอุตสาหกรรม
Key activities
  • คัดกรองและตรวจสอบโครงการ
  • เชื่อม registry / serial / CA แบบ source-linked
  • จับคู่ผู้ซื้อ–ผู้ขาย และ deal room
  • ผู้ช่วยเอกสาร + แปลภาษา (AI)
  • ออกชุดเอกสาร audit และ narrative
Value propositions
  • หลักการ: “Trust that buyers can verify by themselves”
  • Seller: ขายเองได้ ไม่ผ่านนายหน้าทึบ ราคา/ค่าธรรมเนียมโปร่งใส
  • ผู้ซื้อในประเทศ: เครดิตตรวจสอบแล้ว + ชุดเอกสารกัน greenwashing
  • ผู้ซื้อต่างชาติ: หลักฐาน source-linked, CA pending ตามจริง, audit trail
  • Thai-first สำหรับชุมชน / English-first สำหรับผู้ซื้อต่างชาติ
Customer relationships
  • Assisted / human-in-the-loop ทุกขั้น
  • LINE support และโทรหาคนช่วยได้
  • Self-serve verification (ตรวจเอง)
  • Onboarding แบบ minimal-tap
  • ซื้อซ้ำ / จองล่วงหน้า / refer
Customer segments
  • P01 ผู้ขายชุมชน (ครูบุญส่ง) — low-tech, LINE-native
  • P02 ผู้ซื้อ ESG ในประเทศ (คุณณิชา)
  • P03 ผู้ซื้อต่างชาติ (James Carter) — procurement scale
  • องค์กรที่ตั้งเป้า Net-Zero / ESG
Key resources
  • แพลตฟอร์ม + ฐานข้อมูลโครงการ/เครดิต
  • การเชื่อมต่อ registry API และ CA
  • ทีมตรวจสอบ + เครือข่ายชุมชน
  • AI เอกสาร/แปลภาษา
  • ความน่าเชื่อถือแบรนด์และ trust layer
Channels
  • LINE OA + QR (seller entry)
  • Public project page (แชร์ก่อน login)
  • Registry deep-link (ผู้ซื้อต่างชาติ)
  • Mobile app + web marketplace
  • Partner / สัมมนา ESG / word-of-mouth
Cost structure
  • พัฒนาและดูแลแพลตฟอร์ม + integration registry
  • ทีมตรวจสอบ / verification และงานภาคสนาม
  • ทีม support (LINE/คน) และ onboarding ชุมชน
  • ต้นทุน AI/แปลภาษา, payment/escrow fee, compliance และ legal
  • การตลาดและ partnership
Revenue streams
  • Transaction fee / take rate ต่อดีล (โปร่งใส แยกจาก net payout)
  • ค่าบริการตรวจสอบและ verification
  • Subscription องค์กร (compare, ESG pack, executive brief)
  • ค่าออกชุดเอกสาร audit/narrative และ retirement certificate
  • Premium listing / priority matching สำหรับ seller
01 / Product direction

Assisted carbon marketplace, not a trading terminal

ข้อมูลทิศทางผลิตภัณฑ์ของ VERDA: mobile product ที่ทำให้ carbon credit transaction ตรวจสอบได้และเข้าใจง่าย โดย seller เห็นขั้นตอนและยอดสุทธิ, buyer เห็นหลักฐานและ project quality, ระบบช่วยเหลือเห็นสถานะเดียวกับ user

ครูบุญส่ง ประธานวิสาหกิจชุมชนป่าชุมชน จังหวัดน่าน Persona 01 / Seller
Thai seller · T-VER community project

ครูบุญส่ง

ประธานวิสาหกิจชุมชนป่าชุมชน ดูแลโครงการปลูกป่า/อนุรักษ์ที่ขึ้นทะเบียน T-VER ประมาณ 5,000 tCO2e ต่อปี

TH-first
Age52 ปี
Locationจังหวัดน่าน
Incomeไม่แน่นอน ขึ้นกับจังหวะขายเครดิต บางปีขายไม่ออกเลย
Tech behaviorต้องใช้งานง่าย ภาษาไทย ปุ่มน้อย และมี LINE/support ช่วย
"เราดูแลป่าเต็มที่ทุกปี แค่อยากรู้ว่าราคาจริงเท่าไหร่ และขายเองได้โดยไม่ต้องรอให้ใครโทรมา"
Goals / Gains
  • เห็นราคากลางตลาดและราคาที่ผู้ซื้อจ่ายจริง เพื่อไม่ให้โดนกดราคา
  • เข้าถึงผู้ซื้อได้โดยตรง ลดการพึ่งนายหน้า ให้เงินกลับเข้าชุมชนเต็มเม็ดเต็มหน่วย
  • สร้างรายได้ที่ต่อเนื่องและแน่นอนให้ชุมชน
  • ทำธุรกรรมได้ด้วยตัวเองผ่านเครื่องมือที่ง่ายและเป็นภาษาไทย
Pain Points
  • มองไม่เห็นราคากลาง ได้แต่เชื่อนายหน้า ค้างคาใจเรื่องส่วนต่าง
  • พึ่งพานายหน้าฝ่ายเดียว นั่งรอให้ติดต่อมา เข้าไม่ถึงผู้ซื้อต่างชาติเอง
  • เอกสารภาษาอังกฤษ ศัพท์เทคนิค หลายขั้นตอน ส่งแก้กลับไปกลับมา
  • เสียจังหวะขาย บางปีเครดิตค้างขายไม่ออก รายได้ชุมชนหายไป
Feature Needs
  • Real-time market price board + price timing alertแสดงราคาตลาด ราคาปลายทางที่ผู้ซื้อจ่ายจริง และรายการหักค่าธรรมเนียมแบบโปร่งใส พร้อมเตือนเมื่อราคาอยู่ในจังหวะดี
  • Direct buyer matching + translation helperให้ผู้ซื้อเห็นและติดต่อโครงการได้เองโดยไม่ผ่านนายหน้า พร้อมช่วยแปลการสื่อสารกับผู้ซื้อต่างชาติ
  • LINE-first Thai simple UIใช้งานผ่าน LINE เป็นภาษาไทย ปุ่มกดน้อย ไม่ต้องเปิดเว็บหรือพึ่งลูกหลาน
  • Step-by-step document assistant + trust badgeกรอกเอกสารแบบง่ายภาษาไทย เก็บใช้ซ้ำได้ พร้อมแสดงหน่วยงานรับรองและสถานะการจ่ายเงินที่ตรวจสอบได้
คุณณิชา Sustainability และ ESG Manager ในสำนักงานกรุงเทพมหานคร Persona 02 / Thai buyer
Domestic buyer · ESG manager

คุณณิชา

Sustainability/ESG Manager บริษัทอาหารส่งออกขนาดกลาง รายได้บริษัทประมาณ 2,000 ล้านบาทต่อปี ทำงานบนแล็ปท็อปเป็นหลัก รายงานตรงต่อผู้บริหาร แต่ไม่ใช่ผู้เชี่ยวชาญคาร์บอนโดยตรง

ESG
Age34 ปี
Locationกรุงเทพมหานคร
Work modeถนัดรายงาน, audit evidence, executive approval และ comparison บน laptop
Decision driverต้องพิสูจน์ความน่าเชื่อถือได้เองก่อนเอาชื่อบริษัทไปผูกกับเครดิต
"ฉันไม่ต้องการให้ใครมาบอกว่าเชื่อสิ — ฉันต้องพิสูจน์เองได้ว่ามันของจริง ก่อนจะเอาชื่อบริษัทไปผูกกับมัน"
Goals / Gains
  • ซื้อเครดิตคุณภาพที่ผ่านมาตรฐานสากลเพื่อบรรลุเป้า Net-Zero และรักษาออเดอร์จากคู่ค้าต่างชาติ
  • ได้ใบรับรองและเอกสารที่ใช้อ้างอิงใน audit ได้อย่างมั่นใจ ตรวจสอบย้อนกลับถึงทะเบียนต้นทางได้เอง
  • มีเรื่องราวโครงการพร้อมใช้สื่อสารกับลูกค้าและนักลงทุน
  • ลดเวลาและความเครียดจากกระบวนการจัดซื้อที่ยืดเยื้อ
Pain Points
  • กลัวซื้อเครดิตที่เป็น greenwashing แล้วทำลายชื่อเสียงบริษัท จนยอมไม่ซื้อดีกว่าเสี่ยง
  • กระบวนการกระจัดกระจาย ต้องไล่ถามโบรกเกอร์หลายเจ้า ใช้เวลาเป็นเดือน
  • ตอบคำถามผู้บริหารเรื่องความน่าเชื่อถือได้ไม่เต็มร้อย เพราะไม่มีหลักฐานพร้อม
  • ต้องแปลและเรียบเรียงข้อมูลดิบหลายมาตรฐานด้วยมือ เทียบเครดิตแต่ละเจ้าได้ยาก
Feature Needs
  • Registry Trace-backเครดิตทุกตัวคลิกเช็กเลขทะเบียน Verra/Gold Standard กับเว็บต้นทางได้จริง พร้อมออก retirement certificate อัตโนมัติเมื่อซื้อ
  • Credit Comparison Tableตารางเทียบราคา มาตรฐาน และประเภทโครงการในที่เดียว แทนการไล่เปิดเอกสารจากโบรกเกอร์ทีละเจ้า
  • Dual-Output Documentsสร้างเอกสารสองเวอร์ชันจากเครดิตเดียว: ชุดทางการสำหรับ auditor และชุดเรื่องเล่าพร้อมรูปสำหรับลูกค้า/นักลงทุน
  • Executive Brief Generatorสรุปหน้าเดียวตอบสามคำถามหลัก: จ่ายเท่าไหร่ ลดกี่ตัน เชื่อถือได้แค่ไหน พร้อมหลักฐานแนบ
James Carter Carbon Procurement Lead in Singapore office Persona 03 / Foreign buyer
Foreign buyer · Carbon procurement lead

James Carter

Carbon Procurement Lead, multinational technology company in APAC. Sources high-quality nature-based credits from Southeast Asia and needs defensible evidence for sustainability reporting.

EN
Age41
LocationSingapore
IncomeSGD 220,000-260,000 / year
Risk lensSerial-level verification, CA status, chain-of-custody and audit-ready exports
"Don't make me trust you — let me verify it myself."
Goals / Gains
  • Source high-quality, nature-based credits from Southeast Asia that pass Verra / Gold Standard scrutiny.
  • Independently verify every credit down to serial-number level: issuance, ownership, and retirement status.
  • Confirm corresponding adjustment status to eliminate double-counting and reputational risk.
  • Obtain clean, auditor-ready retirement certificates and audit trails for sustainability reporting.
Pain Points
  • Weeks lost collecting, translating, and cross-checking verification reports and land titles in Thai/Bahasa.
  • No central source of truth; project data is scattered, broker-dependent, and rarely in English.
  • Opaque CA verification requires emails to project developers and government bodies with no single status view.
  • Hidden broker margins create distrust of intermediaries who each add a cut and their own spin.
Feature Needs
  • Live Registry VerificationDirect Verra/Gold Standard integration showing real serial numbers, chain-of-custody, and retirement status. No screenshots, no unverifiable claims.
  • CA Status TransparencyHonest corresponding-adjustment status on every project, including "not yet authorized," to support go/no-go decisions.
  • Source-Linked Document HubCentralized verification reports, land titles, and authorizations, auto-translated to English and traceable to source.
  • Audit-Ready ExportAuto-generated retirement certificates and defensible audit trails formatted for auditors and ESG reports.
ภาพรวมขั้นตอนผู้ขาย

Persona 01 — เส้นทางผู้ขาย

ภาพรวม journey ของครูบุญส่ง ตั้งแต่ยังขายไม่ออก ต้องพึ่งวิธีเดิม เจอ VERDA ผ่านคนที่ไว้ใจ ใช้แอปช่วยตรวจราคา/เอกสาร จนถึงรับเงินและบอกต่อ

5 ขั้นตอน
Phase
① มีปัญหา
(Problem)
② ดิ้นด้วยวิธีเดิม
(Old way fails)
③ เจอ Verda
(Discover)
④ แอปเริ่มช่วย
(Verify & Solve)
⑤ แก้ปัญหาสำเร็จ
(Resolved)
User Action
ดูแลป่าเต็มที่ทุกปี แต่เครดิตเริ่มค้าง ขายไม่ออก ได้แต่รอ
รอนายหน้าโทรมาถามราคา/ผู้ซื้อในกลุ่ม LINE ปากต่อปาก
ได้ลิงก์/QR จากเพื่อนหรือเจ้าหน้าที่ที่ไว้ใจ แตะเข้ามาดู
เช็กราคากลางจริง ลงประกาศผ่าน wizard เริ่มจากเล่าเรื่อง จับคู่ผู้ซื้อ ทำเอกสารทีละขั้น
รับเงินเข้าชุมชนตรงเวลา เช็กยอด/ประวัติ แล้วแชร์บอกต่อ
Touchpoint
ป่าชุมชน, โทรศัพท์, ที่ประชุมชุมชน
นายหน้า, กลุ่ม LINE วิสาหกิจชุมชน, คนรู้จัก
กลุ่ม LINE เพื่อน, เจ้าหน้าที่ TGO, เจ้าหน้าที่ภาคสนาม, QR งานอบรม
กระดานราคา, wizard ลงประกาศ, ผู้ช่วยเอกสาร, แชตผู้ซื้อ
แอปธนาคาร, หน้าติดตามการจ่ายเงิน, กลุ่ม LINE
User Thought
"ปีนี้จะขายได้ไหม เมื่อไหร่จะมีคนมาซื้อ"
"ราคาจริงเท่าไหร่ ใครบอกได้ นายหน้าหักไปเท่าไหร่"
"คนที่เราไว้ใจส่งมา — ของจริงหรือมืออาชีพใครรับรอง"
"ราคานี้เห็นชัด ตรวจสอบได้จริง เอกสารง่ายขึ้น ผมทำเองได้"
"เงินเข้าครบตรงเวลา ครั้งหน้าง่ายขึ้นแน่ คุ้มที่จะบอกต่อ"
Pain / Emotion
😟รายได้ไม่แน่นอน ตั้งรับ → กังวล/เสียดาย
😠โดนกดราคา ข้อมูลไม่น่าเชื่อ เสียจังหวะ → หงุดหงิด/ระแวง
😕อยากลองแต่กลัวโดนหลอก กลัวใช้ยาก → ลังเลปนหวัง
🙂เห็นราคาโปร่งใส ลดพึ่งนายหน้า → เริ่มไว้ใจ/มั่นใจขึ้น
😄เงินกลับเข้าชุมชนจริง โปร่งใส → โล่งใจ/ภูมิใจ/ไว้ใจเต็มที่
App Opportunity
(ยังอยู่นอกระบบ) โจทย์คือทำให้แอปไปปรากฎผ่านคนที่เขาไว้ใจ — เตรียมช่องทาง discovery
(ยังไม่เจอแอป) ตอกย้ำ pain ที่แอปจะแก้: ราคาทึบ + พึ่งนายหน้า เพื่อให้ ③ มีพลัง
ลิงก์/QR แชร์ผ่าน LINE (ไม่ต้อง LIFF ใน MVP); หน้า landing เน้น trust เหนือ fold — โลโก้ TGO/ใบรับรอง + รีวิว seller จริง (F8); UI ง่ายระดับ LINE ภาษาไทย (F5)
ราคาตลาด + ราคาปลายทาง/ค่าธรรมเนียมโปร่งใส (F1, F2); จับคู่ผู้ซื้อตรง + ตัวช่วยแปล (F4, F7); ผู้ช่วยเอกสารภาษาไทยใช้ซ้ำได้ (F6); มีคนช่วยทุกขั้น (F10)
ติดตามการจ่ายเงิน + การันตีตรงเวลา (F9); ประวัติการขาย (F8); ปุ่มแชร์บอกต่อที่สร้างลิงก์ discovery ให้อัตโนมัติ → วนกลับสู่ ③ (F10)
ภาพรวมขั้นตอนผู้ซื้อในประเทศ

Persona 02 — เส้นทางผู้ซื้อ ESG

ภาพรวม journey ของคุณณิชา ตั้งแต่ถูกกดดันจากคู่ค้าและผู้บริหาร ต้องหาข้อมูลด้วยวิธีเดิม เจอ VERDA จากช่องทางที่ไว้ใจ จนตรวจสอบ ซื้อ และใช้เอกสารรายงานได้มั่นใจขึ้น

5 ขั้นตอน
Phase
① มีปัญหา
(Problem)
② ดิ้นด้วยวิธีเดิม
(Old way fails)
③ เจอ Verda
(Discover)
④ แอปเริ่มช่วย
(Verify & Solve)
⑤ แก้ปัญหาสำเร็จ
(Resolved)
User Action
รับโจทย์จากคู่ค้าต่างชาติ / ผู้บริหารว่าต้องมีแผนคาร์บอนและซื้อเครดิตชดเชย
ไล่ถามโบรกเกอร์หลายเจ้า เช็กทะเบียนเอง เสิร์ชหาข่าวโครงการ
ได้ยินชื่อ Verda จากช่องทางที่ไว้ใจ แล้วลองกดเข้าดูแบบยังไม่สมัคร
สมัครแล้วเทียบเครดิต กดดูทะเบียนต้นทาง สั่งซื้อ ออกใบรับรอง
ดึงเอกสารไปทำรายงาน ESG ส่ง auditor สื่อสารลูกค้า แล้วซื้อซ้ำปีถัดไป
Touchpoint
อีเมลคู่ค้า, ที่ประชุมผู้บริหาร, แล็ปท็อป
อีเมล/โทร, PDF โบรกเกอร์, Excel ทำเอง, Google, เว็บทะเบียน
งานสัมมนา ESG, เพื่อนร่วมวงการ, ที่ปรึกษา/auditor, ลิงก์หน้าโครงการที่ seller แชร์
Landing page, Marketplace, หน้า Trace-back, ระบบจัดซื้อในแอป
ใบ retirement, รายงาน ESG, สไลด์พรีเซนต์, หน้าซื้อซ้ำ/จองล่วงหน้า
User Thought
"เรื่องนี้กระทบออเดอร์จริง ต้องทำให้ผ่านและตรวจสอบได้"
"ไม่มีแหล่งทางการให้เริ่ม ต้องเชื่อใครดี และของจริงไหม"
"เจ้านี้คนในวงการพูดถึง น่าจะเชื่อได้กว่าเสิร์ชเจอเอง — แต่ของจริงปะ"
"โอ้ คลิกเช็กทะเบียนต้นทางได้เองจริง นี่แหละที่ตามหา"
"คราวนี้ตอบผู้บริหารได้เต็มปาก มีหลักฐานครบ ปีหน้าทำง่ายขึ้นแน่"
Pain / Emotion
😣กดดันรับแรงจากทุกทิศ รู้ตัวว่าไม่ใช่ผู้เชี่ยวชาญ
😩เหนื่อยใจกับงานเทียบด้วยมือ ระแวง greenwashing จนยอมถอยจากดีล
😟ระแวงของใหม่ที่ไม่มีใครรับรอง / ถ้าบังคับสมัครก่อนถึงจะดู = ปิดหนีทันที
😅โล่งใจที่พิสูจน์เองได้ แต่ยังกังวลเรื่องระบบจัดซื้อ/ใบกำกับภาษี
🙂มั่นใจ ควบคุมสถานการณ์ได้ / เหลือความกังวลแค่ "ถ้าเครดิตมีปัญหาทีหลังใครรับผิด"
App Opportunity
  • Onboarding ที่ประเมินเป้า Net-Zero และแนะนำปริมาณเครดิตที่ต้องซื้อ
  • คอนเทนต์ให้ความรู้แบบคนไม่เชี่ยวชาญเข้าใจ
  • Marketplace รวมเครดิตตรวจสอบแล้วจุดเดียว
  • ลบงานไล่ถามโบรกเกอร์
  • Public verifiable project page ที่ seller แชร์ถึงผู้ซื้อเข้ามา
  • Partner channel กับ อบก./TGO + case study จากเพื่อนวงการ
  • Registry Trace-back เปิดดูได้ก่อนสมัคร
  • Credit Comparison Table
  • ใบ retirement อัตโนมัติ
  • ระบบจัดซื้อองค์กร/ใบกำกับภาษี
  • Dual-Output Documents (ชุด audit + ชุดเรื่องเล่า)
  • Executive Brief
  • การรับประกัน/เยียวยาเมื่อเครดิตมีปัญหา
  • ซื้อซ้ำ/จองล่วงหน้า + Refer
ภาพรวมขั้นตอนผู้ซื้อต่างประเทศ

Persona 03 — เส้นทางจัดซื้อคาร์บอน

ภาพรวม journey ของ James Carter ตั้งแต่รับคำสั่งชดเชยคาร์บอนระดับองค์กร ต้องไล่ตรวจข้อมูลผ่านโบรกเกอร์และ registry เอง เจอ Verda จากแหล่งที่ไว้ใจ จนซื้อ retire และส่ง audit trail เข้า ESG report ได้

5 ขั้นตอน
Phase
① มีปัญหา
(Problem)
② ดิ้นด้วยวิธีเดิม
(Old way fails)
③ เจอ Verda
(Discover)
④ แอปเริ่มช่วย
(Verify & Solve)
⑤ แก้ปัญหาสำเร็จ
(Resolved)
User Action
รับคำสั่งชดเชยคาร์บอนระดับองค์กร ต้องหาเครดิตคุณภาพสูงจาก SEA
พึ่งโบรกเกอร์ + ไล่อีเมลหา developer/หน่วยงานรัฐ รวบรวมและแปลเอกสารเอง
คลิกลิงก์จาก registry / คำแนะนำเพื่อนร่วมวงการ เข้ามาที่ Verda
กดดูข้อมูลโครงการ ตรวจ serial + สถานะ CA + retirement สดจาก registry
ซื้อและ retire เครดิต ดึงใบรับรอง + audit trail เข้ารายงาน ESG
Touchpoint
นโยบายภายใน, สเปรดชีต, คำสั่งผู้บริหาร
โบรกเกอร์, พอร์ทัล Verra/GS, อีเมล, ไฟล์ PDF หลายภาษา
Deep link จาก registry, งานวงการ, คำบอกต่อ
หน้าโครงการ Verda, WebView ลิงก์ registry จริง
หน้า payout/retirement, ใบรับรอง, แพลตฟอร์มรายงาน
User Thought
"ต้องได้เครดิตที่ปกป้องชื่อเสียงบริษัทได้"
"ทำไมข้อมูลกระจัดกระจาย ไม่มีที่เดียวที่เชื่อถือได้เลย?"
"นี่อีกโบรกเกอร์หรือเป็นของจริงที่ตรวจสอบได้?"
"มันลิงก์ registry จริง! CA โชว์ตรงๆ แม้แต่วันที่ยังไม่อนุมัติ"
"ในที่สุดก็มีหลักฐานที่ส่งให้ผู้ตรวจสอบได้โดยไม่ต้องอธิบายเพิ่ม"
Pain / Emotion
😣กดดัน ทุกการตัดสินใจมีชื่อเสียงบริษัทเป็นเดิมพัน — ระมัดระวัง
😤เสียเวลาเป็นสัปดาห์ ไล่เอกสาร พึ่งคนกลางที่กินค่าหัวคิว — หงุดหงิด เหนื่อยล้า
😟ตั้งการ์ดทันที กลัวเสียเวลากับแพลตฟอร์มที่ไม่จริง — ระแวง ลังเล
😌ความระแวงเริ่มลดลงเมื่อตรวจเองได้ — เริ่มวางใจ โล่งขึ้น
😄มั่นใจ ลดความเสี่ยง double-counting และข่าวเสีย — เชื่อมั่น พึงพอใจ
App Opportunity
  • (นอกแอป) SEO หน้า CA verification ดักจังหวะ intent สูง
  • แทรกตัวบน registry + งานวงการแทนการยิงโฆษณา
  • ไดเรกทอรีกลางโครงการ SEA ที่เชื่อถือได้
  • Deep link จาก registry ตรงสู่หน้าโครงการที่ตรวจสอบได้
  • โชว์ proof เหนือ fold ก่อนขอ login (no wall)
  • Live registry trace-back ระดับ serial
  • CA status โปร่งใส รวมถึง "ยังไม่อนุมัติ"
  • ปุ่ม "open in Verra/TGO" escape hatch
  • สร้างใบรับรอง retirement อัตโนมัติ
  • ส่งออก audit trail คลิกเดียว
  • 2 รูปแบบเอกสาร: audit-ready + narrative
Feature Prioritization

Impact / Effort matrix สำหรับจัดลำดับฟีเจอร์

ข้อมูลนี้ใช้เปรียบเทียบความสำคัญของฟีเจอร์เป็น Quick wins, Big bets, Fill-in และ Avoid โดยแกน Impact วัดจาก adoption + trust + revenue และแกน Effort วัดจากความซับซ้อนของระบบ + registry/payment dependencies

Feature priority map
Persona 01 · Community seller

Feature Prioritization — ครูบุญส่ง

ลำดับ feature สำหรับผู้ขายชุมชนที่ต้องเห็นราคาจริง ขายได้เอง ใช้งานง่ายแบบ Thai-first และมี support ช่วยลดความกังวลเรื่องเอกสาร/การจ่ายเงิน

Seller priority
Quick wins

do first

F10 F2 F8 F3
Big bets

fund deliberately

F5 F1 F4 F6 F9
Fill-in

later / optional

F7
Avoid

deprioritize — none

F1Real-time Market Price Board
F6Document Assistant
F2Price & Fee Transparency
F7Translation Helper
F3Price-timing Alerts (LINE)
F8Trust Badge & Social Proof
F4Direct Buyer Matching
F9Payment Tracking + Guarantee
F5Simple LINE UI (Thai-first)
F10Human Support
Persona 02 · Domestic buyer

Feature Prioritization — คุณณิชา

ลำดับ feature สำหรับ ESG manager ที่ต้องเทียบเครดิต ตรวจหลักฐาน ลดความเสี่ยง greenwashing และเตรียมเอกสารให้ผู้บริหาร/auditor ได้เร็วขึ้น

ESG buyer
Quick wins

do first

F1 F3 F10 F4
Big bets

fund deliberately

F2 F5 F6 F7 F8 F9
Fill-in

later / optional

F11 F12
Avoid

deprioritize — none

F1Net-Zero Requirement Intake
F7Retirement Certificate Automation
F2Verified Credit Marketplace
F8Procurement / Invoice Workflow
F3Public Verifiable Project Page
F9Dual-output Documents
F4Partner Channel + Case Studies
F10Executive Brief
F5Pre-signup Registry Trace-back
F11Guarantee / Remediation Path
F6Credit Comparison Table
F12Repeat Purchase / Reserve / Refer
Persona 03 · Foreign buyer

Feature Prioritization — James Carter

ลำดับ feature สำหรับ procurement lead ต่างประเทศที่ต้องตรวจ serial, registry, CA status, ownership และ export หลักฐานให้ audit ได้แบบ defensible

Foreign buyer
Quick wins

do first

F1 F4 F5 F8
Big bets

fund deliberately

F3 F6 F7 F9 F10
Fill-in

later / optional

F2 F11
Avoid

empty

F1CA Verification SEO Page
F7Transparent CA Status + Pending
F2Registry + Industry Event Channel
F8Open in Verra/TGO Escape Hatch
F3Trusted SEA Project Directory
F9Retirement Certificate Automation
F4Registry Deep Link to Project
F10One-click Audit Trail Export
F5Proof Above Fold / No Login Wall
F11Audit-ready + Narrative Docs
F6Live Serial Registry Trace-back
Information Architecture

โครงสร้างข้อมูลและหน้าจอสำหรับ VERDA mobile app

IA นี้แปลง persona, journey และ feature priority ให้เป็นโครงสร้าง navigation, sitemap, object model และ screen inventory เพื่ออธิบายว่าแต่ละ role เข้าใช้หน้าไหน ข้อมูลใดสัมพันธ์กัน และ action หลักคืออะไร

Structure map
Role-based IA

Entry point และเส้นทางหลักแยกตาม persona

เพิ่ม public trust entry สำหรับลิงก์จาก LINE, QR, registry หรือ partner channel ก่อนเข้าสู่ role-based home dashboard โดยคง object หลักร่วมกัน เช่น Project, Quote, Document และ Account

3 roles
กำลังโหลด diagram จาก verda-architecture-diagrams.md…
Public entry
Trust gateway — ก่อนสมัคร / ก่อน login

รองรับผู้ใช้ที่มาจาก LINE/QR, registry deep link, SEO หน้า CA verification หรือ partner referral ให้ตรวจ proof สำคัญได้ก่อนสร้างบัญชี

LINE/QR→ Public project→ Verify proof→ Login/Register
Seller
ครูบุญส่ง — Community seller

เน้นเริ่มใช้งานง่าย เห็นสถานะโครงการ ราคาที่ควรขาย เอกสารที่ค้าง และช่องทางช่วยเหลือแบบ LINE-first โดย seller bottom nav ใช้ 4 เมนูไทย ส่วน quote เป็น contextual action จากโครงการหรือแจ้งเตือน

หน้าแรก→ โครงการ→ เอกสาร→ ช่วยเหลือ
Domestic buyer
คุณณิชา — ESG manager

เน้นค้นหาและเทียบเครดิต ตรวจหลักฐาน สรุปเพื่อผู้บริหาร และ export เอกสารที่ audit ใช้ได้ โดย Compare เป็นหน้าลูกใต้ Explore ไม่ใช่เมนูหลัก

Explore→ Quotes→ Docs→ Account
Foreign buyer
James Carter — Carbon procurement lead

เน้น due diligence เชิงลึก ตรวจ registry/serial/CA status และรวบรวม audit trail ก่อนซื้อหรือ retirement โดย Due diligence และ Deal room เป็น contextual route ใต้ Explore/Quotes

Explore→ Quotes→ Docs→ Account
Sitemap

โครงสร้างหน้าจอระดับแอป

จัดกลุ่ม route ตามงานจริงของผู้ใช้: public discovery ก่อนสมัคร, เริ่มต้นใช้งาน, ค้นหา/ดูโครงการ, ตรวจสอบและทำ quote, จัดการเอกสารและ support

Navigation map
กำลังโหลด diagram จาก verda-architecture-diagrams.md…
00 · Public Trust Entry
LINE / QR Landingseller เริ่มจากลิงก์ที่คนไว้ใจส่งมา
Public Project Pageproof และ project story ก่อน signup
Registry Deep Linkเปิดจาก registry หรือ partner channel
CA Verificationตรวจ CA eligibility/status แบบไม่บังคับ login
01 · Entry & Account
Welcomeแนะนำ VERDA + เลือกภาษา
Login / Registrationเข้าสู่ระบบ, สมัคร, OTP, organization setup
Consent & Policyยินยอมข้อตกลง นโยบายข้อมูล และ audit use
Accountโปรไฟล์, role, organization, language, notification
02 · Marketplace
Home Dashboardงานที่ต้องทำ, alert, status snapshot
Explore / โครงการรายการโครงการ, filter, search, saved projects
Project Detailstory, price, volume, standard, proof above fold
Credit Compareเทียบราคา มาตรฐาน risk และเอกสาร
03 · Quote & Verification
Quote Requestปริมาณ, ราคา, fee breakdown, terms
Buyer Matchingจับคู่ buyer-seller และ message thread
Registry Trace-backserial, issuance, ownership, retirement status
CA Statuseligibility, pending/authorized state และ source link
04 · Docs & Support
Document HubT-VER, Verra/GS, land docs, translations
Report & Audit Exportaudit-ready pack, narrative pack, retirement certificate
Payment / Payoutsettlement, payout status, receipt, guarantee
Help / LINE Supportticket, human support, FAQ, field agent notes
Sitemap diagram view

ผัง IA/Sitemap แบบกล่องเชื่อมเส้น

เวอร์ชันนี้ใช้ข้อมูลเดียวกับ Sitemap ด้านบน แต่เพิ่ม trust gateway ก่อน Home เพื่อให้เห็นเส้นทางจาก LINE/QR, registry deep link และ public verification ตาม journey ใหม่

Comparison
กำลังโหลด diagram จาก verda-architecture-diagrams.md…
Public Trust Entry/public
Public Discoveryก่อน login
LINE / QR Landing
Public Project Page
Registry Deep Link
CA Verification
Entry & Accountก่อนเข้าใช้งาน
Welcome
Login / Registration
Consent & Policy
Home Dashboard
Account
Seller Workspaceชุมชน / ผู้ขาย
My Projects
Document Tasks
Quote Offers
Payout Status
LINE Support
Buyer Marketplaceไทย / ต่างประเทศ
Explore
Project Detail
Credit Compare
Saved Projects
Verification & Dealหลักฐาน / ธุรกรรม
Quote Request
Deal Room
Registry Trace-back
CA Status
Docs & Supportเอกสาร / ช่วยเหลือ
Document Hub
Report Export
Payment / Retire
Support Case
เริ่มได้จากนอกแอปPublic Trust Entry รองรับ LINE/QR, registry deep link และ CA verification ก่อนบังคับ login
เมนูหลักไม่เยอะเกินกลุ่ม route แยกตามงาน: account, seller, buyer, verification/deal และ docs/support
ยังอ้างอิงของเดิมไม่ได้ลบ Sitemap แบบคอลัมน์ ตาราง route หรือ object model เพื่อให้เทียบสองมุมมองได้
Detailed IA/Sitemap

IA/Sitemap แบบละเอียดตาม route และ role

แผนผังนี้แจกแจง sitemap ตามระดับหน้า, route, จุดประสงค์ และ persona เพื่อให้ทีมออกแบบและทีม dev เห็นขอบเขตหน้าจอ การนำทาง และ dependency เดียวกันก่อนเริ่มพัฒนา

Detailed routes
กำลังโหลด diagram จาก verda-architecture-diagrams.md…
L0 = gateway L1 = main tab / hub L2 = task screen L3 = evidence / export
00 · Public Trust Entry

ชั้นก่อนสมัครหรือก่อน login สำหรับผู้ใช้ที่มาจาก LINE/QR, registry, SEO หรือ partner referral และต้องตรวจความน่าเชื่อถือก่อนยอมให้ข้อมูล

Public
L0
LINE / QR Landing/public/line-entryseller เข้าจากลิงก์ที่คนไว้ใจส่งมา เห็นเหตุผล ความช่วยเหลือ และ CTA สร้างโครงการ
L0
Public Project Page/public/projects/:idproject story, proof, price range, registry summary และ CTA ที่ปรับตาม buyer/seller
L0
Registry Deep Link/registry/deep-link/:recordIdเปิดจาก registry หรือ partner channel แล้วพาผู้ซื้อเข้าหน้าโครงการพร้อม source context
L0
CA Verification/public/ca-verificationตรวจ CA eligibility/status แบบ proof above fold และยังไม่บังคับ login
L1
Continue to Account/public/continueส่ง context จาก public page เข้า login/register โดยไม่ทำให้ผู้ใช้เริ่มใหม่
01 · Entry & Account

ก่อนเข้าใช้งานและการตั้งค่าบัญชี ใช้ร่วมกันทุก persona แต่ copy และภาษาจะปรับตาม role

All roles
L0
Welcome/welcomeแนะนำคุณค่าหลัก เลือกภาษา และเข้าสู่ login/register
L1
Login/loginเข้าสู่ระบบด้วย OTP ลดภาระจำรหัสผ่านสำหรับ mobile-first seller
L1
Registration/registerเลือก role, ตั้งค่า organization/community และกำหนดภาษาเริ่มต้น
L2
Consent & Policy/consentบันทึก terms, privacy, audit data use และ notification consent ตาม version
L2
Account Settings/accountโปรไฟล์, language, notification, organization verification และ consent history
02 · Home & Task Center

จุดเริ่มหลัง login แสดงงานที่ต้องทำตาม role และดึงผู้ใช้กลับไปทำ task ที่ค้างอยู่

Gateway
L0
Home Dashboard/homeseller เห็น project/doc/payout, buyer เห็น shortlist/quote/audit status
L1
Task Center/tasksรวม missing docs, quote response, registry checks และ support follow-up
L1
Notifications/notificationsalert เรื่องเอกสาร, offer, settlement, retirement และ policy update
L2
Organization Profile/account/organizationข้อมูลบริษัท/ชุมชน, KYB/KYC, contact และ permission ของทีม
03 · Seller Workspace

พื้นที่ทำงานของชุมชนและเจ้าของโครงการ เน้นอัปโหลดเอกสาร เห็นราคา และติดตามเงินจ่ายสุทธิ

Seller
L1
My Projects/seller/projectsรายการโครงการของชุมชนพร้อมสถานะเอกสารและความพร้อมขาย
L2
Project Profile/seller/projects/:idstory, location, standard, volume, co-benefit และ visibility สำหรับ buyer
L2
Document Checklist/seller/projects/:id/docsเอกสารที่ต้องใช้, ไฟล์ที่ขาด, review state และคำแนะนำแบบทีละขั้น
L2
Price & Fee Preview/seller/projects/:id/pricingราคาตลาดเทียบเคียง, ค่าธรรมเนียม และประมาณการ payout สุทธิ
L2
Offer Review/seller/quotes/:idดูข้อเสนอจาก buyer, counter offer, terms และเวลาหมดอายุ
L2
Payout Tracking/seller/payouts/:idสถานะ settlement, receipt, guarantee และช่องทางติดต่อ support
04 · Buyer Marketplace

พื้นที่ค้นหา เทียบ บันทึก และเตรียม procurement สำหรับผู้ซื้อไทยและต่างประเทศ ก่อนเข้าสู่ quote หรือ due diligence

Buyer
L1
Explore/projectsค้นหา/filter โครงการตามประเภท มาตรฐาน ราคา volume vintage และ location
L2
Project Detail/projects/:idข้อมูลโครงการ, story, price range, evidence summary และ trust badges
L2
Credit Compare/compareเทียบ shortlist ด้วย price, quality, document readiness, registry และ risk
L2
Procurement Criteria/buyer/requirementsตั้งเป้าปริมาณ, geography, standard, CA requirement และ audit constraints
L2
Saved Projects/buyer/savedรายการที่บันทึกไว้ พร้อม status ว่าพร้อม quote หรือยังต้องตรวจเพิ่ม
L2
Procurement / Invoice Setup/buyer/procurementข้อมูลใบกำกับภาษี, purchase order, approval owner และ payment terms สำหรับองค์กร
L2
Reserve / Repeat Purchase/buyer/reservationsจองล่วงหน้า ซื้อซ้ำ และ referral หลัง transaction สำเร็จ
05 · Verification & Deal

แกนความน่าเชื่อถือของ VERDA สำหรับตรวจ registry/serial/CA และจัดการ quote ไปจนถึง retire

Evidence
L2
Due Diligence Summary/verification/:projectIdภาพรวม registry, serial, ownership, document source และ risk notes
L3
Registry Trace-back/verification/registry/:recordIdลิงก์ source, issuance, ownership, retirement status และ timestamp การตรวจ
L3
CA Status/verification/ca-statuscorresponding adjustment eligibility, pending/authorized state, source link และ claim guidance
L3
Open Source Registry/verification/open-source/:recordIdปุ่มออกไปยัง Verra/TGO/registry ต้นทางเพื่อให้ผู้ซื้อยืนยันด้วยตนเอง
L2
Quote Request/quotes/newกำหนดปริมาณ ราคา เงื่อนไข เอกสารที่ต้องแนบ และ expiry
L2
Deal Room/deal-room/:quoteIdเจรจา terms, message thread, approvals, invoice และ transaction state
L3
Retirement / Claim/retirements/:transactionIdretire status, certificate, claim boundary และ audit trail export
06 · Docs, Reports & Support

รวมเอกสาร การแปล export สำหรับ audit/ESG และช่องทาง support ที่ผูกกับ project, quote หรือ transaction

Ops
L1
Document Hub/docsรวม T-VER/TGO, Verra/GS, land docs, invoice, translations และ certificates
L2
Document Detail/docs/:idpreview, source, language, review history, expiry และ linked object
L2
Translation Queue/translationsไฟล์ไทยเป็นอังกฤษ, reviewer state และ buyer-facing summary
L2
ESG / Audit Export/reports/esg-packรวมหลักฐานสำหรับผู้บริหาร auditor และ sustainability report
L2
Dual-output Documents/reports/output-modesสลับระหว่าง audit-ready pack และ narrative/story pack จาก source ชุดเดียวกัน
L1
Help Center/helpFAQ, LINE support, field agent contact และเรื่องที่พบบ่อยตาม role
L2
Support Case/support/cases/:idticket timeline, owner, SLA, transcript และ object ที่เกี่ยวข้อง
Object model

ข้อมูลหลักของระบบที่ใช้ซ้ำหลายหน้าจอ

object เหล่านี้คือแกนของ route, permission, state และข้อมูลในระบบ ไม่ผูกกับหน้าจอเดียว เพราะถูกใช้ซ้ำในหลาย persona และหลาย flow

Data entities
User / Organization

role, language, company/community profile, consent, verification level, notification preference

Public Entry Context

source channel, referral, LINE/QR token, registry record ID, campaign intent, pre-login saved project

Project

ชื่อโครงการ, location, type, story, owner, standard, annual volume, co-benefit, trust badge

Credit Batch

vintage, tCO2e volume, available/held/retired quantity, price, fee, seller payout estimate

Registry Record

registry provider, project ID, serial number, issuance, ownership, retirement status, source link, last checked timestamp

CA / Claim Status

eligibility, authorization state, pending reason, host-country source, claim boundary, double-counting risk note

Quote / Offer

buyer, seller, quantity, offered price, fees, expiry, negotiation state, accepted/rejected reason

Transaction

deal terms, KYC/KYB, invoice, purchase order, settlement, retirement request, ownership transfer, audit log

Document

file type, source, language, translation status, required/optional flag, review state, expiry

Report Export

retirement certificate, audit-ready evidence pack, narrative pack, executive brief, source-file manifest

Payment / Payout

amount, payout account, milestone, guarantee, receipt, failure state, support escalation

Support Case

channel, topic, owner, SLA, linked project/quote/document, transcript, resolution status

Screen inventory

รายการหน้าจอหลักสำหรับ screen prototype

ตารางนี้อธิบายหน้าจอหลักจาก IA โดยระบุ persona หลัก, purpose, data dependency และ action ที่ทำให้แต่ละ screen เชื่อมกัน

Screen list
Screen / Route
Primary role
Purpose
Required data
Primary action
Public Project Page/public/projects/:id
All roles
ให้ผู้ใช้ตรวจ story, trust proof และ CTA ก่อนสร้างบัญชีหรือขอ quote
public entry context, project, credit batch, registry summary, trust signals
Verify proof / Continue
CA Verification/public/ca-verification
Buyer
ตรวจ CA eligibility/status แบบ proof above fold และเปิด source registry ได้
registry record, CA status, source URL, checked timestamp, risk note
Open source / Save context
Home Dashboard/home
All roles
แสดงงานที่ต้องทำต่อ, alert, project/quote/doc status ตาม role
user role, projects, quotes, notifications, document tasks
Resume task / View alert
Explore / โครงการ/projects
Buyer + Seller
ค้นหาโครงการหรือดูโครงการของตัวเอง พร้อม filter ตาม type, standard, price, volume
project list, price range, registry status, location, availability
Open project detail
Project Detail/projects/:id
All roles
รวม story, trust badge, price transparency, document status และ verification summary
project, credit batch, documents, registry record, trust signals
Request quote / Update project
Quote / Deal Room/quotes/:id
Seller + Buyer
เจรจาราคา เห็น fee breakdown ยืนยัน terms และติดตามสถานะ deal
quote, buyer/seller profile, credit batch, fees, messages, expiry
Accept / Counter / Decline
Document Hub/docs
All roles
รวบรวมเอกสารที่ต้องอัปโหลด ตรวจ แปล และ export ตาม role
documents, translation state, source links, review status, permissions
Upload / Translate / Export
Procurement / Invoice/buyer/procurement
Domestic buyer
เก็บ PO, ใบกำกับภาษี, ผู้อนุมัติ และเงื่อนไขชำระเงินก่อน purchase
organization, approval owner, billing profile, invoice, quote
Submit approval
Registry Verification/verification
Buyer
ตรวจ serial, registry, ownership, retirement และ CA status แบบ source-linked
registry record, serial numbers, CA status, source URLs, audit log
Verify / Save evidence
Report Output Modes/reports/output-modes
Buyer
เลือก export แบบ audit-ready หรือ narrative โดยใช้ source evidence ชุดเดียวกัน
report export, documents, registry record, CA note, retirement certificate
Export audit / Export narrative
Payment / Payout/payments
Seller
ติดตามเงินเข้า รายการหัก ค้ำประกัน และ receipt หลังปิดดีล
transaction, settlement status, payout account, receipt, guarantee state
Track payout / Contact support
Help / Support/help
All roles
รวม LINE support, field agent, ticket, FAQ และ escalation สำหรับเอกสาร/ดีล
support case, linked object, channel, SLA, transcript
Create case / Open LINE
Account & Consent/account
All roles
จัดการโปรไฟล์องค์กร ภาษา การแจ้งเตือน ความยินยอม และ policy version
user, organization, consent records, policy version, preferences
Edit profile / Update consent
Screen Prototype

Prototype paths — entry, seller, domestic buyer, foreign buyer

ผมจัดชุดหน้าจอตาม task flow ที่ผู้ใช้ต้องผ่านจริง เริ่มจาก public trust entry ผ่าน LINE/QR, public project page และ registry deep link แล้วจึงเข้าสู่ account flow, seller path, domestic buyer evaluation และ foreign buyer due diligence เพื่อให้รีวิว interaction ได้เป็นลำดับเดียวกับการใช้งาน

Round 1 paths
Hi-fi screens

Hi-fi UI screens

Hi-fi UI จำนวน 26 หน้าจอแสดง layout, content hierarchy, component และ state ของแต่ละ route โดยจัดกลุ่มตาม flow ของ persona เพื่อใช้รีวิวประสบการณ์แบบ end-to-end และเป็น visual reference ระหว่างพัฒนา

26 screens
Public Trust Entry
9:41
VERDA
ตลาดคาร์บอนเครดิต
ที่ตรวจสอบได้ด้วยตัวเอง
เชื่อมชุมชนไทยกับผู้ซื้อ ESG อย่างเป็นธรรม โดยไม่ต้องผ่านนายหน้าที่ไม่โปร่งใส
128
โครงการตรวจสอบแล้ว
100%
เชื่อมโยง Registry
เข้าสู่ระบบด้วย LINE หรือสแกน QR
สแกนเพื่อรับการดูแลแบบมีผู้ช่วย
พิสูจน์ความน่าเชื่อถือได้ ก่อนสร้างบัญชี
LINE / QR Landing/public/line-entry
9:41
PUBLIC · ไม่ต้องเข้าสู่ระบบ Verified
1,240 ไร่ · ป่าต้นน้ำ
ป่าชุมชนบ้านแม่ทา
แม่ออน · เชียงใหม่ · ประเทศไทย
T-VER (TGO) Verra VCS REDD+
ช่วงราคาตลาดอ้างอิง
฿320–380/ tCO₂e
ราคาขั้นต่ำราคาตลาดปัจจุบัน
ป่าชุมชน 1,240 ไร่ ดูแลโดย 86 ครัวเรือน ตั้งแต่ปี 2562 — ฟื้นฟูพื้นที่ต้นน้ำและสร้างรายได้ที่เป็นธรรมกลับสู่ชุมชนโดยตรง
Public Project Page/public/projects/:id
9:41
Source-linked · เปิดจากลิงก์ Registry โดยตรง
Registry Record
Record IDTGO-VER-2566-0188
Serial range…0188-1 → …0188-12400
Standard / VintageT-VER · 2023
StatusVerified · Active
Ownership
ชุมชนบ้านแม่ทา
ยังไม่ถูกโอน
Retirement
Not retired
พร้อมจำหน่าย
CA / Corresponding Adjustment: Pending
ยังไม่ได้รับการอนุมัติ corresponding adjustment — แสดงสถานะตามจริงเพื่อความโปร่งใส
Registry / CA Deep Link/registry/deep-link/:recordId
Entry & Account
9:41
THEN
Welcome
ยินดีต้อนรับสู่ VERDA
ตลาดคาร์บอนเครดิตที่เป็นธรรม โปร่งใส และตรวจสอบได้ด้วยตัวเอง
เมื่อดำเนินการต่อ ถือว่ายอมรับ เงื่อนไขการใช้งาน และ นโยบายความเป็นส่วนตัว
Welcome/welcome
9:41
เข้าสู่ระบบ
ยืนยันตัวตนด้วยรหัส OTP ทาง SMS
เบอร์โทรศัพท์
+66081 234 5678
รหัส OTP (6 หลัก)
4
8
1
ส่งรหัสอีกครั้งใน 0:24
เข้าสู่ระบบแล้วจะนำคุณไปยังพื้นที่ทำงานตามบทบาทที่เลือก
Login · OTP/login
9:41
สมัครสมาชิก
เลือกบทบาทของคุณ · Select your role
ครูบุญส่ง · ชื่อ–นามสกุล
วิสาหกิจชุมชนบ้านแม่ทา
Registration/register
9:41
ความยินยอม
สรุปนโยบายแบบเข้าใจง่าย · แตะเพื่ออ่านเพิ่ม
สรุปนโยบาย (Summary-first)
VERDA ไม่ถือครองเครดิตแทนคุณ · ค่าธรรมเนียมแสดงชัดเจนก่อนยืนยัน · ข้อมูลโครงการสาธารณะตรวจสอบได้
ยอมรับ เงื่อนไขการใช้งาน และนโยบายความเป็นส่วนตัว (PDPA)
ยินยอมให้แสดง ข้อมูลโครงการแบบสาธารณะ เพื่อการตรวจสอบ
รับข่าวสารราคาตลาดและคำขอซื้อ (ไม่บังคับ)
Consent & Policy/consent
Seller Workspace
9:41
บส
สวัสดีครับ
ครูบุญส่ง
ความพร้อมของโครงการป่าชุมชนบ้านแม่ทา
72%พร้อมเสนอขาย
ราคาตลาดอ้างอิงโปร่งใส
฿320–380/ tCO₂e
ราคาที่ผู้ซื้อเสนอ฿360
ค่าธรรมเนียม VERDA (4%)−฿14.40
รับสุทธิโดยประมาณ฿345.60
Seller Home/seller/projects
9:41
ตั้งค่าโครงการ
ป่าชุมชนบ้านแม่ทา
ความพร้อม 3 / 5 ขั้นตอน72%
ข้อมูลโครงการและพื้นที่เสร็จ
มาตรฐาน T-VER / Verraเสร็จ
เชื่อมโยง Registryเสร็จ
ตั้งราคาและเงื่อนไขรอ
รายละเอียดเครดิต
ปริมาณ
12,400
tCO₂e
Vintage
2023
T-VER
Project Setup/seller/projects/:id
9:41
เอกสารโครงการ
รายการเอกสาร
ขาดเอกสาร 2 รายการ — ทีมงานช่วยจัดเตรียมได้ผ่าน LINE
หนังสือรับรองสิทธิ์พื้นที่
ตรวจสอบแล้ว
เอกสารรับรอง T-VER
ตรวจสอบแล้ว
แผนที่แนวเขตพื้นที่ (GIS)
ยังไม่ได้อัปโหลด
มติที่ประชุมชุมชน
ยังไม่ได้อัปโหลด
รายงานการตรวจวัด (MRV)
กำลังตรวจสอบ
Document Checklist/seller/projects/:id/docs
9:41
คำขอซื้อ
บริษัท ณิชาเอ็กซ์พอร์ต
ผู้ซื้อ ESG ในประเทศ · ตรวจสอบแล้ว
แปลจากข้อความผู้ซื้อ
“เราสนใจเครดิตจากป่าชุมชนของท่าน 1,200 tCO₂e สำหรับเป้าหมาย Net-Zero ปีนี้ ขอทราบราคาและเอกสารตรวจสอบครับ”
ต้นฉบับ (EN): "We're interested in 1,200 tCO₂e from your community forest…"
ประมาณการคำขอ
ปริมาณ1,200 tCO₂e
ราคาเสนอ฿360 / tCO₂e
มูลค่ารวม฿432,000
Buyer Inquiry/seller/quotes/:id
9:41
ใบเสนอราคา
ยืนยันการขาย
ใบเสนอราคา#Q-2566-0431
1,200 tCO₂e × ฿360฿432,000
ค่าธรรมเนียม VERDA (4%)−฿17,280
ค่าโอน Registry−฿1,200
ยอดรับสุทธิ฿413,520
ค่าธรรมเนียมทุกรายการแสดงชัดเจน ไม่มีค่าใช้จ่ายแอบแฝง
ใบเสนอราคานี้มีผลถึง 23 มิ.ย. 16:00 น.
Accept Quote/seller/quotes/:id
9:41
โอนเงินสำเร็จ
เครดิตถูกโอนและบันทึกใน Registry เรียบร้อย
฿413,520
เข้าบัญชี ธ.ก.ส. ลงท้าย 4821
เครดิตโอนเข้าผู้ซื้อ
21 มิ.ย. 14:32
โอนเงินเข้าบัญชีชุมชน
21 มิ.ย. 14:35
Payout Done/seller/payouts/:id
Domestic Buyer
9:41
คุณณิชา · ESG Manager
ค้นหาเครดิต
ณ
เป้าหมาย Net-Zero 2030 · ประจำปีนี้
8,400/ 12,000 tCO₂e จัดหาแล้ว
ค้นหาโครงการ มาตรฐาน พื้นที่…
ทั้งหมดT-VERป่าไม้ความเสี่ยงต่ำ
Explore/projects
9:41
เปรียบเทียบเครดิต
3 โครงการ
เลื่อนแนวนอนเพื่อดูทั้งหมด
เกณฑ์ แม่ทา หญ้าทะเลตราด ป่าชายเลนกระบี่
ราคา /tCO₂e฿360฿520฿410
Registry✓ พร้อม✓ พร้อม✓ พร้อม
เอกสารครบ60%ครบ
เรื่องราว80%ดี70%
ความเสี่ยง auditต่ำกลางต่ำ
แนะนำ: ป่าชุมชนบ้านแม่ทา — ความเสี่ยง audit ต่ำ เอกสารครบ ราคาเหมาะสม
Compare Credits/compare
9:41
ป่าชุมชนบ้านแม่ทา
Verified · T-VER · 12,400 tCO₂e
หลักฐานเชื่อมต้นทาง (Source-linked)
บันทึก Registry TGO
TGO-VER-2566-0188
รายงานตรวจวัด MRV 2023
PDF · 4.2 MB · ตรวจสอบแล้ว
ภาพถ่ายดาวเทียมพื้นที่
เปรียบเทียบ 2019–2023
Evidence/projects/:id
9:41
สรุปผู้บริหาร · Executive Brief
การจัดหาคาร์บอนเครดิต
ไตรมาส 2/2566 · บจก. ณิชาเอ็กซ์พอร์ต
ปริมาณ
1,200
tCO₂e
มูลค่า
฿432K
รวม
ความเสี่ยง
ต่ำ
audit
โครงการ ป่าชุมชนบ้านแม่ทา ผ่านการตรวจสอบมาตรฐาน T-VER มีบันทึก Registry สาธารณะ เอกสารครบถ้วน และความเสี่ยงด้านการตรวจสอบต่ำ เหมาะสำหรับเป้าหมาย Net-Zero ขององค์กร
ลดความเสี่ยงข้อกล่าวหา greenwashing
หลักฐานตรวจสอบได้สาธารณะ
สนับสนุนชุมชนท้องถิ่นโดยตรง
Executive Brief/reports/esg-pack
9:41
จัดซื้อ · ออกใบแจ้งหนี้
คำสั่งซื้อ
เลขที่ POPO-2566-1042
ป่าชุมชนบ้านแม่ทา1,200 tCO₂e
ราคาต่อหน่วย฿360
VAT 7%฿30,240
รวมชำระ฿462,240
วิธีชำระเงิน
โอนผ่านบัญชีองค์กร
วางบิล 30 วัน
Procurement · Invoice/buyer/procurement
9:41
ชุดเอกสาร · Audit Pack
ส่งออกเอกสาร
Audit-ready
หลักฐาน serial, registry, MRV
Narrative
สำหรับสื่อสารและลูกค้า
หนังสือรับรอง RegistryPDF
รายงาน MRV และ serialPDF
ใบแจ้งหนี้และ POPDF
พร้อมส่งออก · 3 ไฟล์ · 8.4 MB
Audit Pack/reports/output-modes
Foreign Buyer
9:41
James Carter · APAC
SEA Carbon Explore
THEN
Offset Mandate · FY2026
50,000tCO₂e to procure
Source-linked, defensible evidence required · CA status must be disclosed
Standards
AllVerra VCSGold StandardT-VER
SEA Explore/projects
9:41
Source-linked proof · above the fold
Mae Tha Community Forest
Thailand · T-VER · 12,400 tCO₂e · 2023
Registry recordTGO-VER-2566-0188
Standard / vintageT-VER · 2023
VerificationVerified
Project Detail/projects/:id
9:41
Registry Check
Registry record matched
VERDA record = TGO public registry
Serial range
TGO-2566-0188-1 → 0188-12400
Serial statusActive · Not retired
Ownership chain
Mae Tha Community Enterpriseissuer
No transfer yet
Registry Check/verification/registry/:recordId
9:41
CA / Claim Status
Corresponding Adjustment
CA status: Pending
Not yet authorized by host country
This credit does not yet carry an approved corresponding adjustment. We disclose this honestly — do not claim toward Article 6 / international transfer until authorized.
Double-counting risk
Single registry of record — no duplicate issuance found
CA pending — domestic claim only until authorized
CA Status/verification/ca-status
9:41
Document Hub
Evidence & Audit Trail
Registry certificate
TGO · verified source
Verified
MRV report 2023
PDF · 4.2 MB
Verified
CA authorization letter
Awaiting host country
Pending
Document Hub/docs
9:41
Audit Export
Output mode
Audit-ready
Serials, registry, CA disclosure
Narrative
Board & stakeholder story
Export ready
Audit trail + evidence pack · 5 files · 11.6 MB
Audit Export/reports/esg-pack
States
9:41
Operational States
สถานะระบบ · State examples
ทุกสถานะใช้ไอคอน + ข้อความ ไม่พึ่งสีเพียงอย่างเดียว
Loading registry data
กำลังดึงข้อมูลจาก TGO…
Empty state
ยังไม่มีคำขอซื้อในขณะนี้
Missing document
ขาดแผนที่แนวเขต GIS
Required
Pending review
รอตรวจสอบ MRV (1–2 วัน)
Verified
ตรงกับ Registry สาธารณะ
Rejected / mismatch
Serial ไม่ตรงกับ Registry
Quote expired
ใบเสนอราคาหมดอายุ · ขอใหม่
Payment delayed
รอการยืนยันการโอน 1 วัน
CA not authorized
เปิดเผยตามจริง · ใช้ในประเทศเท่านั้น
Export ready
ชุดเอกสารพร้อมดาวน์โหลด
Ready
Operational States/states
Empathy Map

สิ่งที่ persona พูด คิด ทำ และรู้สึก

บอร์ดนี้เป็นข้อมูลตั้งต้นสำหรับ copy, flow, trust signal และ interaction priority ของแต่ละ persona ก่อนออกแบบหน้าจอและ state

UX workshop artifact
Community Seller

Empathy Map — ครูบุญส่ง

ประธานวิสาหกิจชุมชนป่าชุมชน จังหวัดน่าน ผู้ต้องการขายเครดิตเองอย่างมั่นใจและโปร่งใส

Seller
ครูบุญส่ง
Sayสิ่งที่พูดออกมา
ไม่รู้ว่าราคาที่ได้มันยุติธรรมหรือเปล่า ไม่มีที่ให้เทียบ
นายหน้าโทรมา เราก็ได้แต่เชื่อเขา
ถ้ามันง่ายเหมือน Line ผมก็ทำเองได้
ผมจะมั่นใจได้ยังไงว่าไม่ใช่มิจฉาชีพ
Thinkสิ่งที่คิดอยู่ในใจ
สงสัยว่านายหน้ากินส่วนต่างไปเท่าไหร่ แต่ไม่กล้าถาม
กลัวรับผิดชอบกับชาวบ้านไม่ไหวถ้าตัดสินใจพลาด
ตลาดต่างชาติเป็นโลกที่ไกลตัว ทั้งที่รู้ว่าราคาน่าจะดีกว่า
ลึก ๆ อยากพึ่งตัวเองได้ ไม่อยากตั้งรับรอคนอื่นตลอด
Doพฤติกรรมที่ทำจริง
นั่งรอนายหน้าติดต่อมา ไม่เคยเป็นฝ่ายรุก
ถามราคาและผู้ซื้อในกลุ่ม Line วิสาหกิจชุมชนแบบปากต่อปาก
ขอลูกหลานช่วยอ่านเอกสารอังกฤษและกดมือถือขั้นตอนซับซ้อน
ใช้ Line และแอปธนาคารพื้นฐานได้คล่อง แต่เลี่ยงการเปิดเว็บเอง
Feelอารมณ์ความรู้สึก
ไม่มั่นคงและตั้งรับ รายได้ขึ้นอยู่กับว่าจะมีคนโทรมาไหม
หงุดหงิดและเหนื่อยใจกับเอกสารและกระบวนการที่ซับซ้อน
ระแวงทั้งเรื่องโดนกดราคาและกลัวโดนหลอกถ้าลองของใหม่
ภูมิใจและมีความรับผิดชอบต่อป่าและชาวบ้านที่ช่วยกันดูแล
Domestic Buyer

Empathy Map — คุณณิชา

ESG Manager ที่ต้องพิสูจน์ความน่าเชื่อถือของเครดิตก่อนเสนอผู้บริหารและใช้ใน audit

ESG
คุณณิชา
Sayสิ่งที่พูดออกมา
ต้องเป็นมาตรฐานสากลที่ audit ยอมรับ ไม่งั้นอย่างอื่นไม่มีความหมาย
ยอมจ่ายแพงกว่านิดเพื่อความสบายใจตอน audit
ต้องตรวจสอบย้อนกลับไปถึงทะเบียนต้นทางได้ด้วยตัวเอง
ถ้าไม่มีใบ retirement certificate ก็จบ ไม่ต้องคุยต่อ
Thinkสิ่งที่คิดอยู่ในใจ
กลัวว่าถ้าซื้อผิดจะทำลายชื่อเสียงบริษัทและกระทบออเดอร์
รู้ตัวว่าไม่ใช่ผู้เชี่ยวชาญคาร์บอน จึงไม่กล้าฟันธงต่อผู้บริหาร
แอบระแวงว่าโบรกเกอร์อาจปกปิดบางอย่าง
ราคาถูกผิดปกติเท่ากับน่าสงสัย ต้องมีอะไรไม่ชอบมาพากล
Doพฤติกรรมที่ทำจริง
ไล่ถามโบรกเกอร์หลายเจ้าทางอีเมลทีละราย
เข้าเว็บทะเบียน Verra/Gold Standard เช็กเลขโครงการเอง
เสิร์ชหาข่าวเกี่ยวกับโครงการก่อนตัดสินใจ
ยอมถอยจากดีลทันทีเมื่อเจอสัญญาณเสี่ยง
Feelอารมณ์ความรู้สึก
เครียดและเหนื่อยใจกับกระบวนการที่ยืดเยื้อเป็นเดือน
กังวลและระแวงตลอดเวลา เพราะ greenwashing คือฝันร้าย
รู้สึกไม่ปลอดภัยเพราะมีช่องโหว่ที่ปิดเองไม่ได้
โดดเดี่ยวในความรับผิดชอบที่เดิมพันสูง
Foreign Buyer

Empathy Map — James Carter

Carbon Procurement Lead ที่ต้องตรวจ serial, CA status, ownership และ audit trail ก่อนซื้อเครดิต

EN
James Carter
SayWhat he states out loud
"It can't just be a listing site — it has to pull live data straight from the registries."
"Verra and Gold Standard are the baseline."
"If it's just another broker with a nicer interface, I've got plenty of those already."
"Hidden margins are exactly why I distrust brokers."
ThinkBeliefs & internal calculations
Every credit is a potential reputation landmine for the company.
Can I independently verify this, or am I just trusting someone's word?
If corresponding adjustment isn't confirmed, this is a double-counting risk.
Intermediaries each take a cut and add their own spin.
DoObservable workflow
Lives in spreadsheets, registry portals, and market-data subscriptions.
Manually stitches information together from about 5 separate sources.
Emails project developers and government bodies directly to chase CA confirmation.
Runs weeks of due diligence: site visits, third-party verification, serial checks.
FeelEmotional state
Anxious about reputation and headline risk.
Frustrated by the document chase and language barriers.
Distrustful of brokers and opaque pricing.
Burdened by a fragmented, manual workflow.
07 / User flow

User flow

แผนผังนี้แสดง task sequence ของแต่ละ persona พร้อม interaction, จุดตัดสินใจ, หน้าจอปลายทาง และ state ที่ต้องรองรับ ทีม dev สามารถใช้ตรวจ route และ acceptance flow ขณะที่ทีมออกแบบใช้ตรวจความต่อเนื่องของประสบการณ์ก่อนส่งมอบ

Step + click flow
กำลังโหลด diagram จาก verda-architecture-diagrams.md…
Public trust entry path ลำดับก่อนสมัคร: seller เข้าจาก LINE/QR, buyer เปิด public project page และ foreign buyer เปิด registry/CA deep link โดยต้องเห็น proof สำคัญก่อนถูกขอ login
LINE / QR→ Public Project→ Registry Deep Link→ CA Verification→ Continue to Account
Entry & account setup path ลำดับตั้งแต่ first touch เลือกบทบาท ยืนยันตัวตน ยอมรับ consent และเห็น policy แบบอ่านง่ายก่อนเริ่ม flow หลัก
Welcome→ Login→ Registration→ Consent→ Policy
Seller happy path ครูบุญส่งเริ่มใช้งานเอง เห็นความคืบหน้า เข้าใจราคา และมั่นใจเรื่องการรับเงินได้ต่อเนื่อง
LINE Start→ Seller Home→ Project Setup→ Docs→ Profile Preview→ Buyer Inquiry→ Accept Quote→ Payout Done
Domestic buyer evaluation path คุณณิชาตั้งแต่รับโจทย์ Net-Zero ค้นหาเครดิต เทียบหลักฐาน ขออนุมัติผู้บริหาร ซื้อ และส่งออกชุดเอกสารสำหรับ audit
Need Trigger→ Explore→ Compare→ Evidence→ Executive Brief→ Quote→ Purchase→ Audit Pack
Foreign buyer due diligence path James Carter: sourcing SEA credits, filtering by standards, verifying registry และ CA status, reviewing source-linked documents และ exporting audit trail
Offset Need→ Registry Deep Link→ SEA Explore→ Standards Filter→ Project Detail→ Registry Check→ CA Status→ Document Hub→ Audit Export
Operational states ชุด state ที่ต้องเตรียมรองรับระหว่าง onboarding, document review, quote, payment และ due diligence
Empty→ Loading→ Missing document→ Pending review→ Verified→ Rejected→ Quote expired→ Payment delayed→ CA not authorized→ Export ready
Interaction & click flow ตารางนี้ระบุ action หลักของแต่ละ path ว่ากดจาก screen ไหน ไป screen ไหน และควรเตรียม state ใดไว้รองรับเมื่อทำ prototype แบบ clickable
Path
Source screen
Primary interaction
Target screen
State / behavior
Public
LINE / QR Landingpre-login seller entry
กด “เริ่มประเมินโครงการ”
Registration / Project Setup
ส่ง LINE/QR source context เข้า registration และคงภาษาไทย + support channel ไว้ตลอด flow
Public
Public Project Pagepre-signup buyer proof
กด “ขอ quote / สมัครเพื่อเก็บรายการ”
Login / Compare / Quote
ผู้ใช้ต้องกลับมาที่ project เดิมหลัง login พร้อม saved context และ evidence ที่เพิ่งตรวจไว้
Public
Registry / CA Deep Linkforeign buyer source entry
กด “Continue due diligence” หรือ “Open source”
Registry Check / External registry
แสดง proof before login; ถ้าเปิด source ให้กลับมา Verda พร้อม record ID และ CA state เดิม
Seller
LINE Startfirst entry
กด “เริ่มสร้างโครงการ”
Project Setup
ถ้ายังไม่มีโครงการให้เริ่มจาก Empty state และเก็บ LINE identity เป็น entry context
Seller
Seller Homedashboard
กด task card “กรอกข้อมูลโครงการ”
Project Setup
progress ต้องค้างตำแหน่งล่าสุดได้ ถ้าข้อมูลยังไม่ครบให้แสดง inline missing state
Seller
Document Checklistdocs
กด “เพิ่มไฟล์” หรือ “คุย LINE”
Upload sheet / LINE support
หลังอัปโหลดสำเร็จไป Pending Review; ถ้ายังขาดไฟล์คง Missing Document
Seller
Buyer Inquirydemand signal
กด “ดูข้อเสนอ”
Accept Quote
ถ้า quote เลยเวลาให้แสดง Quote Expired และเปิด action ขอราคาใหม่
Seller
Accept Quoteseller decision
กด “ยอมรับ”
Payout tracking
หลังยอมรับให้ล็อก fee breakdown; ถ้า settlement ช้าให้แสดง Payment Delayed
Domestic buyer
Need Triggeroffset brief
กด “ค้นหาโครงการ”
Explore
ส่ง requirement เช่น volume, timeline, standard ไปเป็น filter เริ่มต้น
Domestic buyer
Compareshortlist
กด “ดูหลักฐาน”
Evidence
ถ้าหลักฐานไม่ครบให้ flag Missing Document หรือ Pending Review ตาม source status
Domestic buyer
Executive Briefapproval
กด “ส่งอนุมัติ”
Quote
ถ้าอนุมัติแล้วยังไม่ซื้อให้ quote มี expiry timer และ reminder state
Domestic buyer
Purchasesettlement
ระบบยืนยัน retirement
Audit Pack
ระหว่างสร้างเอกสารใช้ Loading; หาก retirement ยังไม่สำเร็จให้แสดง Pending Review
Foreign buyer
Project Detailevidence first
Open chain-of-custody
Registry Check
show Loading while syncing; Verified only when live source record matches
Foreign buyer
Registry Checkserial evidence
Save evidence / continue
CA Status
if CA is missing, route to CA Not Authorized and include risk note in export
Foreign buyer
Document Hubsource-linked docs
Export / Share link
Audit Export
all translated documents, source links, CA note and serial records must be bundled
All paths
Bottom navigationglobal movement
Tap nav icon
Home / Projects / Docs / Help หรือ Explore / Quotes / Docs / Account
preserve unsaved form work before navigation; show confirmation only when data may be lost
02 / Tokens

Design tokens & UI foundations

ผมกำหนดค่ากลางสำหรับสี ตัวอักษร spacing, radius, elevation และ touch target เพื่อให้หน้าจอและ component ใช้ภาษาออกแบบเดียวกัน ตาราง token ด้านล่างระบุชื่อและค่าที่ทีม dev นำไปผูกกับระบบจริงได้โดยไม่ต้องตีความจากภาพ

ForestPrimary brand, verified states, main CTA, project trust surfaces
50#E8F3EF
100#C8E4DA
200#95CDBC
300#5FB39C
400#2E9077
500#0B6B53
600#095A46
700#084A3A
800#06382C
900#042A21
950#021B15
RiceAgriculture projects, rice-field category, positive rural cues
50#F4FAEA
100#E3F2CB
200#C8E49E
300#A8D06F
400#84B94D
500#5F9F3D
600#487F30
700#386228
800#2C4D22
900#233F1D
950#10200D
EarthLand ownership, community context, document folders, secondary accents
50#F8EFE7
100#EED9C7
200#E4C4A8
300#D9AC8A
400#C58F67
500#B9784D
600#985F3B
700#764A2E
800#5D3B28
900#493023
950#281713
SkyGlobal buyer flow, links, language helper, export and share actions
50#EAF4FF
100#CFE6FF
200#A9D2FF
300#75B6FF
400#3D91F5
500#2563EB
600#1E4FD1
700#1E40AF
800#1D367F
900#1C2F63
950#101B3A
AmberPending review, missing evidence warning, attention states
50#FFF7DF
100#F8E2A4
200#F2CC68
300#E9B535
400#E0A10F
500#D99100
600#AF7000
700#875400
800#684000
900#4F3204
950#2C1A02
RoseError, rejected document, risk, destructive action confirmation
50#FFF0F1
100#FFD6DA
200#FFADB7
300#F97689
400#EF526B
500#DF4D5F
600#C53045
700#A92538
800#842131
900#6B1F2C
950#3D0D18
CarbonText, border, surfaces, disabled states, high-contrast UI structure
50#F2F5F2
100#E7ECE9
200#D2DAD6
300#B2BEB9
400#8A9893
500#677571
600#4E5A56
700#3A4441
800#28302D
900#161C1A
950#0A100E
SuccessVerified, paid, completed, serial ready
WarningPending, review, incomplete evidence
DangerRejected, missing required document, risk
InfoEnglish profile, export, global buyer link

Icon tokens

StyleLine icon, rounded cap/join, no filled decorative icon
Stroke`--icon-stroke: 2`; keep consistent across all navigation and CTA icons
Sizes16182024
Bottom nav`--icon-nav: 23px`; icon-only nav requires `aria-label` and hidden text
ColorUse `currentColor`; active nav uses `--brand-strong`, inactive uses `--text-muted`

Icon library map

ชุด icon ที่ใช้ใน mockup พร้อมชื่อเรียกเดียวกันสำหรับ navigation, action และ status

Homehome
Projectsprojects
Docsdocs
Helphelp
Exploreexplore
Quotesquotes
Uploadupload
Languagelanguage
Supportsupport
Connectconnect
Accountaccount
Registryshield · verify
Consentlock · CA
Checklistchecklist
Stat / number
฿320–380 /tCO₂e
Hi-fi: 26–42 · 700 · tnum
Screen title
ตลาดคาร์บอนเครดิตที่ตรวจสอบได้ด้วยตัวเอง
Hi-fi: 19–22 / 30 · 700
Section heading
เอกสารที่ต้องตรวจ
Hi-fi: 15–17 / 24 · 700
Body strong
โครงการผ่านการตรวจเบื้องต้นแล้ว เหลือเอกสารแนบอีก 2 รายการ
Hi-fi: 14 / 22 · 600
Body
เหมาะสำหรับเนื้อหาหลัก ป้ายอธิบาย และข้อความสองภาษาในหน้าเดียวกัน
Hi-fi: 12–13 / 20 · 500
Micro label · mono
Public · Registry · Serial range
Hi-fi: 10–11 · 600 · 0.04em

Spacing scale

ใช้ 4px grid แต่เลือกค่าหลักที่เหมาะกับมือถือ: content margin 16px, card padding 16px, page section 24-32px, touch target 44px ขึ้นไป

14px
28px
312px
416px
624px
832px
1248px
Spacing placement guide

Guide การวางระยะใน mobile screen

ใช้ spacing token เป็นภาษากลางของหน้าจอ: เริ่มจาก 4px base grid, เลือกระยะตามระดับความสัมพันธ์ของ content และไม่ใช้ค่า margin/padding แบบสุ่มนอก token

4px base grid
4px / 8px Micro spacing

ใช้กับ icon-label, badge dot, helper text ใต้ field, ระยะระหว่างปุ่ม icon กับข้อความ และสถานะเล็ก ๆ ใน card

12px Related content

ใช้กับ item ใน list, field stack, stepper row, document row และกลุ่มข้อมูลที่ยังอยู่ในเรื่องเดียวกัน

16px Default mobile rhythm

ใช้เป็น page side margin, card padding, bottom nav inner padding, และระยะหลักของ component ภายในหน้าจอ

20px / 24px Section grouping

ใช้คั่นกลุ่มข้อมูลที่เปลี่ยนบริบท เช่น price panel ไป document checklist หรือ form group ไป consent group

32px Page section break

ใช้ระยะบนล่างของ section สำคัญใน mobile flow เช่น hero to CTA, summary to list, และ screen-to-screen preview

44px min · 46px CTA Touch target

touch target ขั้นต่ำ 44px แม้ icon จะมีขนาด 20-24px — จาก Hi-fi จริง: primary CTA สูง 46px, ปุ่มใหญ่/บล็อกกด 52px, แถวรายการกดได้ 42px ขึ้นไป

16pxใช้เป็น screen side margin และ card padding มาตรฐาน เพื่อให้มือถืออ่านง่ายและไม่ชิดขอบ
12pxใช้เป็น gap ระหว่าง label, value, helper text และ row ที่อยู่ใน component เดียวกัน
24pxใช้แยกกลุ่มข้อมูลคนละหน้าที่ เช่น project summary กับเอกสาร หรือ consent กับ action
8pxใช้กับปุ่มคู่, badge group, icon กับ text และ micro interaction ที่ต้องอ่านเป็นชุดเดียวกัน
Screen padding: 16px
Section vertical: 24px
Card padding: 16px · content gap: 12px
Action gap: 8px · touch height: 44px

Radius card

--radius-3
8px
card 8
Project card ใช้กับ project, document, price panel และ dashboard card

Card radius คมพอให้เป็น product tool แต่ยังนุ่มพอสำหรับ mobile marketplace.

Radius sheet

--radius-sheet
16px
Bottom sheet ใช้กับ quote detail, language selector, document action และ support option

Sheet radius ใช้เฉพาะ surface ที่ลอยขึ้นมา เพื่อแยกระดับจาก card ปกติ.

Elevation

border + shadow
e1 / e2 / e3
e1 card
e2 sheet
e3 modal

ใช้ shadow น้อยและพึ่ง border เป็นหลัก โดยเฉพาะ dark mode เพื่อไม่ให้ UI ดูเป็น fintech trading terminal.

Touch target

min 44 · Hi-fi CTA 46
44

ปุ่ม, icon button, navigation item และ checklist action ใช้พื้นที่แตะอย่างน้อย 44px เพื่อรองรับ seller ที่ใช้มือถือเป็นหลัก.

03 / Components

Components

ชุด UI component หลักของ VERDA ครอบคลุม app bar, card, carbon-standard chip, status badge, price panel, progress, registry/CA row, output-mode toggle, language switcher และ bottom navigation แต่ละ component ใช้รูปแบบและความหมายของสถานะร่วมกัน เพื่อให้ทีม dev สร้างหน้าจอใหม่จากระบบเดิมได้โดยไม่เกิด pattern ซ้ำซ้อน

10:255G 100%
Buyer workspace Carbon Procurement Lead
EN
Mae Wang Community Forest Thailand · T-VER · Community co-benefit
Verified
English profile Documents checked SDG 15
Indicative buyer price$24 - $27
/ tCO2e
Request verified quote
Document translationThai source · English summary ready
Ready
Verification evidenceRegistry, vintage, serial status
Review
Inquiry timeline Visible to buyer and seller
Quote requestedBuyer asked for 3,000 tCO2e
VERDA reviewFee and documents confirmed
Connect callSeller, buyer, VERDA support

Project Story Card

ใช้เป็น entry point ของโครงการ แสดง project type, location, registry, vintage, co-benefit, trust badges และ CTA เดียวที่ชัดเจนตาม persona

VerifiedEnglish profileSDG 15

Price Transparency Panel

แสดง indicative price, fee breakdown และ estimated seller payout โดยไม่ใช้ bid/ask pattern เพื่อคง positioning แบบ assisted marketplace

End-buyer price฿1,020
Platform + verification fee- ฿90
Estimated seller payout฿930

Low-tech Onboarding

ใช้ stepper, checklist, upload guidance และ LINE support CTA เป็น default pattern สำหรับ seller ที่ใช้มือถือเป็นหลัก

Document & Translation Assistant

รองรับเอกสาร T-VER/TGO, document status, Thai summary, English summary และ missing requirement state ใน component เดียว

T-VER project documentThai original · English summary
Ready

Buyer Connect Flow

ใช้ request quote, inquiry timeline, verified contact และ support call เป็น flow หลัก แยกออกจาก trading action อย่างชัดเจน

Payout & Credit Status

แสดง payment milestone, on-time guarantee, serial tracker และ retired/claimed status เพื่อให้ seller และ buyer เห็นสถานะเดียวกัน

Contract signedPayment term confirmed
Payout scheduledBank transfer to seller
04 / Auth & consent screen library

Auth & consent screen library

Screen library สำหรับ Welcome, Login·OTP, Registration และ Consent & Policy ใช้ขนาดหน้าจอและ safe area เดียวกัน พร้อมระบุ content hierarchy, action และ state ของแต่ละขั้น ทีม dev จึงเห็นทั้งโครงสร้างที่ใช้ร่วมกันและจุดที่ต้องเปลี่ยนตามบริบทของผู้ใช้

10:245G 100%
V

VERDA

เชื่อมโครงการคาร์บอนเครดิตไทยสู่ผู้ซื้อที่ตรวจสอบได้

Welcome screenเน้น trust, clear entry และ LINE support สำหรับ low-tech seller
10:245G 100%
เข้าสู่ระบบบัญชี VERDA ของคุณ
TH

ยินดีต้อนรับกลับ

ใช้เบอร์โทรหรืออีเมลที่ลงทะเบียนไว้ ระบบจะส่งรหัส OTP เพื่อยืนยันตัวตน

name@example.com
กรอกรหัส 6 หลัก
ยังไม่มีบัญชี? สร้างบัญชีใหม่
Login screenแนะนำ OTP login เพื่อลดภาระจำ password และเหมาะกับ mobile-first seller
10:255G 100%
สร้างบัญชีเลือกประเภทผู้ใช้งาน
Step 1

เริ่มต้นกับ VERDA

เลือกบทบาทหลักเพื่อให้ระบบจัด flow, ภาษา และเอกสารที่ต้องใช้ให้เหมาะสม

ผู้ขาย / เจ้าของโครงการวิสาหกิจชุมชน, ป่าไม้, นาข้าว, T-VER
✓
ผู้ซื้อในประเทศESG / Sustainability manager
Foreign buyerEnglish workspace and inquiry flow
ชุมชนบ้านแม่วาง
Registration screenrole-based registration ใช้แยกภาษา flow และเอกสารที่ผู้ใช้แต่ละกลุ่มต้องเห็น
10:265G 100%
ข้อตกลงการใช้งานยืนยันก่อนเริ่มใช้งาน
Required

ยินยอมตามข้อตกลง

VERDA ใช้ข้อมูลเพื่อประเมินโครงการ ตรวจเอกสาร จับคู่ผู้ซื้อ และติดตามสถานะธุรกรรม

✓
ยอมรับ Terms of Serviceข้อกำหนดการใช้แพลตฟอร์ม VERDA
✓
ยอมรับ Privacy Policyการจัดเก็บและประมวลผลข้อมูลส่วนบุคคล
✓
ยินยอมให้ตรวจเอกสารโครงการT-VER/TGO docs และข้อมูลประกอบการขาย
✓
รับการแจ้งเตือนผ่าน LINEสถานะเอกสาร quote และ payout
Consent screenแยก consent เป็นรายการ เพื่อให้ backend เก็บ timestamp/version ได้แต่ละข้อ
10:265G 100%
นโยบายการใช้งานTerms & Privacy
v1.0

สิ่งที่ผู้ใช้ควรรู้

สรุปสั้นเพื่อให้อ่านบนมือถือได้ ส่วนฉบับเต็มเปิดเป็น bottom sheet หรือ webview

ข้อมูลโครงการใช้เพื่อประเมินราคา ความพร้อมของเอกสาร และความน่าเชื่อถือของ credit
การจับคู่ผู้ซื้อVERDA ช่วยประสาน quote และ inquiry แต่ไม่ใช่ตลาดเทรดแบบ bid/ask
ข้อมูลส่วนบุคคลใช้เท่าที่จำเป็นสำหรับยืนยันตัวตน ติดต่อ และแจ้งสถานะงาน
การแจ้งเตือนผู้ใช้สามารถจัดการช่องทาง LINE, email และ phone support ได้ภายหลัง
Policy screenทำเป็น summary-first เพื่อไม่ให้ legal copy หนาเกินบนมือถือ
05 / Component data

Component data contract

ตารางนี้ระบุ props, data type, display rule และ state ของ component หลัก เช่น registry/CA status, audit risk, document state, ราคา, output mode และ CTA เพื่อเชื่อมภาษาการออกแบบกับโครงสร้างข้อมูลที่ทีม dev ต้องใช้ และลดความคลาดเคลื่อนระหว่าง seller กับ buyer view

ProjectStoryCard

core
PropTypeRule
projectNamestringRequired; max 2 lines on card
projectMetaobjectlocation, type, registry, vintage
trustBadgesBadge[]Max 3 visible; overflow goes to detail sheet
publicProofProofSummaryVisible before login when page is public or source-linked
priceRangeMoneyRangeOptional for pre-verified projects
primaryActionCTASeller: continue setup; buyer: request quote

PriceTransparencyPanel

money
PropTypeRule
currencyTHB | USDSeller defaults to THB; foreign buyer defaults to USD
endBuyerPriceMoneyShow when quote confidence is medium or high
platformFeeMoneyAlways visible when seller payout is visible
sellerPayoutMoneyUse tabular number alignment
confidencelow | medium | highLow confidence shows range and explainer note

DocumentAssistant

docs
PropTypeRule
documentsDocument[]Each item needs title, language, status, required flag
missingCountnumberShow badge when greater than 0
translationStatusnone | queued | readyForeign buyer view needs English summary state
sourceLinkURLRequired for audit-ready exports and public proof views
reviewOwneruser | verda | tgoUsed for next action copy
supportActionCTALINE-first for seller flow

PublicTrustEntry

pre-login
PropTypeRule
entrySourceline | qr | registry | partner | seoMust persist through login/register handoff
sourceLabelstringShow who sent or verified the link when available
proofItemsProofItem[]Show registry, document, price and support proof above fold
continueActionCTARoutes to role-aware login/register without losing context

RegistryVerification

evidence
PropTypeRule
recordIdstringRegistry project or serial record identifier
serialStatusissued | held | retired | mismatchMismatch must block purchase and show source conflict
caStatusnot required | eligible | pending | authorized | rejectedPending/rejected must be visible before quote
sourceUrlURLOpen in official registry escape hatch
checkedAtdatetimeShow last checked timestamp for audit trail

ProcurementInvoice

buyer ops
PropTypeRule
approvalOwnerUserRefRequired before purchase confirmation in domestic buyer flow
poNumberstringOptional until quote acceptance; required for invoice export
billingProfileobjectTax ID, address, company name and contact
paymentTermsstringShown in deal room and audit pack

ReportExport

handoff
PropTypeRule
outputModeaudit-ready | narrativeBoth modes must use the same source evidence manifest
retirementCertificateDocumentRefGenerated only after retirement success
auditTrailAuditEvent[]Includes quote, registry checks, CA notes and export timestamp
sourceManifestDocumentRef[]All claims in narrative must link back to source docs

PayoutStatus

trust
PropTypeRule
milestonesTimeline[]Contract, verification, invoice, payout, serial transfer
paymentStatusscheduled | paid | delayedDelayed must show owner and next update time
serialStatuspending | issued | retiredShared between seller and buyer views
guaranteeCopystringShort Thai copy for seller trust
receiptActionCTAVisible after paid state only
07 / Design QA

Design QA checklist

เกณฑ์ตรวจงานก่อนส่งต่อทีม dev ครอบคลุม visual consistency, component behavior, content, accessibility และ product boundary โดยเน้นจุดเสี่ยงของ VERDA เช่น registry, serial และ CA status ต้องสื่อความหมายชัด รวมถึง Thai-first seller flow และ English-first foreign buyer flow

Visual & tokens

  • ใช้ color token เท่านั้น ไม่ hardcode สีใน component
  • Spacing ใช้ token 4px grid เท่านั้น เช่น 8, 12, 16, 24, 32px และไม่ใช้ margin/padding แบบสุ่ม
  • Card radius ใช้ 8px และ bottom sheet ใช้ 16px ตาม token
  • Elevation ใช้ border + shadow ระดับ e1/e2/e3 เท่านั้น
  • Price, quantity และ fee ใช้ tabular numbers ทุกจุด

Component behavior

  • ทุก component แสดง loading, empty, review, success และ rejected state ได้ชัดเจน
  • Badge status map จาก backend enum เดียวกันทั้ง seller และ buyer view
  • Project card จำกัด badge หน้าแรกไม่เกิน 3 รายการ
  • Public proof ต้องแสดง registry/source/CA summary ได้ก่อน login โดยไม่เปิดข้อมูลอ่อนไหว
  • Registry/CA component ต้องมี external source link และ timestamp การตรวจทุกครั้ง
  • Request quote เป็น primary action หลักใน buyer flow

Content & language

  • Seller flow ใช้ภาษาไทยเป็นหลักและหลีกเลี่ยงศัพท์เทคนิคเกินจำเป็น
  • Foreign buyer view มี English profile และ document summary state
  • ข้อความราคาและค่าธรรมเนียมแยก end-buyer price, fee และ seller payout
  • Error copy ระบุเจ้าของ action ถัดไป เช่น user, VERDA หรือ TGO

Accessibility & mobile

  • Touch target ขั้นต่ำ 44px สำหรับ button, icon button และ bottom nav
  • Icon-only navigation มี `aria-label` หรือ accessible text ทุก item
  • Body text ไม่ต่ำกว่า 15px และไม่ใช้สีอย่างเดียวเพื่อบอกสถานะ
  • ข้อความไทยยาว wrap ได้โดยไม่ล้น card หรือปุ่ม
  • Core flow ไม่ใช้ order book, bid/ask ladder, P&L หรือ trading-density table
08 / Dev handoff

Design handoff

สรุปสิ่งที่ทีม dev ต้องใช้ในการพัฒนาต่อ ได้แก่ token map, component inventory, state set, data fields, accessibility rules และ product boundary ส่วนนี้ทำหน้าที่เป็นข้อตกลงร่วมระหว่างงานออกแบบกับ implementation เพื่อให้หน้าจอที่พัฒนาขึ้นตรงกับ flow และความหมายของข้อมูล

Token map

Color scale ใช้ชื่อ `forest|rice|earth|sky|amber|rose|carbon-50...950`; spacing ใช้ `space-0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16`; semantic aliases คือ `success`, `warning`, `danger`, `info`, `brand`, `surface`, `border`, `text`.

Components

Component set ประกอบด้วย Auth Shell, Public Trust Entry, Consent Checklist, Project Story Card, Price Transparency Panel, Registry Verification, Document Assistant, Procurement Invoice, Report Export, Buyer Connect Timeline, Payout Status, Badge, Stepper, Icon-only Bottom Navigation และ LINE Support CTA.

States

State set ครอบคลุม `default`, `loading`, `empty`, `review`, `verified`, `pending`, `rejected`, `disabled`, `exported`; badge status ใช้ชุดความหมายเดียวกันทั้ง seller และ buyer view.

Data fields

Data หลักประกอบด้วย role, public entry source, consent version, accepted timestamp, policy locale, project name, location, project type, registry, registry source URL, CA status, vintage, serial status, document status, invoice/PO fields, report output mode, language availability, indicative price range และ primary CTA.

Boundary

Core mobile flow เป็น assisted marketplace จึงไม่ใช้ order book, bid/ask ladder, P&L หรือ trading-density table; ใช้ request quote และ support-assisted timeline แทน

Accessibility

Touch target ขั้นต่ำ 44px, body text ไม่ต่ำกว่า 15px, badge ไม่พึ่งสีอย่างเดียว, price และ fee ใช้ tabular numbers เพื่อให้ alignment อ่านง่าย

Dev handoff

Measurement & annotation

Redline สำหรับส่งงาน dev ระบุ padding, gap, touch target, radius, icon size และ token ที่ใช้ พร้อม annotation อธิบาย behavior และ state ของแต่ละส่วน เส้นและป้ายสีแดงคือค่าที่ทีมพัฒนานำไปตรวจเทียบกับ implementation

Redline
A · Component anatomy

Project card

เส้นประแดง = ขอบเขต content หลังหัก padding · ป้ายแดง = ค่าจริงที่ใช้

padding 16 · --space-4 radius 8 · --radius-3 gap 12 · --space-3 icon 20 · --icon-md
ป่าชุมชนบ้านแม่ทา T-VER · 2023 · ตรวจสอบแล้ว
ช่วงราคา ฿320–380
ElementSpecToken
Card padding16px--space-4
Corner radius8px--radius-3
Row gap (icon→text)12px--space-3
Icon20 × 20px · stroke 2--icon-md
Title14px / 700--text
Sub / meta12px / 500--text-muted
Divider1px--border
Price18px / 700 · tnum--forest-500
Elevatione1--shadow-1
B · Screen annotation

Seller Home

หมุด ①–④ ผูกกับพฤติกรรม/state ในตารางด้านล่าง

1 2 3 4
หน้าแรกSeller
ราคาสุทธิ ฿930
ความคืบหน้าเอกสาร 80%
แนบเอกสาร T-VER
เหลือ 2 ไฟล์
ผู้ซื้อสนใจ
inquiry ใหม่ 1 รายการ
หน้าแรกโครงการเอกสารช่วยเหลือ
#ElementBehavior / state
1Role badgeสลับตาม role (seller/buyer); ใช้สี + ข้อความ ไม่พึ่งสีอย่างเดียว
2Progress cardค้างตำแหน่งล่าสุดได้; ถ้าเอกสารไม่ครบแสดง warn state
3Task rowแตะทั้งแถว = touch target ≥44px; badge บอกจำนวน/next
4Bottom nav4 แท็บ สูง 44px; icon 24px + label; รักษา state ฟอร์มก่อนออก
C · Touch target & spacing

ค่ามาตรฐานที่ dev ต้องยึด

44px
44touch target ขั้นต่ำ (ปุ่ม, nav, list row, checkbox) 4→32spacing grid ฐาน 4px: 4·8·12·16·24·32 16content margin ซ้าย/ขวา ของหน้าจอ ≥15body text ไม่ต่ำกว่า 15px (บน mobile screen)
Process / Tools

Design process & tools

เครื่องมือเหล่านี้สนับสนุนงานตั้งแต่ visual exploration, UI design และ prototype ไปจนถึง frontend implementation และ QA โดยการกำหนดปัญหา โครงสร้างผลิตภัณฑ์ และการตัดสินใจด้าน UX/UI อยู่ภายใต้บทบาทของผู้ออกแบบ

Claude CodeFrontend prototype support
Claude DesignVisual exploration support
CodexImplementation & QA support
Adobe IllustratorVector / icon
Adobe PhotoshopRaster / image
FigmaUI design · prototype · handoff