Role:
Design Leadership
Platform:
Desktop / Responsive
Project Duration:
3 years +
Overview
Xây dựng hệ thống thiết kế trên nền tảng Ant Design cho hệ sinh thái nhà hàng Deliany (Sau đó là Norra.AI) — chuẩn hóa ngôn ngữ thiết kế, quy ước đặt tên và khuôn mẫu nội dung giao diện cho 5 sản phẩm. Kết quả: giảm 40% thời gian thiết kế, giảm 50% thời gian lập trình viên tìm kiếm hành vi thành phần.
Đặt vấn đề & Tiếp cận
Rào cản (The Problem)
Khi mở rộng từ 1 lên 5 sản phẩm song song — Web Order, Mobile App, Back-Office, Point of Sales, Kitchen Display System — 3 vấn đề ngôn ngữ xuất hiện cùng lúc:
- Ant Design không có sẵn thành phần cho tình huống đặc thù của ngành nhà hàng (hàng đợi bếp, bàn phím số quầy thu ngân,...) → lập trình viên phải xây lại từ đầu ở mỗi dự án
- Không có quy ước đặt tên chung → nhà thiết kế gọi "Dropdown", lập trình viên hiểu "Select" → lệch pha giữa file Figma và mã nguồn
- Nội dung giao diện mặc định của Ant Design dùng tiếng Anh kỹ thuật, không phù hợp với người vận hành nhà hàng thực tế
Hướng tiếp cận
Xây một layer ngôn ngữ thiết kế đè lên Ant Design:
- Quy ước đặt tên thống nhất từ Figma sang mã nguồn
- Tài liệu hướng dẫn sử dụng đủ để tự tra cứu, không cần hỏi lại
- Khuôn mẫu nội dung giao diện cho các điểm thông tin quan trọng
Giới hạn
- Chỉ có 1 designer (Quang) + 2 lập trình viên hỗ trợ hành vi
- Phải áp được cho nhiều ngành, không riêng nhà hàng
- Xây trên Figma — không phụ trách phía mã nguồn
Nghiên cứu & Phân tích
Phương pháp
- Kiểm định toàn bộ tập thành phần của Ant Design → xác định điểm thiếu so với tình huống thực tế
- Làm việc trực tiếp với 2 lập trình viên để bổ xung hành vi cho thành phần → tên gọi
- Rà soát nội dung của Ant Design → đánh dấu các điểm gây nhầm lẫn hoặc không phù hợp ngữ cảnh
Phân tích
Phát hiện
Bằng chứng
Ant Design thiếu thành phần cho tình huống đặc thù ngành nhà hàng
Lập trình viên phải tự xây lại từ đầu ở mỗi dự án — không tái sử dụng được
Không có quy ước đặt tên → nhà thiết kế và lập trình viên dùng hai ngôn ngữ khác nhau
Xảy ra tại Deliany Web Order — thành phần bị xây sai do hiểu nhầm tên gọi
Nội dung giao diện gốc không hướng dẫn hành động tiếp theo
"Error", "No data" không nói được người dùng cần làm gì
Giải pháp nội dung
Nguyên tắc nội dung
- Một tên — một thành phần: Quy ước đặt tên nhất quán từ Figma ra mã nguồn, không dùng từ đồng nghĩa
- Nội dung giao diện phải chỉ rõ hành động tiếp theo: Thông báo không chỉ để thông tin — phải hướng dẫn người dùng làm gì
- Tài liệu đủ để người mới tự tra cứu mà không cần hỏi thêm
Quy ước đặt tên
Định dạng chuẩn: [Loại] / [Biến thể] / [Trạng thái]
Tên thành phần giữ nguyên tiếng Anh để khớp với mã nguồn và thư viện Ant Design gốc.
Nội dung giao diện: Trước & Sau
Các nội dung đã xây dựng
- Trạng thái trống: Danh sách rỗng, kết quả tìm kiếm không có, thông báo trống
- Thông báo lỗi: Lỗi xác thực biểu mẫu, lỗi hệ thống, lỗi mạng, lỗi phân quyền
- Xác nhận hộp thoại: Xóa dữ liệu, hủy đơn hàng, thoát khi chưa lưu
- Thông báo nhanh: Thành công / Cảnh báo / Lỗi / Thông tin
- Chú thích & Văn bản hỗ trợ: Dành cho các thành phần phức tạp — hàng đợi ưu tiên tại bếp, tách hóa đơn tại quầy thu ngân
- Trạng thái đang tải: Phân loại theo ngữ cảnh — tải dữ liệu, xử lý thanh toán, in hóa đơn
Kiểm thử & Điều chỉnh
Phương pháp:
Áp dụng thực tế qua từng sản phẩm, thu thập phản hồi từ nhóm lập trình viên sau mỗi chu kỳ phát triển
Nhật ký điều chỉnh
Kết quả & Tác động
Tác động thực tế
Demo: Thanh điều hướng (Sidebar)
Mô phỏng tương tác các trạng thái của thanh điều hướng Ant Design tùy chỉnh: Thu gọn, Chọn Deal (màu thương hiệu chính), Mở rộng Quản lý thực đơn, Mở rộng Quản lý thanh toán, và Mở rộng Cấu hình.
Tác động về ngôn ngữ thiết kế
- Quy ước đặt tên tạo ra ngôn ngữ chung — nhà thiết kế và lập trình viên không còn hiểu nhầm nhau
- Tài liệu khuôn mẫu giúp người mới làm quen với dự án mà không cần hỏi lại từ đầu
- Hướng dẫn sử dụng loại bỏ các quyết định lặp lại: thay vì "nên viết gì cho trạng thái trống?", đã có sẵn khuôn mẫu để áp dụng
"Tài liệu không cần hoàn hảo từ đầu — cần đủ để người đọc không phải hỏi thêm. Tui nhận ra điều này sau khi làm Back-Office: tài liệu đã có nhưng lập trình viên vẫn nhắn hỏi tui, vì thiếu ví dụ cụ thể."
