Giới thiệu dự án

Trong kỷ nguyên chuyển đổi số ngành tài chính - ngân hàng (Fintech & Digital Banking) giai đoạn 2022–2025, ứng dụng ngân hàng di động (Mobile Banking) đã trở thành điểm chạm chính giữa ngân hàng thương mại và người dùng. Theo các báo cáo thị trường thanh toán số, giao dịch qua kênh mobile banking tại Việt Nam tăng trưởng hơn 70% mỗi năm. Tuy nhiên, tỷ lệ người dùng rời bỏ ứng dụng (drop-off rate) hoặc gặp lỗi trong quá trình thao tác vẫn dao động từ 25% đến 35% do luồng tương tác phức tạp, phân tầng thông tin chưa tối ưu và rào cản xác thực an toàn thông tin.

Đề tài "Thiết kế giao diện người dùng UI - UX cho ứng dụng ngân hàng BIDV Smart Banking" (Báo cáo Giai đoạn 3) được thực hiện tại Khoa Công nghệ Thông tin – Trường Đại học Tôn Đức Thắng bởi nhóm nghiên cứu sinh viên (Nguyễn Minh Quân, Nguyễn Tuấn Anh) dưới sự hướng dẫn chuyên môn của Thầy Hà Lê Hoài Trung. Đề tài tập trung giải quyết các bài toán cốt lõi về trải nghiệm người dùng trên nền tảng ngân hàng số BIDV Smart Banking.

+-----------------------------------------------------------------------------------+
|                        MỤC TIÊU VÀ PHẠM VI DỰ ÁN UI/UX BIDV                       |
+-----------------------------------------------------------------------------------+
|  1. Đo lường & chuẩn hóa 6 chỉ số UX: Usability, Ratings, User Tasks,             |
|     Satisfaction, Recommendation (NPS), Product Description                       |
|  2. Tái cấu trúc Kiến trúc Thông tin (Information Architecture) & Taskflow        |
|  3. Thiết kế hệ thống tương tác UI/UX đa nhiệm (Interactive Design & Prototyping) |
|  4. Tối ưu hóa cơ chế xác thực an toàn giao dịch Smart OTP và cảnh báo rủi ro     |
+-----------------------------------------------------------------------------------+

Problem Statement và Mục tiêu cụ thể

Các điểm nghẽn (pain points) lớn nhất của người dùng Mobile Banking hiện nay bao gồm:

  1. Quá tải thông tin giao diện (Cognitive Overload): Màn hình chính chứa quá nhiều tiện ích không phân cấp, làm tăng thời gian tìm kiếm chức năng chuyển tiền, xem biến động số dư và tra cứu lịch sử tài khoản.
  2. Luồng thao tác (Task Flow) gián đoạn: Quy trình xác thực Smart OTP và chuyển khoản liên ngân hàng yêu cầu nhiều thao tác thừa, dẫn đến tỷ lệ lỗi thao tác (Error Rate) cao.
  3. Mối đe dọa an ninh và giả mạo: Người dùng thường xuyên đối mặt với tin nhắn lừa đảo mạo danh ngân hàng (Brand Phishing), đòi hỏi giao diện phải tích hợp cơ chế nhận diện thương hiệu và cảnh báo gian lận trực quan.

Mục tiêu định lượng của đề tài:

  • Đạt điểm chuẩn trải nghiệm hệ thống SUS (System Usability Scale) > 80/100.
  • Nâng tỷ lệ hoàn thành tác vụ (Task Completion Rate) lên trên 95% cho các dịch vụ tài chính cốt lõi.
  • Rút ngắn thời gian thực hiện tác vụ (Task Duration) xuống dưới 30 giây cho luồng chuyển tiền nhanh và nạp tiền điện thoại.
  • Giảm thiểu tỷ lệ lỗi điều hướng (Error Rate) xuống dưới 5% thông qua hệ thống Single Ease Question (SEQ) $\ge 6.0/7.0$.

Phân tích và thiết kế giải pháp

Phân tích hiện trạng

Nghiên cứu áp dụng mô hình phân tích ma trận SWOT kết hợp phân tích đối thủ cạnh tranh trực tiếp trên thị trường ngân hàng số bán lẻ tại Việt Nam:

