giftee for Business Portal

Thiết kế lại luồng thanh toán

Dựng lại luồng thanh toán ba bước vốn đang mất khách ở màn hình thanh toán.

34%
giảm tỷ lệ rời bỏ
2,1s
nhanh hơn khi thanh toán
−61%
ticket hỗ trợ
Vai trò
Trưởng nhóm Thiết kế Sản phẩm
Thời gian
6 tuần · 2024
Đội ngũ
2 designer, 4 kỹ sư, 1 PM
Nền tảng
Web · iOS

Vấn đề

Người mua đến màn hình thanh toán thường rời đi mà không hoàn tất. Bản ghi phiên cho thấy cùng một vòng lặp: lỗi xác thực xoá sạch các ô thẻ, người dùng gõ lại từ đầu rồi bỏ cuộc.

Các ticket hỗ trợ cũng chỉ về cùng một chỗ — phần lớn nhắc đến việc phải nhập lại thông tin chứ không phải giá hay sản phẩm.

Luồng ba bước cũ. Lỗi xác thực ở bước 3 trả về một biểu mẫu trống.
Luồng ba bước cũ. Lỗi xác thực ở bước 3 trả về một biểu mẫu trống.

Cách tiếp cận

Chúng tôi giữ nguyên ba bước nhưng làm cho mỗi bước có thể khôi phục: các ô được kiểm tra khi rời khỏi, lỗi không bao giờ xoá nội dung đã nhập, và biểu mẫu thẻ ghi nhớ trạng thái sau một lần thất bại.

Tóm tắt đơn hàng chuyển vào một khung luôn hiển thị, để số tiền phải trả không bao giờ nằm ngoài màn hình vào đúng lúc quyết định.

Trước — các ô thẻ bị xoá khi có lỗi.
Trước — các ô thẻ bị xoá khi có lỗi.
Sau — nội dung được giữ lại, lỗi hiển thị ngay cạnh ô nhập.
Sau — nội dung được giữ lại, lỗi hiển thị ngay cạnh ô nhập.

Kết quả

Tỷ lệ rời bỏ ở bước thanh toán giảm khoảng một phần ba trong tháng đầu tiên, và lượng hỗ trợ về việc nhập lại thông tin gần như biến mất.

Mẫu ô nhập có thể khôi phục sau đó được hai nhóm khác trong cùng sản phẩm tái sử dụng.

Tỷ lệ rời bỏ theo từng bước, tám tuần trước và sau khi phát hành.
Tỷ lệ rời bỏ theo từng bước, tám tuần trước và sau khi phát hành.

Bài học

Vấn đề chưa bao giờ nằm ở phần nhìn — mà ở việc từ chối xoá đi những gì người dùng đã nhập. Lần sau tôi sẽ xem bản ghi phiên trước khi mở Figma, chứ không phải sau.

Tôi cũng sẽ kiên quyết hơn để phần xử lý lỗi được đưa vào phạm vi ngay từ đầu. Nó bị coi là việc tô điểm, trong khi đó mới chính là vấn đề.