Functional prototype · 2026

Orienteering
HRMS

จากงาน HR ที่กระจัดกระจาย สู่ workspace ที่รู้บทบาท เห็นงานถัดไป และตรวจสอบย้อนหลังได้

บทบาทUX/UI · IA · Frontend

แพลตฟอร์มResponsive web app

สถานะFunctional prototype

หน้าจอแดชบอร์ดผู้บริหาร Orienteering HRMS

✓

Task-first dashboardนำงานที่ต้องทำมาไว้ก่อนเมนู

27Product routes

6Module groups

3Core user roles

10+Connected data models

01 · Overview

PRODUCT CONTEXT

ระบบเดียวที่เชื่อมงานบุคคลตั้งแต่วันแรกจนถึง payroll

Orienteering HRMS เป็น responsive web application สำหรับพนักงาน หัวหน้าทีม และ HR Admin ครอบคลุม employee self-service, workforce operations, payroll inputs, recruitment, performance และ reporting บนข้อมูลกลางชุดเดียว

01 · SELF-SERVICE

พนักงานทำรายการเอง

ลงเวลา ยื่นลา ขอ OT เบิกค่าใช้จ่าย ตรวจเอกสาร และติดตามผลโดยไม่ต้องถาม HR ทุกครั้ง

02 · APPROVAL

หัวหน้าตัดสินใจจากบริบท

เห็น policy, team coverage, สถานะ และประวัติรายการก่อนอนุมัติหรือขอข้อมูลเพิ่ม

03 · OPERATIONS

HR จัดการข้อยกเว้น

รวม people data, payroll input, recruitment, assets และเอกสารไว้ใน operational workspace

04 · INSIGHT

ผู้บริหารเห็นภาพรวม

ติดตามกำลังคน attendance, hiring pipeline, payroll และรายการรออนุมัติจาก dashboard เดียว

Contribution

DESIGN + FRONTEND SCOPE

ขอบเขตงานของฉัน จากโครงสร้างเว็บถึง interaction ที่ใช้งานได้

แบ่งผลงานเป็น 3 ด้านเพื่ออธิบายวิธีทำงานและ deliverables ของเคสนี้ ไม่ใช่ชื่อตำแหน่งงานย้อนหลัง โดยแยก functional prototype, เอกสารออกแบบ และสิ่งที่ยังต้องทดสอบออกจากกัน

01 · WEB DEVELOPMENT

โครงสร้างเว็บและการเชื่อมข้อมูล

จัดหน้าและ shared layout บน Next.js App Router ใช้ TypeScript กำหนด entities/actions และเชื่อม frontend store กับ API ของ prototype

Deliverables: route-based screens, AppLayout, Sidebar และ data-binding ผ่าน Zustand โดย API routes และ Prisma schema เป็นบริบทของระบบ ไม่ใช่หลักฐานการ deploy หรือการดูแล backend production

02 · FRONTEND DESIGN

แปลง workflow เป็นระบบหน้าจอ

จัด IA ตามบทบาทและงาน ออกแบบ dashboard, directory และแบบฟอร์ม พร้อม tokens, component states และ responsive layout เพื่อให้ภาพและพฤติกรรมสอดคล้องกัน

Deliverables: IA, user flow, screen gallery และ design/handoff specification ในเคสนี้ ส่วน accessibility ของหน้า portfolio มี focus-visible, ปุ่มเมนูพร้อม aria-expanded และ reduced-motion; ยังไม่ใช่ผล audit ทั้งแอป

03 · FRONTEND DEVELOPMENT

ทำให้หน้าจอตอบสนองต่อผู้ใช้

พัฒนา employee search, department filter, grid/list toggle และ empty state รวมถึงฟอร์มลาที่ตรวจช่วงวันที่และข้อมูลจำเป็น แสดง error/success และคำนวณจำนวนวัน