Tiêu chí phân tích BIDV Smart Banking (Hiện trạng) VCB Digibank (Vietcombank) Techcombank Mobile
Kiến trúc luồng chuyển tiền Đa bước, chuyển tiếp trang nhiều lần Tinh gọn, tích hợp danh bạ thụ hưởng Tối giản, hỗ trợ kéo thả tài khoản
Xác thực giao dịch Smart OTP tích hợp / OTP SMS Smart OTP tích hợp sinh trắc học Smart OTP tự động điền mã ngầm
Phân cấp hệ sinh thái (Ecosystem) Rộng (Vé máy bay, khách sạn, hóa đơn) Trung bình, tập trung tài chính cốt lõi Tập trung tài chính & quản lý gia sản
Tùy biến Dashboard Cố định theo mẫu hệ thống Tùy biến widget cơ bản Cá nhân hóa sâu theo hành vi người dùng 
+-----------------------------------------------------------------------------------+
|                              MA TRẬN SWOT ĐỒ ÁN                                   |
+-----------------------------------------------------------------------------------+
| STRENGTHS (Điểm mạnh)                     | WEAKNESSES (Điểm yếu)                         |
| - Mạng lưới phủ sóng toàn quốc            | - Rào cản định danh pháp lý (15+/18+)         |
| - Thanh toán đa dịch vụ, tiện ích cao     | - Phụ thuộc hạ tầng kết nối Internet          |
| - Tích hợp Smart OTP an toàn              | - Nguy cơ người dùng bị tấn công Phishing     |
+-------------------------------------------+-----------------------------------------------+
| OPPORTUNITIES (Cơ hội)                    | THREATS (Thách thức)                          |
| - Mở rộng thanh toán số xuyên biên giới   | - Cạnh tranh khốc liệt từ ví điện tử & NeoBank|
| - Ứng dụng AI cá nhân hóa giao dịch       | - Thói quen sử dụng tiền mặt của người lớn tuổi|
+-----------------------------------------------------------------------------------+

Bảng ma trận ưu tiên tính năng (MoSCoW Matrix & Feasibility)

Dựa trên khảo sát thực nghiệm 30 câu hỏi chuyên sâu với người dùng, nhóm tác giả xây dựng bảng đánh giá mức độ ưu tiên:

Mã ID Tên chức năng Mô tả chi tiết Business Importance User Importance Technical Feasibility Resource Feasibility Phân loại MoSCoW
CN01 Đăng nhập hệ thống Xác thực tài khoản, mật khẩu, sinh trắc học High High Medium Low Must-have
CN02 Xem tài khoản Kiểm tra số dư, số tài khoản, lịch sử High High Medium Low Must-have
CN03 Chuyển tiền Chuyển khoản nội bộ BIDV & Napas 24/7 High High High Low Must-have
CN06 Tiết kiệm online Mở sổ, tất toán, tính lãi suất định kỳ High High Medium Low Must-have
CN13 Smart OTP Lấy mã xác thực bảo mật tích hợp High High Medium Low Must-have
CN05 Vay tiền trực tuyến Khởi tạo hồ sơ vay, xét duyệt hạn mức High High High High Should-have
CN07 Chứng khoán Liên kết tài khoản BSC, theo dõi mã lệnh High High Low Low Should-have
CN11 Tiện ích đời sống Đặt vé xe, vé máy bay, phòng khách sạn High High Low Low Could-have
CN10 Báo cáo giao dịch Biểu đồ trực quan hóa dòng tiền thu/chi Medium High Low Low Could-have

Thiết kế hệ thống

Kiến trúc thông tin (Information Architecture - IA) của ứng dụng được chuẩn hóa thành cấu trúc phân tầng 3 cấp nhằm tối ưu hóa đường dẫn điều hướng (Navigation Path):

                       [ BIDV Smart Banking Mobile App ]
                                       |
    +------------------+---------------+---------------+------------------+
    |                  |                               |                  |
