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.
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.
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.
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 đề.