Human Capital Management - Guideline for UI/UX Designer Role
🎨 Guideline cho UI/UX Team
Thiết kế giao diện người dùng trong giải pháp HR Headless
1. 🎯 Mục tiêu của vai trò UI/UX
- Thiết kế giao diện rõ ràng, trực quan và dễ dùng cho nhân viên, quản lý, HR.
- Chuyển đổi các yêu cầu nghiệp vụ và flow xử lý thành trải nghiệm mạch lạc và hiệu quả.
- Đảm bảo thiết kế có thể phát triển được (dev-friendly), có khả năng tái sử dụng cao (component-based) và đáp ứng theo branding của từng khách hàng.
2. 🧭 Quy trình làm việc của UI/UX trong dự án HR
- Tiếp nhận yêu cầu từ BA, BRD và workflow
- Xác định persona, hành vi người dùng và các context sử dụng
- Thiết kế wireframe, sau đó là hi-fi prototype
- Làm việc chặt với frontend team để bàn giao đúng – đủ – test được
- Cập nhật theo feedback từ QA, người dùng và BA
3. 📋 Checklist thiết kế theo từng module
Giai đoạn 1: Hiểu yêu cầu & phân tích nghiệp vụ
- Đọc kỹ BRD và các flow nghiệp vụ (workflow, flowchart)
- Xác định rõ các luồng hành vi (flow-based design): tạo – chỉnh sửa – duyệt – xem – hủy
- Ghi chú các điểm cần hiển thị trạng thái (approved, pending, rejected…)
Giai đoạn 2: Thiết kế UX logic
- Xác định persona (HR, Employee, Manager, Admin…)
- Mỗi persona có dashboard/entry point riêng
- Áp dụng các nguyên tắc như progressive disclosure, giữ UI đơn giản cho nhân viên
Giai đoạn 3: Thiết kế UI (Wireframe → Prototype)
- Dùng component UI chuẩn (table, form, modal, timeline, tag, trạng thái…)
- Thống nhất form layout: label, input, required, error state, helper
- Thống nhất coding guideline với frontend team (spacing, typography, padding…)
Giai đoạn 4: Bàn giao & kiểm tra triển khai
- Cung cấp file Figma/Zeplin/Invision với comment đầy đủ
- Mô tả các logic động: ẩn/hiện theo role, theo trạng thái
- Xác định rõ khi nào cần loading state, empty state, error state
- Cung cấp mock API nếu có thể hoặc mô tả hành vi liên quan đến dữ liệu
4. 📁 Bộ tài liệu chuẩn UI/UX cần xây dựng
| Tài liệu | Mục tiêu | Ghi chú |
|---|---|---|
| UI Spec (per module) | Mô tả chi tiết từng màn hình | Bao gồm trạng thái và role |
| Component Library | Danh sách các thành phần UI dùng chung | Table, modal, button, tag, timeline… |
| Figma/Zeplin/Invision Prototype | Giao diện có thể tương tác hoặc trình bày logic flow | Phục vụ review với khách hàng hoặc BA |
| UI Mapping Sheet | Mapping BRD → màn hình → hành động | Dùng để giao tiếp với frontend/dev |
| Responsive Layout Guide | Giao diện trên mobile, tablet, desktop | Đặc biệt với ESS/MSS |
5. 🛠 Công cụ đề xuất
- Figma: Thiết kế, tạo component, quản lý shared styles
- Zeplin: Bàn giao pixel-perfect với CSS hint
- Miro / Whimsical: Vẽ sơ đồ flow UX / journey map
- Storybook: Preview component UI trên codebase
6. 🚧 Lưu ý & Kinh nghiệm thực chiến
- ✅ Thiết kế “từ người dùng thực tế” chứ không chỉ “dựa vào logic hệ thống”
- ✅ Hạn chế modal trong modal, pop-up lồng nhau gây khó sử dụng
- ✅ Định nghĩa rõ trạng thái của mỗi màn hình (view-only, editable, disable, draft…)
- ❗Không thiết kế những hành vi không nằm trong API hoặc workflow đã định
- ❗Không làm việc song song nhiều hướng UI khi chưa có sự thống nhất rõ từ BA & dev
7. 📊 KPI đo hiệu quả của UI/UX
| Chỉ số | Mục tiêu |
|---|---|
| % màn hình được approve ngay lần đầu | ≥ 90% |
| Thời gian trung bình từ yêu cầu đến prototype | ≤ 3 ngày/module nhỏ |
| Tỷ lệ feedback UI từ dev trong quá trình dev | < 5% |
| Thời gian test UAT không phát sinh vấn đề UI nghiêm trọng | ≥ 95% UAT pass rate |
8. 📌 Kết luận
Giao diện là nơi khách hàng và người dùng cảm nhận trực tiếp về sản phẩm. Một team UI/UX tốt là team không chỉ đẹp về giao diện, mà còn logic, mạch lạc và dễ dùng cho mọi đối tượng từ nhân viên đến nhà quản lý. Với dự án HR headless, UI là phần duy nhất có thể tùy chỉnh theo khách hàng – vì vậy, phải làm tốt từ đầu.