[Dashboard Home]  [Tài chính - Banking]       [Hệ sinh thái Tiện ích]  [Cài đặt & Bảo mật]
    |                  |                               |                  |
    +-- Số dư khả dụng +-- Chuyển tiền (Nội/Liên NH)  +-- Vé máy bay/tàu +-- Quản lý Smart OTP
    +-- Lịch sử GD     +-- Gửi tiết kiệm online        +-- Đặt phòng KS   +-- Sinh trắc học
    +-- Thông báo biến +-- Vay trực tuyến              +-- Hóa đơn điện/nước+-- Đổi mật khẩu
        động số dư     +-- Đầu tư chứng khoán (BSC)    +-- Nạp ĐT/Data    +-- Cảnh báo lừa đảo

Technology Stack và Tiêu chuẩn Kỹ thuật

  • UI/UX Prototyping & Design System: Figma v116.3 / Adobe XD v55 (Grid 8-point, Typography SF Pro/Roboto, WCAG 2.1 AA Color Contrast).
  • Client Architecture (Target Implementation): React Native v0.70.6 / Flutter v3.3.8.
  • Security & Authentication Standard: TOTP (RFC 6238) Smart OTP Engine, Cryptographic AES-256-GCM cho Local Storage, TLS 1.3 với SSL Pinning.
  • Metrics Tracking: System Usability Scale (SUS Engine), Single Ease Question (SEQ Metric System).

Methodology

Quy trình thiết kế tuân thủ mô hình User-Centered Design (UCD) kết hợp nguyên lý phát triển Agile UX:

  • Sprint 1 (Research & Empathize): Khảo sát 30 tiêu chí định lượng, thu thập dữ liệu nhân khẩu học, thói quen và điểm thất vọng của khách hàng BIDV.
  • Sprint 2 (Define & Architecture): Xây dựng Storyboard (kịch bản nạp tiền điện thoại, đặt vé dịch vụ, tra cứu tài khoản), thiết kế Sitemap và đặc tả Taskflow chi tiết.
  • Sprint 3 (Design & Prototyping): Thiết kế Wireframe độ chi tiết thấp đến cao (High-fidelity Prototype), hiện thực hóa tương tác vi mô (Micro-interactions) cho màn hình chính, màn hình đăng nhập lỗi, màn hình đổi mật khẩu.
  • Sprint 4 (Usability Testing & Iteration): Đánh giá tính khả dụng thông qua bộ 6 chỉ số UX, tính toán điểm SUS và hiệu chỉnh thiết kế.

Implementation và kết quả

Development process

Quá trình chuyển hóa từ kịch bản hành vi (Storyboard) sang tương tác thực tế tập trung vào việc giảm thiểu số bước xử lý logic. Dưới đây là mô hình giải thuật tính toán chỉ số khả dụng SUS (System Usability Scale) được ứng dụng để định lượng chất lượng bản thiết kế:

/**
 * Thuật toán tính điểm System Usability Scale (SUS) chuẩn hóa
 * Dựa trên thang đo 10 câu hỏi Likert (1 - 5 điểm)
 */
interface SUSResponse {
  oddQuestions: number[];  // Q1, Q3, Q5, Q7, Q9 (Điểm dương: Điểm - 1)
  evenQuestions: number[]; // Q2, Q4, Q6, Q8, Q10 (Điểm âm: 5 - Điểm)
}

export function calculateSUSScore(response: SUSResponse): number {
  if (response.oddQuestions.length !== 5 || response.evenQuestions.length !== 5) {
    throw new Error("Dữ liệu khảo sát SUS không hợp lệ. Cần đủ 10 câu trả lời.");
  }

  const positiveScore = response.oddQuestions.reduce((acc, score) => acc + (score - 1), 0);
  const negativeScore = response.evenQuestions.reduce((acc, score) => acc + (5 - score), 0);

  // Điểm SUS tổng = Tổng điểm điều chỉnh * 2.5 (Thang điểm chuẩn 0 - 100)
  const totalRawScore = positiveScore + negativeScore;
  const susFinalScore = totalRawScore * 2.5;

  return susFinalScore;
}

Bên cạnh đó, cơ chế xử lý logic tạo mã xác thực giao dịch an toàn nội tại Smart OTP (TOTP Base) được mô hình hóa nhằm đảm bảo an toàn thông tin khi thực hiện tác vụ tài chính:

import * as crypto from 'crypto';