Deliverables: React components, local form state, Zustand actions และ Recharts ที่อ่านข้อมูลจาก store พร้อม loading/error boundary ของแอป การบันทึกแบบ optimistic ยังไม่มี rollback เมื่อ API ล้มเหลว

หลักฐานอ้างอิง: ไฟล์และพฤติกรรมที่ตรวจพบใน source · Responsive ตรวจได้จาก breakpoints และ layout rules; ยังไม่ได้ยืนยันด้วยการทดสอบอุปกรณ์จริงในรอบนี้ เคสนี้เป็น functional prototype ไม่ใช่ pilot หรือระบบ production

02 · Problem

PROBLEM DEFINITION

ข้อมูลมีอยู่ แต่งานยังขาดบริบทและเจ้าของ

เมื่อคำขออยู่ใน chat เอกสารอยู่ใน email และสถานะอยู่ใน spreadsheet ผู้ใช้ไม่แน่ใจว่าข้อมูลไหนล่าสุด ขณะที่ HR ต้องทำหน้าที่เป็น search engine ขององค์กร

PAIN 01

หลายช่องทาง

คำขอ เอกสาร และการติดตามผลอยู่คนละที่ จึงต้องกรอกและถามซ้ำ

PAIN 02

รอโดยไม่รู้สถานะ

ผู้ส่งไม่รู้ว่างานอยู่ที่ใคร ผู้อนุมัติไม่เห็น SLA และ HR ต้องตามแทน

PAIN 03

ข้อมูลซ้ำ

ข้อมูลบุคคลถูกแก้หลายจุดไม่พร้อมกัน และอาจกระทบ payroll กับ reporting

PAIN 04

สิทธิ์และหลักฐาน

ข้อมูลอ่อนไหวต้องแสดงเท่าที่จำเป็น พร้อมบอกว่าใครทำอะไร เมื่อไร

DESIGN CHALLENGE

ทำอย่างไรให้ HRMS ที่มีฟังก์ชันมาก รู้สึกเรียบง่ายสำหรับทุกบทบาท โดยไม่ลดทอน control และ auditability?

Thai-first และใช้ศัพท์ที่คนทำงานเข้าใจ
Desktop-heavy สำหรับ HR operations
Mobile-friendly สำหรับ employee self-service
Permission และ state ต้องชัดทุก workflow

ขอบเขตหลักฐาน: ปัญหาและ requirement ในเคสนี้สังเคราะห์จาก current-product audit, route, workflow, store action และ data model ของ prototype ยังไม่ใช่ผลจาก production analytics หรือ contextual interview กับองค์กรที่ใช้งานจริง

03 · Roles

JTBD · PERMISSION

ข้อมูลกลางหนึ่งชุด แต่แต่ละบทบาทต้องเห็นงานคนละแบบ

Role profiles ใช้กำหนด navigation, default landing, content density และ action visibility ส่วนสิทธิ์จริงต้องตรวจซ้ำที่ backend เสมอ

พช

EMPLOYEE

พิมพ์ชนก · พนักงาน

ใช้มือถือระหว่างเดินทาง และ desktop เมื่ออยู่สำนักงาน

GOAL: ทำรายการด้วยตัวเองและรู้ผลโดยไม่ต้องทัก HR
TRUST: ต้องเห็นยอดสิทธิ์ ผู้อนุมัติ และเวลาอัปเดตล่าสุด
SUCCESS TARGET: core self-service เสร็จภายใน 3 นาที

“เมื่อมีเรื่องเกี่ยวกับงาน ฉันต้องการส่งคำขอที่ถูกต้อง เพื่อให้ดำเนินชีวิตต่อได้โดยไม่ต้องตามงานหลายช่องทาง”

ธน

MANAGER

ธนัท · หัวหน้าทีม

บริหารทีม 12 คนและอนุมัติคำขอระหว่างประชุม

