Client
AC INFOTEC Co., Ltd.
Year
2025
Role
Lead UX/UI Designer
Flex Rating Platform (for AC INFOTEC)
โปรเจกต์ปรับปรุงประสบการณ์ผู้ใช้งาน (UX/UI Upgrade) และพัฒนาฟีเจอร์ใหม่สำหรับ Online Assessment Platform ของ AC INFOTEC ซึ่งเป็นแพลตฟอร์มระดับ Enterprise ที่องค์กรธุรกิจขนาดใหญ่และหน่วยงานภาครัฐทั่วประเทศ ใช้ในการประเมินความพร้อมด้านความมั่นคงปลอดภัยสารสนเทศและการปฏิบัติตามข้อกำหนด (Compliance) ตามมาตรฐานสากลและกฎหมาย สคส.
The Challenge
ความท้าทายหลักของโปรเจกต์นี้คือการจัดการกับ "ความซับซ้อนของข้อมูล (Data Complexity)" และข้อกำหนดตาม TOR ที่เข้มงวด ระบบเดิมมีความเป็น Text-heavy สูงมาก ตัวข้อคำถามและเงื่อนไขการตอบมีความเชื่อมโยงกันอย่างซับซ้อน (เช่น Matrix Answers และ Complex Skip Logic) อีกทั้งยังมีขั้นตอนการอนุมัติผลแบบหลายชั้น (Multi-level Approval Workflow) ที่เกี่ยวข้องกับผู้ใช้งานถึง 4 กลุ่ม (Admin, Responder, Approver, Auditor) หน้าที่สำคัญคือการเปลี่ยนระบบที่ดูใช้งานยาก ให้กลายเป็นเครื่องมือที่ใช้งานง่าย ลื่นไหล และน่าเชื่อถือ
The Solution
เปลี่ยนผลการประเมินที่ซับซ้อนให้เข้าใจง่ายผ่าน Interactive Dashboard ที่รองรับการเจาะลึกข้อมูล (Drill-down) และการเปรียบเทียบมิติข้อมูล (Cross-tab) ช่วยให้มองเห็นช่องโหว่ด้านความปลอดภัยขององค์กรได้ทันที
ออกแบบหน้าจอสร้างแบบสอบถามใหม่ให้รองรับการลากวาง (Drag and Drop) พร้อมระบบ GUI ที่ช่วยให้การตั้งค่าเงื่อนไขการข้ามข้อคำถาม (Skip Logic) ทำได้ง่ายขึ้น
เดิมระบบไม่ได้วาง design system เอาไว้ เพราะถูกสร้างโดย developer เท่านั้น จึงต้องเริ่มสร้าง design system ใหม่โดยสร้างและปรับปรุงจากเดิม ควบคุม Typography Hierarchy อย่างละเอียด และออกแบบ Semantic Tokens ที่ใช้สีระบุสถานะความเสี่ยง (Success, Caution, Danger, Info) เพื่อช่วยให้ผู้บริหารสแกนข้อมูลได้อย่างรวดเร็ว
Target Audience
1.
Responder (ผู้ตอบแบบประเมิน)
เจ้าหน้าที่ที่ได้รับมอบหมายให้ระบุข้อมูลและรวบรวมหลักฐานขององค์กร
User Goals
ต้องการตอบคำถามจำนวนมหาศาลให้เสร็จอย่างถูกต้อง แนบไฟล์หลักฐานได้รวดเร็ว และไม่สับสนกับเงื่อนไขคำถามที่ซับซ้อน
UX Solutions
ระบบ Save Draft, Dynamic Skip Logic (ซ่อนข้อที่ไม่เกี่ยวข้องอัตโนมัติ), และระบบ Import/Export คำตอบผ่าน Excel
2.
Approver (ผู้อนุมัติ)
ผู้ตรวจสอบและกดยืนยันข้อมูลก่อนที่แบบประเมินจะถูกส่งออกจากหน่วยงาน
User Goals
ต้องการตรวจสอบความถูกต้องและความครบถ้วนของข้อมูลในภาพรวมอย่างรวดเร็ว โดยไม่ต้องการมานั่งไล่อ่านทีละข้อ
UX Solutions
หน้าต่าง Validation แจ้งเตือนจุดที่ยังตอบไม่ครบ และระบบ Evidence Preview สำหรับคลิกดูไฟล์แนบได้ทันทีในหน้าตรวจรับ
3.
Auditor / Expert (ผู้ตรวจสอบภายนอกจาก AC INFOTEC)
ผู้เชี่ยวชาญที่เข้ามาประเมินและให้คะแนนตามมาตรฐานสากล
User Goals
ต้องการเข้าถึงชุดคำตอบของแต่ละหน่วยงาน บันทึกผลการตรวจสอบ ข้ามข้อไปมาได้อิสระ และแนบหลักฐานการตรวจเพื่อออกใบรับรอง
UX Solutions
Auditor Workspace ที่แยกส่วนการทำงาน มีระบบคัดกรองสถานะ และตรวจสอบความครบถ้วนก่อนส่งผลลัพธ์สุดท้าย
4.
Admin (ผู้ดูแลระบบ)
ทีมงานส่วนกลางที่ทำหน้าที่ควบคุม จัดการ และออกรายงานภาพรวม
User Goals
ต้องการความยืดหยุ่นในการสร้างและแก้ไขฟอร์มประเมิน จัดการ Workflow การอนุมัติที่ซับซ้อน และดึงรายงานสรุปผลส่งต่อให้ผู้บริหารระดับสูง
UX Solutions
GUI แบบ Drag & Drop สำหรับสร้างฟอร์ม, ระบบตั้งค่า Multi-Level Approval, และ Advanced Analytics Dashboard
Information Architecture
โครงสร้างของระบบ Flex Rating Platform แบ่งออกเป็นโมดูลหลักตามสิทธิ์การใช้งานที่ถูกตีกรอบขอบเขต ระบบแบ่งออกเป็น 6 module หลัก ได้แก่ Content Management, Questionnaire, Dashboard, User Management, Logging และ Settings
User Flow
flow ที่สำคัญที่สุดในระบบ ครอบคลุมตั้งแต่ Admin สร้างแบบสอบถาม ไปจนถึง Approved
Key Design Solutions
ในส่วนนี้คือการเปลี่ยนข้อกำหนดทางเทคนิค ที่ซับซ้อนใน TOR
ให้กลายมาเป็น UI/UX Solutions ที่ตอบโจทย์การใช้งานจริง
01 Drag-and-Drop Form Builder
The Problem
การสร้างแบบประเมินมาตรฐานสากล (เช่น ISO 27001) มักเผชิญปัญหาเรื่องความยาวและตรรกะที่ซับซ้อน ตัวระบบเดิมขาดความยืดหยุ่นในการจัดกลุ่มคำถาม การปรับเปลี่ยนลำดับข้อคำถามหรือตัวเลือกทำได้ยาก และการตั้งค่าเงื่อนไขระดับลึก (เช่น การบังคับแนบไฟล์หลักฐานเฉพาะบางคำตอบ) มักทำให้เกิดข้อผิดพลาดในการป้อนข้อมูล
Design Solution
ออกแบบแผงควบคุม (Control Panel) ข้างตัวเลือกคำตอบให้สามารถเปิด-ปิดฟีเจอร์ขั้นสูงได้ในคลิกเดียว ได้แก่ ปุ่ม Select All, โหมดสุ่มสลับช้อยส์ (Shuffle Choices) เพื่อความโปร่งใส, โหมดบังคับระบุเหตุผล (Justification Required), และช่องสำหรับใส่ Recommendation Hint (แนวทางแนะนำ) ในกรณีที่องค์กรตอบไม่ผ่านเกณฑ์
Design Solution
ออกแบบระบบจัดการโครงสร้างแบบประเมินใหม่ให้ Admin สามารถปรับเปลี่ยนลำดับในระดับ Sections และระดับ Questions ได้อย่างอิสระด้วยการลากวาง (Drag and Drop)
ใช้หลักการซ่อนการตั้งค่าระดับลึกไว้ใน Dropdown เมนูย่อย เพื่อลดความหนาแน่นของหน้าจอ (Cognitive Load) แต่พร้อมเรียกใช้งานได้ทันที
02 Seamless Offline-Online Synchronization
The Problem
การทำแบบประเมินความปลอดภัยระดับองค์กรใหญ่ จำเป็นต้องได้รับข้อมูลจากพนักงานหลากหลายฝ่าย หากบังคับให้ทุกคนต้องล็อกอินเข้ามาพิมพ์ตอบบนระบบออนไลน์พร้อมกันแบบ Real-time จะเกิดคอขวดในการทำงาน และเจ้าหน้าที่อาจจะถอดใจหากระบบออนไลน์หลุดกลางคัน
Design Solution
ออกแบบสถาปัตยกรรมข้อมูลให้รองรับการทำงานแบบ Hybrid โดยผู้ตอบสามารถกด Export แบบสอบถามออนไลน์ ออกไปเป็นไฟล์ออฟไลน์ (.xlsx) ที่มีการจัดหน้าสวยงาม อ่านง่าย และกระจายงานไปให้ฝ่ายต่างๆ ช่วยกรอกได้ แล้วออกแบบระบบ Import หลังบ้านให้ฉลาดพอที่จะแกะสลักข้อมูลจากไฟล์ Excel กลับเข้ามาเป็นคำตอบและโครงสร้างบนเว็บแอปพลิเคชันออนไลน์ได้อย่างแม่นยำ
03 Multi-Dimensional Dashboard
The Problem
ระบบเดิมแสดงผลข้อมูลในรูปแบบตารางหนาแน่น และตัวกรองข้อมูลไม่มีความยืดหยุ่น ทำให้ผู้บริหารระดับสูงไม่สามารถจับจุดวิกฤตหรือดูแนวโน้มความเสี่ยงของภาพรวมองค์กรได้ทันที
Design Solution
ปรับโฉม Dashboard ใหม่ทั้งหมดโดยการจัดกลุ่มข้อมูลเป็นบล็อกสี่เหลี่ยม ที่แยกจากกันชัดเจน ด้านบนมีแถบตัวกรอง (Global Filter) ที่ยืดหยุ่นสูง สามารถกรองตาม ช่วงเวลา, กลุ่มอุตสาหกรรม (สคส.), สถานะ หรือคัดกรองประเภทคำถามเฉพาะจุดได้อย่างอิสระ
Design Solution
พัฒนา Interactive UI ที่รองรับการคลิกเจาะลึก (Drill-down) จากชาร์ตภาพรวมลงไปดูข้อมูลระดับปฏิบัติการ และมีปุ่มสลับแกนวิเคราะห์ข้อมูลข้ามมิติ (Cross-tab) เพื่อเปรียบเทียบคะแนนความเสี่ยงระหว่างกลุ่มอุตสาหกรรมหรือหมวดหมู่แบบประเมินได้ในหน้าเดียว
ออกแบบปุ่มกดส่งออกข้อมูลแบบในทุกๆหน้าจอ โดยรองรับทั้ง PDF, Excel และรูปแบบ JSON Template พร้อม Metadata เพื่อตอบโจทย์ด้าน Data Portability ในการส่งต่อข้อมูลไปยัง API อื่นๆ
04 Security & Workflows Experience
The Problem
ในองค์กรระดับ Enterprise สิทธิ์ในการเข้าถึงข้อมูลมีความอ่อนไหวสูง ระบบที่ขาดการแบ่งขอบเขตหน้างาน หรือขาดการบันทึกประวัติการใช้งานอย่างรัดกุม จะไม่สามารถผ่านมาตรฐานการตรวจประเมินความปลอดภัยสารสนเทศได้
Design Solution
ออกแบบระบบจัดการสิทธิ์ผู้ใช้งานให้มีความละเอียด แบ่งเป็น Organization Admin (คุมภาพรวม), Project Admin (คุมเฉพาะโครงการที่ได้รับมอบหมาย) และ Department Admin (คุมภายในแผนกและทีมย่อย) โดยหน้าจอเมนูและชุดข้อมูลจะถูกปิดกั้นและปรับเปลี่ยนไปตาม Role ขอบเขตพื้นที่งานโดยอัตโนมัติ
Design Solution
ออกแบบระบบสร้างเส้นทางการอนุมัติ (Workflow Builder) ให้รองรับการส่งฟอร์มตรวจรับแบบขนาน (Parallel) หรือตามลำดับ (Sequential) ทั้งแบบภายในและระหว่างแผนก พร้อม Rejection Loop (ระบบกดส่งย้อนกลับให้แก้ไขเฉพาะจุด)
What I Learned
ได้เรียนรู้วิธีการเปลี่ยนข้อกำหนดทางกฎหมาย (เช่น กฎหมาย สคส.) และเทคนิคอลฟีเจอร์ที่ซับซ้อนใน TOR ให้กลายมาเป็น UI/UX ที่คนทั่วไปใช้งานได้จริง
การออกแบบระบบที่มีความปลอดภัยสูง สอนให้เข้าใจการบาลานซ์ระหว่างความปลอดภัยควบคู่ไปกับการรักษาความลื่นไหลของ User Experience ไม่ให้ผู้ใช้รู้สึกอึดอัดเกินไป
