Cải thiện luồng đăng ký tài khoản ZaloPay trong Zalo

The Scope

Trong dự án này, tụi mình (squad team) cùng hỗ trợ lẫn nhau để tìm ra giải pháp cho từng khâu. Mình có trách nhiệm chính về mặt UI, đảm bảo UI hoàn thiện từ visual concept đến khi chính thức launch.

The Background

ZaloPay in Zalo - gọi tắt là ZPI - là một phiên bản khác của ZaloPay bên trong Zalo thông qua web-view. Với ZPI, người dùng Zalo có thể truy cập ZaloPay với đầy đủ các tính năng như phiên bản ZaloPay App.

The Problem

ZaloPay có rất nhiều chương trình khuyến mãi cho user trên Zalo tuy nhiên tỉ lệ chuyển đổi từ New User thành Paid User không cao. Thử kiểm tra lại quá trình user tiếp cận ZaloPay từ Zalo xem như thế nào nhé. Flow thiết kế cũ trông như thế này:

Ghi chú: Flow trên sử dụng tính năng Nạp tiền điện thoại làm ví dụ. Trên thực tế, user Zalo có thể tiếp cận ZaloPay từ nhiều tính năng khác trên Zalo như: Chuyển tiền, Thanh toán hoá đơn từ Tab menu Khám Phá trên Zalo.

Điều này có nghĩa là khi user tò mò muốn nạp tiền điện thoại thì phải trải qua các bước:

Nhập số điện thoại
Xác thực mã OTP
Tạo mật khẩu thanh toán
Liên kết tài khoản ngân hàng

Vấn đề ở đây là:

1. User phải tự nhập SĐT khi vào màn hình Nạp tiền điện thoại.

2. Khi bấm xác nhận thanh toán user tiếp tục phải khai báo SĐT một lần nữa - việc này thật sự không cần thiết vì user đã nhập SĐT trước đó rồi.

3. Màn hình chọn mệnh giá thẻ, màn hình xác nhận giao dịch lặp lại đến 3 lần - đồng nghĩa với việc user phải chọn lại cùng một vị trí đến 3 lần.

Tất cả những vấn đề trên đang cho thấy flow cũ quá phức tạp. Ngoài ra người dùng mới sử dụng ZaloPay-in-Zalo có thể gặp nhiều bỡ ngỡ và chưa biết khái niệm đăng ký tài khoản ZaloPay trên ứng dụng Zalo, dẫn đến hiểu nhầm, thao tác sai và có ấn tượng lần đầu sử dụng ZaloPay không tốt.

The Challenge

Cải thiện luồng đăng ký tài khoản ZaloPay trong Zalo nhằm mục đích tăng tỉ lệ chuyển đổi New User thành Paid User.
Cải thiện trải nghiệm người dùng, qua đó tăng mức độ hài lòng khi sử dụng ZaloPay của user.

Research Findings

Đầu tiên tụi mình tiến hành phỏng vấn người dùng để xác định xác vấn đề hiện tại và có kết quả như sau:

1. User có cảm thấy flow cũ quá dài và mất động lực hay không?

100% new users đánh giá độ dài flow cũ không dài, nhanh gọn và việc thực hiện cả 1 quy trình từ nhập số điện thoại đến khi liên kết tài khoản ngân hàng khi bắt đầu sử dụng 1 ví điện tử mới là hoàn toàn hợp lí. Tuy nhiên ở tình huống Nạp tiền điện thoại, 65% user hiểu sai việc nhập SĐT là để Nạp tiền ĐT thay vì tạo tài khoản ZaloPay.
• 75% users đánh giá cao động lực từ promotions/gifts để hoàn thành flow. Tuy nhiên, thiết kế hiện tại vẫn chưa thể hiện được gift/promotion benefit làm động lực cho new users.

Một phiên phỏng vấn tại ZaloPay

2. Users có hiểu đúng mục đích việc mở tài khoản để sử dụng dịch vụ ZaloPay?

90% new users hiểu đúng việc phải tạo tài khoản và liên kết ngân hàng để sử dụng dịch vụ của ZaloPay.
75% users hiểu sai thành “Nâng cấp tài khoản” - bổ sung thông tin (SĐT / Số tài khoản ngân hàng) của tài khoản đã sẵn có (Zalo).

3. 80% người dùng thích Đăng ký tài khoản trước và sau đó bắt đầu trải nghiệm vì những lý do sau:

Được giới thiệu unique-selling-point của ZaloPay-in-Zalo và các dịch vụ của ZaloPay cung cấp thông tin hữu ích và tạo niềm tin với người dùng mới.
Giới thiệu người dùng bằng các walkthrough, tooltips giúp người dùng cảm thấy có động lực hơn, dễ hiểu về dịch vụ của ZaloPay và biết được các ưu đãi đang có ZaloPay dành cho người dùng mới.

Ideation

Điều chỉnh lại flow, thay vì để user tiếp cận dịch vụ (Nạp tiền điện thoại, Chuyển tiền, Mua thẻ...) trước thì tụi mình sẽ thêm một màn hình để giới thiệu về ZaloPay cho user trước.

Moodboard

Để chuẩn bị UI hoàn chỉnh, mình đã thực hiện một số research về Visual để thống nhất với team về phong cách thiết kế.

Moodboard

Việc thiết kế UI trên webview luôn gặp phải một vấn đề: bị dính thanh Navigation Bar của app đó, tụi mình không thể bỏ đi, không thể đổi màu sắc hay thay đổi bất cứ element nào trên đó vì vậy yêu cầu đặt ra là phải tìm kiếm giải pháp để tạo ra một thiết kế liền mạch nhất và không làm "tức mắt" người dùng. Vì vậy tụi mình thiết kế 2 giải pháp:

Option 1: Thiết kế có background liền mạch với màu sắc đang sử dụng của Zalo.
Option 2: Sử dụng Bottom Sheet. Ở option này, thông qua nền background được làm mờ, user vẫn aware được nội dung user đã truy cập trước đó một cách rõ ràng hơn (màn hình Nạp tiền điện thoại).

Và đây là UI Final của tụi mình:

Next steps

Tụi mình sẽ roll-out giải pháp này từng phần để theo dõi và thực hiện A/B testing để tiếp tục đánh giá mức độ hiệu quả của giải pháp.

Cám ơn các bạn đã xem!