GOAL: ตัดสินใจเร็วจากข้อมูลที่พอดีและเห็นผลกระทบต่อทีม
TRUST: ต้องเห็น policy, team coverage และประวัติการตัดสินใจ
SUCCESS TARGET: เคลียร์คิวสำคัญได้ภายใน 5 นาที

“เมื่อมีคำขอรออนุมัติ ฉันต้องการเห็นผลกระทบและข้อกำหนด เพื่อให้ตัดสินใจได้เร็วและเป็นธรรม”

รช

HR ADMIN

รัญชิดา · HR Admin

ดูแล people data, payroll input และ compliance ทั้งองค์กร

GOAL: จัดการข้อยกเว้นและรักษาข้อมูลให้ถูกต้อง
TRUST: ต้องมี permission, audit trail และ effective date ชัดเจน
SUCCESS TARGET: ปิด payroll โดยไม่มี critical data error

“เมื่อข้อมูลคนเปลี่ยน ฉันต้องการ workflow ที่มีเจ้าของและหลักฐาน เพื่อให้ข้อมูลต้นทางเดียวพร้อมใช้ทุกโมดูล”

04 · Journey

LEAVE REQUEST

ขอลาให้เสร็จ โดยไม่ต้องตามงานนอกระบบ

Journey หลักเชื่อมข้อมูลสิทธิ์, team coverage, approval และ notification ซึ่งเป็น pattern ที่นำไปใช้กับ overtime, expenses และ loans ได้

Phase	User Action	Touchpoint	User Thought	Pain / Emotion	App Opportunity
① รับรู้ความต้องการ	ต้องการลา 2 วัน	Dashboard / mobile	“เหลือสิทธิ์พอไหม?”	ไม่แน่ใจ · กลัวผิด policy	แสดง balance และข้อกำหนดก่อนเริ่ม
② เริ่มทำรายการ	เลือกประเภทและวันที่	Leave form	“มีใครลาซ้อนหรือเปล่า?”	กังวลผลกระทบทีม	Calendar พร้อม team coverage
③ ตรวจและส่ง	ใส่เหตุผล แนบเอกสาร	Review step	“ส่งครบแล้วใช่ไหม?”	ต้องการความมั่นใจ	สรุปก่อนส่ง + inline validation
④ รอการตัดสินใจ	ติดตามสถานะ	Task center / notification	“ตอนนี้อยู่ที่ใคร?”	รอ · เริ่มกังวล	Owner, SLA และ timeline
⑤ ได้ผลลัพธ์	รับผลและดูยอดสิทธิ์ใหม่	Notification / history	“ปฏิทินอัปเดตแล้ว”	โล่งใจ	ผลลัพธ์ + next step + audit receipt

MOMENT THAT MATTERSทันทีหลังส่ง ผู้ใช้ต้องเห็นว่า “ส่งอะไร · ไปที่ใคร · คาดว่าจะรู้ผลเมื่อไร · กลับมาติดตามตรงไหน”

05 · IA

INFORMATION ARCHITECTURE

จัดตามงานและบทบาท ไม่จัดตามตารางฐานข้อมูล

Navigation แบ่งเป็น 6 กลุ่มงาน ใช้ permission กรองสิ่งที่เห็น และให้ dashboard เป็น task center สำหรับกลับมาทำงานต่อ

◎

Employee

Home · My time · My requests · Pay & benefits · Growth · Profile

◇

Manager

Team overview · Approvals · Schedule · Performance · Hiring

▦

HR Admin

People · Workforce · Payroll · Talent · Reports · System

แผนผัง Information Architecture ของ Orienteering HRMS แบบพื้นสว่าง แยก 6 กลุ่มโมดูลด้วยสีและไอคอน — **Role-based Information Architecture**6 กลุ่มงาน · navigation ตามบทบาท · ข้อมูลกลางร่วมกัน
เปิด SVG เต็มขนาด ↗ดาวน์โหลด .drawio

06 · Flow

CORE USER FLOW

