CẨM NANG QUY TRÌNH THIẾT KẾ UX/UI

Mã tài liệu:	EZD-DSGN-PRO	Phiên bản:	1.0
Ngày hiệu lực:	13/09/2025	Người soạn:	Stephen
Người phê duyệt:	Stephen	Trang:	1/4

1.0 MỤC ĐÍCH

Tài liệu này mô tả chi tiết quy trình làm việc chuẩn cho đội ngũ thiết kế UX/UI trong dự án EZD AI Booth. Quy trình này nhằm đảm bảo các giải pháp thiết kế luôn bắt nguồn từ sự thấu hiểu người dùng và được kiểm chứng một cách có hệ thống trước khi bàn giao.

Lưu ý: Toàn bộ quá trình vẫn phải tuân thủ và khớp với các giai đoạn đã được định nghĩa trong quy trình tổng thể của dự án tại EZD-QMS-P01.

2.0 SƠ ĐỒ QUY TRÌNH

Triết lý: Chúng ta không "vẽ màn hình". Chúng ta giải quyết vấn đề cho người dùng. Quy trình này được thiết kế để đảm bảo chúng ta luôn bắt đầu từ việc thấu hiểu vấn đề, sau đó mới đến việc sáng tạo giải pháp. Đây là một quy trình lặp lại (iterative), không phải thác nước (waterfall).

Quy trình gồm 4 giai đoạn chính:

• Phase 1: Thấu hiểu & Khám phá (Empathize & Discover)
• Phase 2: Xác định & Lập kế hoạch (Define & Plan)
• Phase 3: Thiết kế & Thử nghiệm (Design & Test)
• Phase 4: Bàn giao & Hỗ trợ (Handoff & Support)

Sơ đồ Quy trình Thiết kế UX/UI cho Dự án EZD AI Booth

%% Sơ đồ Quy trình Thiết kế UX/UI cho Dự án EZD AI Booth
graph TD
    %% Định nghĩa Style cho các khối
    classDef phase fill:#0D1117,stroke:#8B949E,color:#F0F6FC,font-weight:bold
    classDef activity fill:#161B22,stroke:#0A74DA,color:#F0F6FC
    classDef deliverable fill:#232931,stroke:#2DA44E,color:#F0F6FC,shape:document

    %% Giai đoạn 1: Thấu hiểu & Khám phá
    subgraph P1 [Phase 1: Thấu hiểu & Khám phá]
        direction LR
        A1["Nghiên cứu<br>Tài liệu & Đối thủ"]:::activity
        A2["Phỏng vấn<br>Các bên liên quan"]:::activity
        A3["Xây dựng<br>Personas & Empathy Maps"]:::activity

        D1["<b>Deliverables:</b><br>- Personas<br>- Báo cáo Phân tích"]:::deliverable

        A1 & A2 & A3 --> D1
    end
    class P1 phase


    %% Giai đoạn 2: Xác định & Lập kế hoạch
    subgraph P2 [Phase 2: Xác định & Lập kế hoạch]

        B1["Xác định<br>Vấn đề Cốt lõi (Problem Statements)"]:::activity
        B2["Xây dựng<br>Luồng người dùng (User Flows)"]:::activity
        B3["Xác định<br>Phạm vi Tính năng MVP"]:::activity

        D2["<b>Deliverables:</b><br>- Sơ đồ User Flows<br>- Danh sách Tính năng MVP"]:::deliverable

        B1 --> B2 --> B3 --> D2
    end
    class P2 phase

    %% Giai-/ đoạn 3: Thiết kế & Thử nghiệm (Vòng lặp)
    subgraph P3 [Phase 3: Thiết kế & Thử nghiệm]

        subgraph Loop [Vòng lặp Sáng tạo]
            direction LR
            C1["1. Phác thảo (Sketch)"]:::activity
            C2["2. Dựng Wireframe"]:::activity
            C3["3. Tạo Prototype Tương tác"]:::activity
            C4["4. Kiểm thử Người dùng (User Testing)"]:::activity

            C1 --> C2 --> C3 --> C4
            C4 -- "Feedback & Cải tiến" --> C1
        end

        C5["Thiết kế Giao diện UI<br>(Visual Design)"]:::activity
        D3["<b>Deliverables:</b><br>- Prototype Tương tác<br>- Final UI Mockups"]:::deliverable

        C4 -- "✅ Xác thực thành công" --> C5 --> D3
    end
    class P3 phase

    %% Giai đoạn 4: Bàn giao & Hỗ trợ
    subgraph P4 [Phase 4: Bàn giao & Hỗ trợ]

        E1["Chuẩn bị Tài liệu Thiết kế<br>(Design Specs)"]:::activity
        E2["Họp Bàn giao cho Dev Team"]:::activity
        E3["Hỗ trợ & Đảm bảo Chất lượng<br>(Design QA)"]:::activity

        D4["🚀 Sản phẩm Hoàn chỉnh<br>được Lập trình"]:::deliverable

        E1 --> E2 --> E3 --> D4
    end
    class P4 phase

    %% Nối các Giai đoạn với nhau
    D1 --> B1
    D2 --> C1
    D3 --> E1