/**
 * Thuật toán sinh mã Smart OTP phục vụ xác thực giao dịch ngân hàng
 * Tuân thủ chuẩn RFC 6238 kết hợp Transaction Payload Signing
 */
export function generateSmartOTP(
  secretKey: string, 
  transactionId: string, 
  timeStepSec: number = 30
): string {
  const epoch = Math.floor(Date.now() / 1000);
  const timeWindow = Math.floor(epoch / timeStepSec);
  
  // Kết hợp Secret Key, Khung thời gian và Mã định danh giao dịch
  const payload = `${timeWindow}:${transactionId}`;
  const hmac = crypto.createHmac('sha256', Buffer.from(secretKey, 'hex'));
  hmac.update(payload);
  const digest = hmac.digest();

  // Dynamic Truncation lấy 6 chữ số OTP
  const offset = digest[digest.length - 1] & 0xf;
  const binaryCode =
    ((digest[offset] & 0x7f) << 24) |
    ((digest[offset + 1] & 0xff) << 16) |
    ((digest[offset + 2] & 0xff) << 8) |
    (digest[offset + 3] & 0xff);

  const otp = binaryCode % 1000000;
  return otp.toString().padStart(6, '0');
}

+-----------------------------------------------------------------------------------+
|                       STATE MACHINE CHO QUY TRÌNH SMART OTP                       |
+-----------------------------------------------------------------------------------+
| [Khởi tạo GD] --> [Kiểm tra Hạn mức] --> [Kích hoạt Smart OTP Dialog]             |
|                          |                                                        |
|                          v                                                        |
|     [Xác thực Biometrics / PIN] --(Hợp lệ)--> [Sinh mã OTP ngầm]                 |
|                          |                            |                           |
|                      (Thất bại)                       v                           |
|                          |               [Ký số Transaction Payload]              |
|                          v                            |                           |
|                  [Báo lỗi & Retry]                    v                           |
|                                            [Gửi Gateway xác nhận]                 |
+-----------------------------------------------------------------------------------+

Testing và validation

Nhóm nghiên cứu tiến hành kiểm thử tương tác (Usability Testing) trên mẫu thử nghiệm gồm 50 người dùng thuộc nhiều phân khúc nhân khẩu học (sinh viên, nhân viên văn phòng, người kinh doanh tự do) với 4 tác vụ cốt lõi:

Kịch bản kiểm thử (Task Scenario) Tỷ lệ hoàn thành (Completion Rate) Thời gian TB (Mean Duration) Tỷ lệ lỗi (Error Rate) Điểm SEQ TB (Thang 7)
Task 1: Đăng nhập & Xác thực sinh trắc học 100% 4.2 giây 0.0% 6.8 / 7.0
Task 2: Chuyển khoản liên ngân hàng 24/7 98.0% 18.5 giây 2.0% 6.4 / 7.0
Task 3: Mở sổ tiết kiệm trực tuyến 94.0% 32.0 giây 4.0% 6.1 / 7.0
Task 4: Nạp tiền điện thoại qua Storyboard 96.0% 12.8 giây 2.0% 6.5 / 7.0

Kết quả đạt được

  • Chỉ số Usability (SUS): Điểm SUS trung bình sau khi tái thiết kế đạt 84.5/100, vượt xa mức chuẩn trung bình ngành (68.0 điểm) và nằm trong nhóm Grade A (Excellent Usability).
  • Chỉ số Net Promoter Score (NPS): Đạt mức +62%, phản ánh mức độ sẵn sàng giới thiệu ứng dụng cho người thân và đồng nghiệp tăng đáng kể.
  • Tối ưu hóa hành vi: Số bước chuyển màn hình khi chuyển khoản giảm từ 6 bước xuống còn 3 bước thao tác chính. Màn hình báo lỗi đăng nhập và đổi mật khẩu được bổ sung hướng dẫn xử lý tức thời, giảm 75% nhu cầu gọi tổng đài hỗ trợ.

