Giao hàng không chỉ là một chuyến xe.
Brief ban đầu mô tả thông tin vận hành nằm rải rác ở radio/WhatsApp, theo dõi thủ công và chứng từ giấy. Khi không có cùng một trạng thái đơn hàng, khách, người điều phối, Fleet Manager và tài xế dễ ra quyết định trên những dữ liệu khác nhau.
Đưa đơn hàng thành đối tượng chung; trao cho mỗi vai trò thông tin và hành động đúng thời điểm.
Khách đặt chuyến và theo dõi. Operations điều phối và xử lý ngoại lệ. Fleet Manager giữ đội xe sẵn sàng. Tài xế cập nhật tiến trình và Proof of Delivery.
Đây là framing từ brief và UI screens, chưa phải kết luận từ nghiên cứu định tính hay số liệu vận hành.Bốn bề mặt. Một tiến trình.
Thay vì trình bày bốn app như bốn bộ màn hình độc lập, showcase đọc chúng như một hệ thống dịch vụ: ai tạo nhu cầu, ai điều phối, ai cung cấp năng lực vận chuyển và ai xác nhận giao hàng tại hiện trường.
Customer App
Chọn điểm lấy/giao, mô tả hàng, xe và thời gian; xác nhận booking, theo dõi đơn, liên hệ và xem POD.
Operations Console
Quan sát toàn hệ thống, quản lý đơn, dispatch, trường hợp No driver available và Exception Queue.
Fleet Manager Portal
Quản lý tài xế, phương tiện và hồ sơ; theo dõi bảo trì, hiệu suất, utilization và revenue.
Driver App
Xem và nhận chuyến, cập nhật từng bước, báo chậm/sự cố và xác nhận giao hàng tại hiện trường.
Customer cung cấp yêu cầu vận chuyển.
Operations tìm nguồn lực và xử lý ngoại lệ.
Fleet Manager quản lý tài xế và phương tiện.
Driver cập nhật các mốc tại hiện trường.
POD giúp đóng vòng phản hồi với Customer.
Trạng thái phải nói được điều gì đã xảy ra và người dùng cần làm gì tiếp theo.
StatusBadge · DeliveryTimeline · Exception Queue · Proof of DeliveryGiảm bất định trước khi đặt chuyến.
Booking được chia thành những quyết định có thứ tự: lộ trình, hàng hóa, phương tiện, lịch trình và xác nhận. Khách không phải giải một form vận tải dài trong một lần nhìn.
Thông tin hàng và điểm đến ảnh hưởng tới lựa chọn xe; lựa chọn xe và thời gian ảnh hưởng tới kỳ vọng trước khi xác nhận. Stepper giúp đưa đúng câu hỏi vào đúng bước.
Màn No driver available và Retry searching công nhận rằng matching có thể không thành công ngay. Order detail giữ thông tin tiến độ và hành động liên hệ sau booking.
Biến ngoại lệ thành việc có thể xử lý.
Console không chỉ báo cáo số lượng đơn. Dashboard đưa tín hiệu cần hành động lên trước; Dispatch Management và Exception Queue tạo đường đi từ phát hiện tới xử lý.
“Không có tài xế” hoặc đơn chậm không nên chìm trong danh sách đơn thông thường. Một queue chuyên biệt cho phép phân loại và ưu tiên theo trạng thái cần can thiệp.
Operations quản lý điều phối ở cấp hệ thống; Fleet Manager quản lý khả năng cung ứng tài xế và phương tiện của đội mình. Hai bề mặt nhìn cùng vận hành nhưng có trách nhiệm khác nhau.
Quản lý nguồn lực trước khi nó trở thành điểm nghẽn.
Fleet Manager cần biết đội có bao nhiêu xe/tài xế sẵn sàng, hồ sơ nào cần duyệt và phương tiện nào sắp hết hạn kiểm định hoặc cần bảo trì.
Portal tập trung vào người và tài sản thuộc đội xe: onboarding, duyệt hồ sơ, trạng thái xe, bảo trì và hiệu suất. Nó không thay thế bảng điều phối đơn hàng của Operations.
Performance và Revenue đặt utilization, hiệu suất tài xế và doanh thu theo xe/tài xế bên cạnh danh sách nguồn lực, giúp Fleet Manager nhận ra vấn đề cần ưu tiên.
Tác vụ hiện trường phải rõ, ngắn và có bằng chứng.
Driver App đi theo nhịp công việc: xem trước chuyến, xác nhận điểm lấy, in transit, xác nhận giao và báo chậm khi phát sinh. Màn hình ưu tiên thông tin chuyến và hành động tại thời điểm đó.
Mỗi mốc cần cập nhật riêng để tài xế biết mình đang ở đâu trong công việc và Operations/Customer có thể thấy tiến độ tương ứng.
Delivery confirmation đặt Proof of Delivery vào bước hoàn tất. Design system quy định vùng chạm tối thiểu 48px và hành động chính 56px cho bề mặt tài xế.
Cùng một ngôn ngữ. Bốn ngữ cảnh.
Design system giữ cấu trúc và hành vi nhất quán trên web/mobile: semantic tokens, type scale, status vocabulary, spacing và reusable components. Sự nhất quán ở đây hỗ trợ nhận biết trạng thái và chuyển giao cho development, không chỉ là một palette đẹp.
Navy để định cấu trúc. Teal cho chuyển động.
Status dùng semantic colors riêng: Scheduled, In transit, Delayed, Exception, Delivered, Unassigned.
Rõ ở cả bảng số và mobile.
IBM Plex Sans cho UI, Condensed cho display/metrics, Mono cho ID/thời gian; 4px spacing grid.
Components theo công việc.
Dark mode remap semantic tokens. States, feedback và status xuất hiện trên nhiều vai trò cùng một ý nghĩa.
Thiết kế đã có. Tác động cần đo.
Bộ tài liệu cung cấp design system và bốn bộ UI screen HTML. Đây là bằng chứng về phạm vi thiết kế và product logic trong prototype, không phải bằng chứng rằng vận hành thực tế đã cải thiện.