Giai đoạn 1: Thấu hiểu & Khám phá (Empathize & Discover)

• Mục tiêu: Đắm mình vào thế giới của người dùng và doanh nghiệp. Thấu hiểu sâu sắc bối cảnh, nhu cầu, và nỗi đau của họ. Ở giai đoạn này, chúng ta không được phép thiết kế bất cứ thứ gì.
• Hoạt động chính:
  1. Nghiên cứu Tài liệu Dự án: Đọc và hiểu kỹ tất cả các tài liệu đã có: Business Model Canvas, Phân tích PEST, Mô tả Sản phẩm, Kiến trúc Hệ thống, Nguyên tắc & Tiêu chuẩn Thiết kế.
  2. Phỏng vấn các Bên liên quan (Stakeholder Interviews): Nói chuyện với các founders, giám đốc sản phẩm để hiểu rõ tầm nhìn kinh doanh, mục tiêu của prototype và các ràng buộc về kỹ thuật, thời gian.
  3. Xây dựng Chân dung Người dùng (Personas): Tạo ra các chân dung chi tiết cho các nhóm người dùng chính. Ví dụ:
     • Người dùng cuối: "Chị An, 32 tuổi, nhân viên văn phòng, đi TTTM để mua sắm và giải trí cuối tuần, không quá rành công nghệ nhưng thích trải nghiệm mới."
     • Khách hàng Doanh nghiệp: "Anh Bảo, 40 tuổi, Trưởng phòng Marketing của TTTM, bận rộn, cần dữ liệu nhanh, trực quan để ra quyết định."
  4. Phân tích Đối thủ cạnh tranh (Competitive Analysis): Nghiên cứu các giải pháp kiosk tương tác khác, các trợ lý ảo bằng giọng nói (Siri, Google Assistant), các hệ thống dashboard phân tích dữ liệu. Họ làm tốt ở đâu? Họ thất bại ở đâu?
• Sản phẩm đầu ra (Deliverables):
  • Bản mô tả chi tiết các Personas.
  • Bản đồ Thấu cảm (Empathy Maps) cho từng persona.
  • Báo cáo Phân tích Đối thủ cạnh tranh.

Giai đoạn 2: Xác định & Lập kế hoạch (Define & Plan)

• Mục tiêu: Tổng hợp những gì đã học ở Giai đoạn 1 để xác định rõ ràng vấn đề cốt lõi cần giải quyết và phạm vi công việc cho phiên bản prototype.
• Hoạt động chính:
  1. Định nghĩa Vấn đề (Problem Statements): Dựa trên persona, viết ra các câu phát biểu vấn đề theo dạng "How Might We..." (Làm thế nào chúng ta có thể...). Ví dụ: "Làm thế nào chúng ta có thể giúp chị An tìm được cửa hàng một cách nhanh nhất và thú vị nhất?".
  2. Lên ý tưởng (Brainstorming): Tổ chức các buổi brainstorm (ví dụ: dùng phương pháp Crazy 8s) để phát sinh thật nhiều ý tưởng giải quyết các vấn đề trên.
  3. Xây dựng Luồng Người dùng (User Flows): Vẽ sơ đồ chi tiết từng bước mà người dùng sẽ đi qua để hoàn thành một tác vụ. Ví dụ: Luồng "Hỏi đường đến một cửa hàng" cho chị An, hoặc luồng "Xem báo cáo câu hỏi phổ biến" cho anh Bảo.
  4. Xác định Phạm vi MVP (MVP Scoping): Dựa trên các luồng, liệt kê tất cả các tính năng cần thiết. Sau đó, cùng với team sản phẩm và kỹ thuật, phân loại chúng theo phương pháp MoSCoW để xác định phạm vi cho prototype:
     • Must-have: Bắt buộc phải có.
     • Should-have: Nên có nếu đủ thời gian.
     • Could-have: Có thể có, làm sản phẩm tốt hơn.
     • Won't-have: Sẽ không làm trong phiên bản này.