ใช้ request ID เดียวตั้งแต่ส่งจนจบ

Flow รองรับ happy path, missing document, overlapping leave, manager rejection, HR escalation และ notification recovery โดยไม่ทำ context หลุดระหว่าง handoff

แผนผัง Leave Request and Approval แนวตั้ง แยกขั้นตอนผู้ใช้ ระบบ และผลอนุมัติอย่างชัดเจน — **Leave Request & Approval**เส้นทางหลัก · เก็บ draft · ไม่อนุมัติ · ส่งต่อ HR
เปิด SVG เต็มขนาด ↗ดาวน์โหลด .drawio

07 · Decisions

DESIGN PRINCIPLES

ลดความซับซ้อนด้วยลำดับ ไม่ใช่การซ่อนข้อมูลสำคัญ

ผมเปลี่ยนระบบจาก “เมนูเยอะเท่ากับครบ” ไปเป็น “สิ่งที่ต้องทำมาก่อน สิ่งที่อยากค้นค่อยตามมา”

Next action over navigation

นำงานรออนุมัติและข้อยกเว้นไว้ first viewport ก่อนรายการเมนูทั้งหมด

BEFORE · เริ่มจากเมนูAFTER · เริ่มจากงาน

Context before decision

รวม policy, team impact และ history ไว้กับ approval action เพื่อลดการเปิดหลายหน้า

BEFORE · ถาม HR เพิ่มAFTER · ตัดสินใจในจอเดียว

One fact, one owner

ข้อมูลสำคัญมี canonical ID, เจ้าของข้อมูล และ effective date ที่นำไปใช้ต่อข้ามโมดูล

BEFORE · สำเนาหลายชุดAFTER · แหล่งข้อมูลกลาง

Exception over repetition

ให้งานปกติไหลอัตโนมัติ และยกเฉพาะรายการผิดปกติให้ HR จัดการ

BEFORE · ตรวจทุกแถวAFTER · จัดการเฉพาะข้อยกเว้น

08 · UI

IMPLEMENTED SCREENS

หน้าจอจริงที่เชื่อม workflow และข้อมูลร่วมกัน

Visual language ใช้ navy สร้างความมั่นคง gold เป็น action accent และ cream ลดความแข็งของ enterprise UI โดยสถานะไม่พึ่งสีเพียงอย่างเดียว

EXECUTIVE DASHBOARD

Executive dashboardKPI, recruitment pipeline, clock widget, approval queue และ announcement ในภาพรวมเดียว

EMPLOYEE DIRECTORY

Employee directoryค้นหา กรอง ดูสถานะ และจัดการ people record จากโครงเดียวกัน

TIME & ATTENDANCE

Time & Attendanceสลับ personal/team view พร้อม KPI, clock action, GPS context และ history

PAYROLL CONSOLE

Payroll consoleแยก input, deduction, net pay และ payslip action ให้ scan ตารางได้เร็ว

EXECUTIVE REPORTS

Executive reportsคลังรายงานตามบทบาท พร้อมทางเลือก PDF/Excel และ metric ที่ใช้ตัดสินใจ

09 · System

DESIGN FOUNDATION

Design system ที่รักษาพฤติกรรม ไม่ใช่แค่หน้าตา

Token, component และ state ถูกผูกกับงานจริงและ data contract เพื่อให้ทีมพัฒนานำกลับไปใช้ซ้ำได้โดย behavior ไม่หลุด

NAVY 950#0B1F3A

NAVY 700#17345E

GOLD 500#C9972A

CREAM 050#F7F4ED

SUCCESS#17765A

DANGER#B94A48

FOUNDATION RULES

TYPOGRAPHYThai-first · line-height 1.55 · heading 28–56 · body 15–16

SPACING4 · 8 · 12 · 16 · 24 · 32 · 48 · 64

RADIUS8 control · 12 card · 16 modal

GRID12 columns desktop · 8 tablet · 4 mobile

