Bài viết gốc được xuất bản tại ITPrep - Cẩm nang & Cheat Sheet Phỏng vấn IT.

Trong bối cảnh phát triển sản phẩm hiện đại, đặc biệt là với những anh em từ dân Tech (như code ReactJS hay làm Frontend) rẽ ngang sang làm Business Analyst (BA), vai trò của chúng ta không chỉ dừng lại ở việc gõ tài liệu requirement khô khan. BA ngày nay giống như những người "đạo diễn" trải nghiệm – cầu nối giữa logic hệ thống khô cứng và trải nghiệm người dùng mượt mà.

Để làm được điều này, vũ khí mạnh nhất mà một BA có thể tận dụng chính là combo: Use Case (Kịch bản sử dụng) và Wireframe (Thiết kế giao diện thô).

Bài viết này sẽ hướng dẫn bạn cách kết hợp chúng để tạo ra một bản thiết kế trải nghiệm "bất bại", giúp team Dev code nhàn hơn và team Design (Figma/MockFlow) không bị lạc lối.

1. Hai Mảnh Ghép Của Bức Tranh Trải Nghiệm

Trước khi kết hợp, hãy điểm nhanh lại định nghĩa của 2 công cụ này:

📝 Use Case là gì? (Phần "Não")

Nó là kỹ thuật mô tả cách User tương tác với hệ thống để đạt một mục tiêu. Nó tập trung vào chức năng từ góc độ người dùng. Một Use Case chuẩn thường có: Actor (Tác nhân), Mục tiêu, Luồng chính (Happy path), Luồng thay thế và Luồng ngoại lệ (Lỗi).
👉 Tác dụng: Đảm bảo không sót logic nghiệp vụ.

🖼️ Wireframe là gì? (Phần "Xác")

Là bản phác thảo trực quan độ trung thực thấp (low-fidelity) của UI. Bỏ qua màu sắc, font chữ đẹp đẽ, Wireframe chỉ tập trung vào: Cấu trúc, bố cục, luồng tương tác và phân cấp thông tin.
👉 Tác dụng: Trực quan hóa cấu trúc, giúp chốt luồng với sếp/khách hàng cực nhanh.

2. 1 + 1 = 3: Tại Sao Phải Kết Hợp Chúng?

Viết Use Case chay thì Dev và khách hàng khó hình dung. Vẽ Wireframe chay thì dễ bị sót trường hợp báo lỗi (Exception luồng). Khi kết hợp lại, ta có:

• Cầu nối Logic - Hình ảnh: Use Case định nghĩa bước đi, Wireframe hiển thị bước đó trông như thế nào trên màn hình.
• Không sót case (Edge cases): Mỗi bước trong Use Case có 1 Wireframe tương ứng. BA sẽ lập tức nhận ra nếu màn hình thiếu chỗ hiển thị câu báo lỗi!
• Chốt requirement nhanh hơn: Khách hàng mù mờ về IT nhìn Wireframe + Use Case sẽ hiểu ngay hệ thống hoạt động thế nào để chốt hạ.

3. Quy Trình "Đạo Diễn" Trải Nghiệm Thực Chiến

Để kết hợp 2 công cụ này, anh em BA có thể làm theo 3 bước sau:

Bước 1: Xây dựng Use Case chi tiết

Xác định Actor, mục tiêu, viết các bước luồng chính và luồng ngoại lệ.

Bước 2: Chuyển hóa Use Case thành Wireframe (Quan trọng)

Với mỗi bước trong Use Case, hãy vẽ một Wireframe tương ứng. Dưới đây là ví dụ kinh điển:

Use Case: Đăng nhập vào hệ thống
Actor: Người dùng đã đăng ký
Mục tiêu: Người dùng truy cập được vào tài khoản của mình.

Luồng chính:
1. Người dùng truy cập trang đăng nhập.
2. Hệ thống hiển thị form đăng nhập (Email/Tên đăng nhập, Mật khẩu, nút "Đăng nhập").
3. Người dùng nhập Email/Tên đăng nhập.
4. Người dùng nhập Mật khẩu.
5. Người dùng click nút "Đăng nhập".
6. Hệ thống xác thực thông tin.
7. Nếu thành công, hệ thống chuyển hướng người dùng đến trang Dashboard.