• Sản phẩm đầu ra (Deliverables):
  • Danh sách các Vấn đề Cốt lõi.
  • Sơ đồ Luồng Người dùng (User Flow Diagrams).
  • Danh sách Tính năng đã được ưu tiên cho MVP.

Giai đoạn 3: Thiết kế & Thử nghiệm (Design & Test)

• Mục tiêu: Biến các ý tưởng và luồng người dùng thành các thiết kế hữu hình, có thể tương tác và được kiểm chứng bởi người dùng thật. Đây là một chu trình lặp đi lặp lại.
• Hoạt động chính (Chu trình Thiết kế):
  1. Phác thảo (Sketching): Vẽ các ý tưởng bố cục ra giấy hoặc bảng trắng. Nhanh, rẻ và dễ dàng vứt bỏ.
  2. Dựng Khung sườn (Wireframing): Tạo các wireframe kỹ thuật số (độ trung thực thấp-trung bình) trên Figma. Tập trung vào cấu trúc, bố cục và luồng, bỏ qua màu sắc, font chữ.
  3. Dựng Prototype Tương tác: Nối các màn hình wireframe lại với nhau để tạo thành một prototype có thể bấm được. Điều này giúp mô phỏng luồng người dùng một cách thực tế.
  4. Kiểm thử Người dùng (User Testing): Đưa prototype cho 3-5 người dùng (có thể là người trong công ty đóng vai persona) dùng thử. Hãy quan sát, lắng nghe và ghi lại những điểm họ gặp khó khăn. Đừng bảo vệ thiết kế của bạn.
  5. Lặp lại (Iterate): Dựa trên phản hồi, quay lại bước 1, 2 hoặc 3 để cải tiến. Lặp lại chu trình này cho đến khi các luồng chính trở nên mượt mà và dễ hiểu.
  6. Thiết kế Giao diện (Visual Design - UI): Sau khi UX (khung sườn và luồng) đã vững, áp dụng Hệ thống Tiêu chuẩn Thiết kế (màu sắc, font chữ, icon...) để tạo ra các mockup có độ trung thực cao (high-fidelity).
• Sản phẩm đầu ra (Deliverables):
  • Wireframes chi tiết.
  • Prototype tương tác trên Figma.
  • Báo cáo kết quả User Testing.
  • Các màn hình thiết kế UI hoàn chỉnh (Final Mockups).

Giai đoạn 4: Bàn giao & Hỗ trợ (Handoff & Support)

• Mục tiêu: Chuyển giao các thiết kế cho đội ngũ kỹ thuật một cách rõ ràng, đầy đủ nhất để đảm bảo sản phẩm được lập trình đúng như thiết kế.
• Hoạt động chính:
  1. Chuẩn bị Tài liệu Thiết kế (Design Spec):
     • Trong file Figma, ghi chú chi tiết các thông số: kích thước, khoảng cách, mã màu, thuộc tính font chữ.
     • Mô tả các hiệu ứng chuyển động và các trạng thái của component (hover, pressed, disabled...).
  2. Tổ chức Tài nguyên (Asset Organization): Chuẩn bị và xuất tất cả các tài nguyên đồ họa (icon, hình ảnh...) theo đúng định dạng và kích thước mà đội ngũ dev cần.
  3. Họp Bàn giao (Handoff Meeting): Tổ chức một buổi họp chính thức với Product Manager và Tech Lead để trình bày toàn bộ thiết kế, giải thích các luồng và trả lời câu hỏi.
  4. Hỗ trợ Phát triển (Design QA): Trong quá trình lập trình, designer phải thường xuyên kiểm tra sản phẩm trên môi trường dev để đảm bảo nó được hiện thực hóa đúng 100% so với thiết kế.
• Sản phẩm đầu ra (Deliverables):
  • File Figma được tổ chức gọn gàng, có đầy đủ ghi chú.
  • Thư mục chứa tất cả tài nguyên đồ họa đã được xuất.
  • Sự hỗ trợ liên tục cho đội ngũ kỹ thuật.