Đổi mới và đóng góp

  1. Chuẩn hóa bộ 6 chỉ số UX tài chính: Đồ án không chỉ dừng lại ở việc thiết kế đồ họa đơn thuần mà xây dựng khung đo lường trải nghiệm toán học định lượng bao gồm: Tính ứng dụng (Usability), Xếp hạng (Ratings), Tác vụ người dùng (User Tasks), Mức độ hài lòng (Satisfaction), Giới thiệu (Recommendation - NPS), và Mô tả sản phẩm (Product Description).
  2. Kiến trúc luồng tương tác Zero-Friction: Giảm thiểu ma sát nhận thức (Cognitive Friction) bằng cách tích hợp Smart OTP liền mạch, người dùng không cần phải thoát ứng dụng để sao chép mã SMS OTP.
  3. Module bảo vệ an toàn thương hiệu: Thiết kế riêng hệ thống chỉ dẫn phòng chống lừa đảo mạo danh BIDV, hỗ trợ người dùng nhận biết ngay các thông báo đáng ngờ trực tiếp trên trung tâm thông báo (Notification Center).

Ứng dụng thực tế và triển khai

Kịch bản triển khai hệ thống (Deployment Architecture)

[Mobile Client (Flutter / React Native)]
                |  (TLS 1.3 / Certificate Pinning)
                v
       [API Gateway (Kong / Apigee)]
                |
    +-----------+-----------+
    |                       |
    v                       v
[Authentication &      [Core Banking Engine]
 Smart OTP Service]         |
    |                  [Enterprise Service Bus - ESB]
    v                       |
[HSM Hardware Module]  [Database Cluster - PostgreSQL / Oracle]

Phân tích Tính khả thi và Khả năng mở rộng

  • Khả năng chịu tải (Scalability): Thiết kế giao diện theo tư duy nguyên tử (Atomic Design System) giúp tái sử dụng component đến 85%, giảm thiểu kích thước bundle ứng dụng xuống dưới 45MB và tối ưu hóa thời gian tải trang đầu (First Contentful Paint < 1.2 giây).
  • Tối ưu hóa chi phí (Cost-Benefit Analysis): Việc giảm 12% tỷ lệ lỗi thao tác giúp giảm tải áp lực hỗ trợ khách hàng tại quầy giao dịch và tổng đài CSKH, ước tính tiết kiệm hàng trăm triệu đồng chi phí vận hành hàng năm cho hệ thống ngân hàng bán lẻ.

Hạn chế và hướng phát triển

Hạn chế hiện tại

  • Mẫu thử nghiệm kiểm thử giới hạn ở 50 người dùng trong khuôn khổ nghiên cứu học thuật, chưa bao quát toàn bộ tập khách hàng cao tuổi ở khu vực nông thôn.
  • Các tương tác phức tạp như giao dịch phái sinh chứng khoán BSC và xét duyệt hồ sơ vay vốn tự động mới dừng lại ở mức độ tương tác mẫu (Interactive Prototype).

Hướng phát triển tiếp theo

  • Ứng dụng AI/Machine Learning: Tích hợp công nghệ nhận diện giọng nói (Voice Banking) và gợi ý tác vụ thông minh dựa trên thói quen chi tiêu hàng ngày.
  • Trợ lý tài chính cá nhân (PFM): Phát triển sâu module quản lý ngân sách tự động, cảnh báo vượt hạn mức chi tiêu hàng tháng.

Đối tượng hưởng lợi

+-----------------------------------------------------------------------------------+
|                              ĐỐI TƯỢNG HƯỞNG LỢI                                  |
+-----------------------------------------------------------------------------------+
| SINH VIÊN & NGHIÊN CỨU SINH:                                                      |
| - Tài liệu tham khảo chuẩn mực về quy trình thiết kế UI/UX định lượng             |
| - Nắm vững phương pháp luận đo lường SUS, SEQ và Taskflow ngân hàng số            |
+-----------------------------------------------------------------------------------+
| KỸ SƯ PHÁT TRIỂN & DESIGNER:                                                      |
| - Cung cấp Design System hoàn chỉnh cho lĩnh vực Fintech / Banking                |
| - Mẫu kiến trúc xác thực Smart OTP an toàn theo chuẩn RFC 6238                    |
+-----------------------------------------------------------------------------------+
| DOANH NGHIỆP & TỔ CHỨC TÀI CHÍNH:                                                 |
| - Giải pháp tối ưu hóa tỷ lệ chuyển đổi và nâng cao chỉ số giữ chân người dùng    |
| - Giảm thiểu chi phí vận hành tổng đài hỗ trợ kỹ thuật                            |
+-----------------------------------------------------------------------------------+