ACCESSIBILITY44px touch target · contrast 4.5:1 · visible focus · 200% text zoom

SHARED STATE MODEL

DEFAULT

ข้อมูลพร้อมใช้งาน

แสดง primary action ตามบทบาท

PENDING

รอผู้อนุมัติหรือ HR

แสดง owner, SLA และ submitted time

SUCCESS

บันทึกหรืออนุมัติแล้ว

แสดง receipt, ผลกระทบ และ next step

ERROR

ทำต่อไม่ได้หรือไม่อนุมัติ

บอกเหตุผลภาษาคนและ recovery action

10 · Build

DESIGN → DEVELOPMENT

ส่งมอบด้วย contract ที่ตรวจสอบได้

แต่ละ screen ผูก Route + Role + State + Data + Acceptance Criteria เพื่อให้ design intent ไปถึง implementation และ QA

ตัวอย่างด้านล่างเป็น proposed handoff contract สำหรับพัฒนาต่อ ไม่ใช่รายการที่ implement และทดสอบครบแล้ว โดยเฉพาะ backend permission, stale/409 conflict และ receipt

01 · ROUTE/leaves/[requestId]

หน้ารายละเอียดคำขอ

02 · ROLEManager · HR

ตรวจ backend permission ซ้ำ

03 · COMPONENTApprovalPanel

Status · policy · timeline

04 · STATEPending → Resolved

รองรับ stale และ 409 conflict

05 · ACCEPTANCEKeyboard + receipt

สำเร็จโดยไม่ reload

Next.js 14App Router · responsive routes

TypeScriptTyped entities and actions

ZustandOptimistic interaction state

PostgreSQL + PrismaPersistent people and workflow data

Tailwind CSSShared tokens and utilities

RechartsExecutive data visualization

REST API routesCRUD across 10 domain areas

Thai localeB.E. date display · ISO storage

11 · Validation

TARGETS · NOT RESULTS

วัดว่าคนทำงานสำเร็จ ไม่ใช่แค่หาปุ่มเจอ

เพื่อหลีกเลี่ยงการอ้างผลลัพธ์เกินหลักฐาน ตัวเลขต่อไปนี้คือเกณฑ์สำหรับ usability test รอบถัดไป ไม่ใช่ผลหลัง launch

TEST 01 · EMPLOYEE

ส่งใบลา 2 วันและติดตามผู้อนุมัติ

Task completion≥ 90%

Target time≤ 3 min

Confidence≥ 4/5

TEST 02 · MANAGER

ตัดสินใจจาก impact และ policy

Task completion≥ 90%

Target time≤ 90 sec

Critical error0

TEST 03 · HR ADMIN

แก้ missing data ก่อน payroll lock

Findability≥ 85%

Target time≤ 5 min

Data loss0

สิ่งที่สร้างแล้ว และสิ่งที่ยังไม่พิสูจน์

สร้างแล้ว: responsive interface, role-aware navigation, dashboard, employee directory, attendance, leave/approval patterns, payroll, reports, API routes, Zustand store และ PostgreSQL/Prisma schema

ยังไม่มี production analytics หรือ pilot กับองค์กรจริง
Persona และ pain point เป็น hypothesis จาก workflow audit ต้องยืนยันด้วย contextual interview
SSO, notification service, policy engine และ payroll integration จริงยังอยู่นอก prototype

12 · Outcome

ผลลัพธ์คือ blueprint ที่เริ่มพัฒนาต่อได้ โดยไม่ทิ้งคำถามสำคัญไว้หลัง mockup

Product architecture

27 routes, 6 module groups, role navigation และ object model

Operational interface

หน้าจอสำคัญตั้งแต่ dashboard, people, attendance, payroll ถึง reports

Reusable system

Design tokens, component behavior, shared states และ accessibility baseline

Implementation path

Data contract, API model, acceptance criteria และ validation backlog

OrienteeringHRMS