Dự ánSmart OTP App
Thiết kế Smart OTP App giúp trải nghiệm xác thực ngân hàng trở nên nhanh, rõ ràng và đáng tin cậy hơn.
Một trải nghiệm xác thực ngân hàng an toàn cho Bac A Bank, được thiết kế xoay quanh tốc độ, sự rõ ràng, yêu cầu tuân thủ và niềm tin của người dùng.
Tổng quan
Một luồng xác thực an toàn được thiết kế quanh tốc độ, sự rõ ràng và cảm giác tin cậy.
Smart OTP là một điểm chạm có mức độ tin cậy cao trong trải nghiệm ngân hàng: người dùng cần xác thực hành động nhanh, nhưng từng bước vẫn phải an toàn, dễ hiểu và phù hợp yêu cầu bảo mật.
Vai trò của tôi tập trung vào thiết kế UX/UI cho hành trình xác thực, chuyển các ràng buộc bảo mật thành màn hình rõ ràng và phối hợp với developer, chuyên gia bảo mật để thiết kế có thể triển khai thực tế.
Bài toán
Xác thực giao dịch bằng SMS OTP có giới hạn quen thuộc trong ngành ngân hàng: phụ thuộc sóng viễn thông, có độ trễ nhận mã, và không còn đáp ứng yêu cầu xác thực mạnh theo Thông tư 50. Bac A Bank cần chuyển người dùng sang Smart OTP — mã xác thực sinh ngay trên app, không qua SMS.
Nhưng đổi phương thức xác thực là đổi thói quen. Người dùng quen bấm để nhận mã qua tin nhắn, giờ phải tự tạo và nhớ một mã PIN riêng cho app, đồng thời vẫn cần tin rằng cách mới an toàn như cách cũ. Thử thách thiết kế là cân bằng tốc độ với cảm giác an tâm: một luồng Smart OTP không thể quá casual, nhưng cũng không được nặng nề hoặc khó hiểu khi người dùng đang thực hiện tác vụ ngân hàng.
Để bắc cầu giữa hai phương thức, hệ thống vẫn cần dùng đúng một giao dịch SMS OTP để xác minh danh tính ở bước kích hoạt, trước khi Smart OTP chính thức thay thế SMS OTP cho mọi giao dịch sau đó. Thiết kế phải làm rõ ranh giới này để người dùng không nhầm lẫn phương thức nào đang bảo vệ giao dịch của họ tại từng thời điểm.
Vai trò của tôi
Tôi thiết kế luồng kích hoạt Smart OTP: xác thực bằng SMS OTP một lần, tạo mã PIN 6 số, xác nhận lại PIN, và màn hình xác nhận kích hoạt thành công để người dùng biết chắc từ thời điểm nào Smart OTP đã thay thế SMS OTP.
Tôi thiết kế các luồng xác thực lại sau kích hoạt — PIN và sinh trắc học — cùng toàn bộ trạng thái lỗi đi kèm: sai PIN, nhập sai PIN quá số lần cho phép, hết phiên đăng nhập, hết phiên giao dịch, mất kết nối mạng.
Tôi viết microcopy cảnh báo ngay tại bước tạo PIN để ngăn người dùng chọn mã dễ đoán, và chuẩn bị UI state sẵn sàng cho developer.
Tôi phối hợp với đội phát triển và chuyên gia bảo mật để đảm bảo luồng và microcopy khớp yêu cầu xác thực theo Thông tư 50.
Quyết định thiết kế
Người dùng có thể chọn mã PIN dễ đoán (dãy số liên tiếp hoặc lặp lại) vì đây là bước tạo mới, chưa thành thói quen. Tôi cân nhắc giữa chặn cứng các mã yếu và chỉ cảnh báo, rồi chọn cảnh báo trực tiếp ngay tại bước nhập — liệt kê rõ hai dạng PIN không nên chọn — thay vì báo lỗi sau khi submit. Đánh đổi: không chặn được 100% người dùng vẫn chọn PIN yếu nếu họ bỏ qua cảnh báo.
Nhập sai PIN nhiều lần liên tiếp là dấu hiệu rủi ro dò mã. Phương án tự mở khoá qua OTP sẽ tiện hơn nhưng làm giảm rào cản bảo mật; phương án khoá tài khoản và bắt liên hệ tổng đài hoặc chi nhánh giữ đúng chuẩn ngân hàng nhưng tạo gián đoạn thật cho người dùng. Tôi chọn khoá tài khoản, chấp nhận đánh đổi về sự tiện lợi để giữ mức an toàn ngân hàng yêu cầu.
Giao dịch có thời hạn phiên theo yêu cầu bảo mật, nên khi hết hạn tôi cần phân biệt rõ đây là giới hạn thời gian, không phải lỗi hệ thống. Tôi chọn thông báo trực tiếp "phiên giao dịch hết hạn, vui lòng thử lại" thay vì một thông báo lỗi chung chung, để người dùng hiểu cần lặp lại thao tác chứ không phải có gì hỏng.
Xác thực lại cần vừa nhanh vừa có phương án dự phòng khi sinh trắc học không dùng được. Tôi đặt sinh trắc học làm lối tắt nổi bật thay vì bắt buộc, đồng thời giữ "Quên mã PIN" luôn hiển thị cùng bàn phím số. Đánh đổi: thêm một điểm chạm trên màn hình, đổi lại người dùng không bao giờ bị kẹt không lối thoát.
Kết quả
- Thiết kế đầy đủ luồng kích hoạt, xác thực lại và toàn bộ tập trạng thái lỗi (sai PIN, khoá tài khoản, hết phiên, mất kết nối) cho Smart OTP.
- Căn chỉnh quyết định UX/UI với yêu cầu tuân thủ và quy trình bảo mật theo Thông tư 50.
- Phối hợp với developer và stakeholder bảo mật để giữ luồng sử dụng khả thi về mặt kỹ thuật.
Kết quả là một trải nghiệm xác thực ngân hàng được thiết kế để tạo cảm giác hiệu quả, đáng tin cậy và thực tế cho triển khai production.