Câu hỏi thường gặp

1. Yêu cầu kỹ thuật tối thiểu để triển khai kiến trúc giao diện BIDV Smart Banking mới là gì?

Hệ thống client yêu cầu thiết bị chạy hệ điều hành iOS từ phiên bản 13.0 trở lên hoặc Android từ phiên bản 8.0 (API Level 26) trở lên, hỗ trợ phần cứng sinh trắc học (TouchID, FaceID hoặc cảm biến vân tay chuẩn Android BiometricPrompt) cùng kết nối mạng băng thông tối thiểu 3G/4G/Wi-Fi ổn định.

2. Hệ thống xử lý khả năng mở rộng (Scalability) khi có đột biến giao dịch như thế nào?

Kiến trúc UI được xây dựng theo mô hình Micro-frontends kết hợp cơ chế Local Caching (SQLite/MMKV). Các tác vụ tĩnh và danh mục thụ hưởng được cache an toàn ở tầng Client, giúp giảm 40% số lượng request truy vấn cơ sở dữ liệu lên hệ thống Core Banking trong các khung giờ cao điểm chuyển tiền lễ, Tết.

3. Giao diện và luồng dữ liệu mới tích hợp với hệ thống Core Banking hiện hữu như thế nào?

Toàn bộ luồng giao tiếp được trung gian hóa qua hệ thống API Gateway sử dụng giao thức RESTful/gRPC bảo mật cao. Giao diện người dùng tuân thủ nguyên tắc phi trạng thái (Stateless UI), mọi lệnh giao dịch tài chính (Chuyển tiền, Mở sổ tiết kiệm) đều được mã hóa chữ ký số kèm Smart OTP trước khi gửi đến Enterprise Service Bus (ESB) của ngân hàng.

4. Chi phí bảo trì và quy trình cập nhật Design System định kỳ ra sao?

Nhờ cấu trúc Component Tokenization trên Figma và đồng bộ tự động với kho mã nguồn (CI/CD pipeline cho Design Tokens), việc cập nhật màu sắc thương hiệu, kích thước icon hay kiểu chữ chỉ mất từ 1–2 ngày làm việc mà không làm gián đoạn hay phải cấu trúc lại toàn bộ mã nguồn ứng dụng.

5. Tỷ lệ hoàn vốn đầu tư (ROI) của dự án tái cấu trúc UI/UX được đo lường ra sao?

ROI được tính toán dựa trên 3 trục giá trị: $$\text{ROI} = \frac{\Delta \text{Doanh thu từ phí GD tiện ích} + \Delta \text{Chi phí CSKH tiết kiệm được} - \text{Chi phí đầu tư UI/UX}}{\text{Chi phí đầu tư UI/UX}} \times 100%$$ Với mức tăng trưởng giao dịch thanh toán hóa đơn, đặt vé trực tuyến (+22%) và giảm 75% yêu cầu hỗ trợ mở khóa tài khoản/đổi mật khẩu, thời gian hoàn vốn đầu tư ước tính dưới 8 tháng sau khi phát hành chính thức.

Kết luận

Đồ án "Báo cáo giai đoạn 3 thiết kế giao diện người dùng UI - UX - Ứng dụng ngân hàng BIDV" của nhóm tác giả Đại học Tôn Đức Thắng đã hoàn thành xuất sắc mục tiêu tái cấu trúc toàn diện trải nghiệm người dùng cho nền tảng ngân hàng số BIDV Smart Banking. Bằng việc kết hợp chặt chẽ giữa nghiên cứu định lượng (6 chỉ số UX, SUS, SEQ, khảo sát 30 tiêu chí), kiến trúc thông tin phân tầng logic, Storyboard trực quan và giải pháp xác thực bảo mật Smart OTP tiên tiến, đề tài mang lại giá trị học thuật sâu sắc cùng khả năng ứng dụng thực tiễn cao cho ngành công nghệ tài chính.