เฟส 1 เริ่มจากสิ่งที่คุณวิชญ์ขอ — Audit UI เดิม ของ EduFlow ทุกโมดูล จับ inconsistency เป็นตัวเลข, ฟัง 3 กลุ่มผู้ใช้, แล้วตกผลึกเป็น หลักการ + requirements เพื่อให้เฟสถัดไปสร้างบนรากที่ถูกต้อง
ออดิตทุก surface (Web · Mobile · Admin) ทุกโมดูล — แปลง “ความรู้สึกว่า UI แตก” เป็นตัวเลขที่ใช้ตัดสินใจได้
นี่คือของจริงที่เจอในระบบเดิม — ปัญหาที่จับต้องได้ ไม่ใช่ความเห็น
47 รายการ จัดหมวด + ระดับความรุนแรง + ระบุว่าจะถูกแก้ในเฟสไหน — ใช้เป็น backlog ของทั้งโครงการ
| หมวด | ที่พบ | ตัวอย่างปัญหา | ความรุนแรง | แก้ในเฟส |
|---|---|---|---|---|
| Buttons | 7 สไตล์ | สี/มุมโค้ง/ขนาดต่างกันทุกโมดูล | สูง | P2 + P3 |
| Color | 5 น้ำเงิน | “primary” ไม่ตรง · เทาหลายเฉด | สูง | P2 |
| Typography | 4 ขนาด body | ฟอนต์ปน 2 ตระกูล ไม่มี scale | กลาง | P2 |
| Spacing | 5 ค่า | padding/gap สุ่ม จังหวะไม่นิ่ง | กลาง | P2 |
| Inputs & Forms | 3 สไตล์ | ความสูง/เส้นขอบ/error state ไม่เหมือน | กลาง | P3 |
| Tables | แต่ละโมดูลทำเอง | หัวตาราง/zebra/แอ็กชันไม่ตรง (ลูกค้าเน้น) | สูง | P3 |
| Iconography | 2 ชุดปน | filled/outline + ขนาดไม่เท่า | ต่ำ | P2 |
| Dark mode | ไม่มี | hardcode สีขาวทั้งระบบ | สูง | P2 |
| Accessibility | หลายจุดตก AA | เทาอ่อนบนขาว contrast < 4.5:1 | สูง | P2 |
| i18n (TH/EN) | hardcode | ปุ่มล้นเมื่อสลับ EN ที่ยาวกว่า | กลาง | P2 + P3 |
รวม 47 inconsistency · ระดับสูง 5 หมวด — ทุกข้อมีเจ้าภาพเฟสชัด ไม่มีตกหล่น
โมดูลใหม่ = แตกหนักสุด (ทำเร็ว ไม่มีระบบรองรับ) — บอกเราว่าควรโฟกัส pattern ไหนก่อน
💡 Insight: ยิ่งโมดูลใหม่ยิ่งแตก → ถ้าไม่มี design system ตอนนี้ การสเกลไป 3 ประเทศจะทำให้คะแนนนี้ดิ่งลงอีก. นี่คือเหตุผลที่ลงทุนตอนนี้คุ้มที่สุด
Design system ต้องรับใช้คนต่างกันมากบนคนละ surface — research จึงเน้นรูปแบบการใช้งานและความต้องการต่อแพลตฟอร์ม
กลั่นจาก audit + research + แบรนด์ EduFlow · ทุก component/จอในเฟสถัดไปต้องผ่าน 6 ข้อนี้
Web · Mobile · Admin ใช้รากเดียวกัน — ผู้ใช้รู้สึกว่าเป็นแอปเดียว ไม่ใช่ 3 แอป
ทุกค่าเป็นตัวแปร semantic — เพิ่ม dark/ภาษา/ประเทศได้โดยไม่ต้องรื้อ
WCAG 2.1 AA ฝังตั้งแต่ token — คอนทราสต์/โฟกัส/touch target ผ่านทุกชิ้น
สะอาด มืออาชีพ ไม่รก — ตามแบรนด์ EduFlow “Smart & Trustworthy”
TH/EN · เผื่อความยาว text · component ไม่พังเมื่อข้อความสั้น/ยาว
พร้อมขยายไป 3 ประเทศ · governance กัน UI กลับไป “แตก” อีก
requirements ที่ตกลงร่วมกัน — เป็นเกณฑ์ตรวจรับงานในทุกเฟสถัดไป
ปิดลูปความมืออาชีพ — findings จาก audit แปลงเป็นงานในเฟสถัดไป ไม่หลุดเป้า
เฟส 1 ให้ภาพชัดว่าระบบเดิมเสียตรงไหน เพื่อใคร และต้องผ่านสเปกอะไร (consistency เดิม 38/100). นี่คือ จุดแก้ครั้งที่ 1 — คุณวิชญ์ตรวจ Audit + Principles + Requirements ก่อน พออนุมัติ เราลงเฟส 2 สร้าง Design Tokens (สี light/dark · type · spacing) เป็นรากของทุกอย่าง
รอ R1 จากคุณวิชญ์ (และ ICE) — ติตรงไหนปรับได้ แล้วลุยเฟส 2 ต่อครับ