👉 CHUYỂN HÓA SANG WIREFRAME:
- Bước 1 & 2: Vẽ Wireframe "Trang Đăng nhập" (Có Header, Input Email, Input Pass, Nút Login, Link Quên pass).
- Bước 7: Vẽ Wireframe "Trang Dashboard" (Có Menu điều hướng, Nội dung chính).

Luồng ngoại lệ (Đăng nhập thất bại):
- Nếu sai pass: Hệ thống hiển thị lỗi "Tên đăng nhập hoặc mật khẩu không đúng". 
👉 Cập nhật Wireframe "Trang Đăng nhập": Vẽ thêm dòng text màu đỏ cảnh báo lỗi dưới form để team Dev/UI biết chỗ nhét validation!

Bước 3: Kiểm thử và lặp lại

Mang bộ combo này đi hỏi khách hàng và team Dev: "Luồng đi thế này, màn hình hiển thị thế này hợp lý chưa?". Thu thập phản hồi và điều chỉnh ngay trên Wireframe (sửa trên Wireframe rẻ và nhanh gấp ngàn lần sửa code).

💡 Mini-case: Tính năng "Đặt lại mật khẩu"
Khi vẽ Wireframe màn hình "Nhận link reset qua Email", BA nhận ra người dùng rất hay quên check hòm thư rác. Nhờ vẽ Wireframe, BA lập tức bổ sung một dòng text hướng dẫn nhỏ: "Vui lòng kiểm tra hộp thư Spam nếu không thấy email" và bổ sung nút "Gửi lại email". Trải nghiệm người dùng (UX) được nâng tầm ngay từ lúc chưa viết dòng code nào!

4. Ma Trận Quyết Định: Chọn Công Cụ Nào?

Không phải lúc nào cũng rảnh để ngồi vẽ cả Use Case lẫn Wireframe. Anh em tham khảo ma trận này:

5. FAQ - Giải Đáp Nhanh Cho BA

Q1: BA có bắt buộc phải biết thiết kế UI/UX để vẽ Wireframe không?
Không cần làm màu mè như Designer. BA chỉ cần hiểu nguyên tắc UX cơ bản (phân cấp thông tin, luồng thao tác) để vẽ các khối vuông, nút bấm thô. Kéo thả bằng MockFlow, Balsamiq hay Figma đều được.

Q2: Làm sao để đảm bảo Use Case và Wireframe luôn đồng bộ?
Đây là nỗi ám ảnh lớn nhất. Bí kíp là Tham chiếu chéo (Cross-reference). Trong tài liệu Use Case, bước số 3 hãy ghi chú [Xem Wireframe WF-01]. Và trên bản vẽ Figma, hãy để lại comment trỏ về [Use Case UC-05]. Khi sửa 1 bên, bắt buộc phải ngó sang bên kia.

Q3: Use Case + Wireframe khác gì User Stories?

• User Story: Nói CÁI GÌ (As a user, I want... so that...). Phục vụ việc lên backlog.
• Use Case + Wireframe: Trả lời CÁCH THỨC nó hoạt động và trông như thế nào. BA lấy User Story làm đề bài, rồi dùng Use Case + Wireframe làm bài giải chi tiết đưa cho Dev.

Lời Kết

Bằng cách kết hợp một cách chiến lược giữa Use Case và Wireframe, BA không chỉ đảm bảo bắt sạch các requirement khó nhằn mà còn kiến tạo một trải nghiệm UX mượt mà.

Sự kết hợp này chính là "bảo bối" để BA khẳng định vai trò Lead luồng trải nghiệm, giúp team Dev làm việc nhẹ nhàng, team Design có khung sườn vững chắc, và sản phẩm cuối cùng mang lại giá trị thực sự.

💡 Khám phá thêm: Nếu bạn đang cày cuốc để trở thành một BA thực chiến, đừng quên ghé thăm ITPrep.com.vn để đọc thêm về kỹ thuật viết BRD, Business Case hay cẩm nang dùng BPMN nhé!