HOME/PROCESSX
ProcessX: Công cụ tự động hóa quy trình chăm sóc khách hàng
- Vai trò
- UI/UX Designer duy nhất
- Đội ngũ
- 1 UI/UX Designer (mình)1 Business AnalystĐội phát triển (FE, BE, QA)
- Thời gian
- T7/2026 - T12/2026 (6 tháng)Trạng thái: Đang triển khai
- Ràng buộc
- Xây trên nền IPCC2.0
Bối cảnh
IPCC2.0 là nền tảng tổng đài IP (IP Contact Center) của Viettel Customer Service, nơi nhân viên chăm sóc khách hàng qua tổng đài và kênh online. IPCC2.0 kết nối với hệ thống hỗ trợ kinh doanh, nơi quản lý cước, thuê bao và thông tin khách hàng.
Quy trình chăm sóc hiện tại dựa vào việc nhân viên tự nhớ các bước và chuyển qua lại giữa hai hệ thống.
ProcessX là module mới trong IPCC2.0 để thiết kế và vận hành các quy trình này dưới dạng luồng tự động.
Vấn đề
Admin nghĩ theo bước nghiệp vụ, không theo logic
Mình vào dự án khi BA đã tiếp nhận yêu cầu và đang làm wireframe để thống nhất với khách hàng. Việc đầu tiên là cùng BA audit UX và interaction, tập trung vào UX màn dựng quy trình.
Wireframe của BA
Màn dựng quy trình
Có thể chỉ ra bốn vấn đề chính sau trên wireframe:
01
Thư viện node trộn bước thật với điều hướng luồng (rẽ nhánh, gộp nhánh, chuyển tới nút), gây confuse cho người dùng.
02
Quá nhiều panel làm canvas bị thu hẹp.
03
Mỗi node vừa hiện loại node, tên node, chi tiết node, gây quá nhiều chữ/thông tin trên 1 quy trình.
04
Luồng tạo điều kiện khó dùng, tên trường mang tính kỹ thuật.
Nghiên cứu
Mình tham khảo các công cụ tương tự để tìm từ ngữ và cách tương tác phù hợp với cách người không chuyên nghĩ về công việc.
Các sản phẩm mình tham khảo:
Attio
Tự động hóa bằng ngôn ngữ đời thường
Trigger và action đọc như câu nói hằng ngày.
Flowable
Mạnh, nhưng nói ngôn ngữ BPMN
Thuật ngữ BPMN đòi hỏi kiến thức chuyên môn
n8n
Canvas node vẫn dễ đọc
Mỗi node một icon, một nhãn, và nút “+” cho bước tiếp theo.
Zapier
“Khi việc này xảy ra, hãy làm việc kia”
Các bước tuyến tính, giống cách mọi người mô tả công việc.
Giải pháp / Quyết định thiết kế
4 quyết định biến wireframe ban đầu thành công cụ dễ dùng hơn
01
Thư viện chỉ chứa bước thật
Wireframe của BA
Các bước lẫn với điều hướng luồng
Điều hướng luồng (như Chuyển tới nút, Rẽ nhánh, Gộp nhánh) lẫn vào các bước, khiến người dùng confuse và không hiểu cách dùng.
Thiết kế cuối
Bước được nhóm theo chức năng
Chỉ liệt kê bước. Kiểu rẽ nhánh nằm trong Điều kiện; điểm gộp nhánh thể hiện ngay trên canvas.
02
Trả lại không gian cho canvas
Wireframe của BA
Bốn cột tranh chỗ với luồng
Bốn cột khiến canvas chỉ còn chưa tới nửa màn hình.
Thiết kế cuối
Panel mở & thu gọn
Do đã có thể thêm bước ngay trên canvas, nên ở phần “Thư viện bước” có thể cho phép user mở và đóng tùy theo nhu cầu, đảm bảo khu vực thao tác trên canvas rộng rãi kể cả ở những viewport nhỏ.
03
Mỗi node một nhãn
Wireframe của BA
1 node hiển thị loại node, tên node và chi tiết node
Loại + tên + chi tiết node trên mọi node biến luồng dài thành bức tường chữ. Trong đó, chi tiết node là thành phần ít giá trị nhất cho user khi xem toàn bộ canvas và có thể giản lược được.
Thiết kế cuối
Giản lược node, chỉ giữ thông tin chính
Loại hiện một lần kèm icon, cộng mô tả ngắn.
04
Luồng điều kiện người không chuyên cũng dùng được
Wireframe của BA
Trường thông tin kỹ thuật
“Đối tượng → thuộc tính”, “Toán tử”, AND/OR được viết với ngôn ngữ nghiệp vụ, không phải ngôn ngữ của người dùng.
Thiết kế cuối
Thể hiện bằng ngôn ngữ dễ hiểu
Trường, phép so sánh, giá trị, tất cả bằng thuật ngữ nghiệp vụ.
Wireframe của BA
Cách tạo 1 quy trình nhiều nhánh rất khó hiểu
Để tạo 1 quy trình nhiều nhánh, cần sử dụng node rẽ nhánh, điều kiện và gộp nhánh một cách riêng biệt, user có thể nhầm lẫn chúng với nhau hoặc không hiểu cần sử dụng node nào trước.
Thiết kế cuối
Chọn cách các nhánh chạy
Tất cả gói gọn trong node “Điều kiện”, user chỉ cần kéo node “Điều kiện” ra canvas và tiến hành cấu hình node.
Bài học
Với những sản phẩm mang tính kỹ thuật và khó sử dụng, UX trở nên quan trọng hơn bao giờ hết.
Research giúp hiểu rõ tệp người dùng sử dụng sản phẩm trong những trường hợp nào, mental model của họ ra sao, để chuyển ngôn ngữ nghiệp vụ thành giao diện thân thiện với người dùng hơn.
More projects
