Prep.vn: từ landing page rời rạc sang luồng tự mua khóa học
Người học vào từ quảng cáo, gặp landing page tĩnh và phải chờ Sales gọi mới mua được. Tôi dựng lại luồng từ trang sản phẩm tới thanh toán, test hai cách chọn lộ trình với 5 người dùng rồi bỏ cả hai, và để lại một design system dùng chung cho bốn kỳ thi.
Người học muốn mua nhưng không có đường để mua
Hành trình bị đứt
Hệ thống cũ lạm dụng landing page tĩnh và thiếu trang Product Detail để tìm hiểu sâu. Bắt buộc thanh toán qua Sales làm mất thời điểm người học sẵn sàng mua nhất.
Quá tải khi chọn lộ trình
Quy trình chọn lộ trình mơ hồ, thông tin không có phân cấp. Người dùng thoát ngay tại trang chủ.
Heatmap bản cũ
Người dùng quanh quẩn ở menu mà không đi vào phễu khóa học, vì điều hướng không bám theo mục tiêu của họ.
Đối thủ
Phần lớn vẫn vận hành kiểu cũ: xem quảng cáo, để lại số, chờ gọi. Cơ hội của Prep là một trải nghiệm minh bạch và cá nhân hóa.
Một luồng thẳng từ quảng cáo tới thanh toán
Tái cấu trúc menu và sitemap để bỏ các bước trung gian, dồn điều hướng vào ba nhóm chứng chỉ chính: IELTS, TOEIC, HSK.
Smart Selector là bước mới, nằm giữa trang sản phẩm và trang chi tiết, thay cho cuộc gọi tư vấn.
Hai phương án chọn lộ trình, và vì sao tôi bỏ cả hai
5 người dùng mục tiêu, 2 phiên bản chọn lộ trình: dạng Chatbot và dạng Wizard từng bước.
Trông hiện đại, nhưng tốn thời gian và phải nhập liệu quá nhiều.
Nhiều màn hình, người dùng không hình dung được cả lộ trình.
Trình độ và mục tiêu trên một màn hình, có sẵn "Lộ trình phổ biến nhất" cho người muốn quyết nhanh.
Một hệ thống cho bốn kỳ thi
Poppins
Tròn, thân thiện, hợp với người học trẻ.
Màu theo kỳ thi
Xanh thương hiệu làm chủ đạo. Mỗi kỳ thi một màu để nhận diện nhanh: IELTS xanh dương, TOEIC xanh đậm, HSK xanh lá, PrepTalk vàng.
CTA
Tương phản tối đa: màu chính trên nền trắng và ngược lại, để hành động mua luôn nổi nhất màn hình.
Component library
Button, Card khóa học, Input, Progress bar. Thêm khóa học mới không phải vẽ lại.
Design tokens
Màu và spacing quản lý bằng Variables, giữ nhất quán giữa các nền tảng.
Visual assets
Icon và minh họa riêng cho Prep, tạo bằng Generative AI rồi chỉnh tay.
Các màn hình mang luồng mua hàng
Bốn chương trình đặt ngang hàng, mỗi cái một màu. Người học chọn kỳ thi trước, mọi thứ khác đến sau.
Trình độ hiện tại bên trái, mục tiêu bên phải, lộ trình theo chặng hiện ngay bên dưới.
Trang mà hệ thống cũ không có: tính năng luyện thi, phòng thi ảo, kho đề, đủ để quyết định mà không cần gọi Sales.
Bảng so sánh theo từng quyền lợi, đẩy người học về gói Pro và tăng giá trị đơn hàng.
Giá, quyền lợi và nút mua nằm trong một thẻ. Đây là điểm vào của luồng tự thanh toán.
Tín hiệu tin cậy đặt ngay trước quyết định mua.
Để dev dựng đúng ngay lần đầu
Responsive
Thư viện Button, Card, Input chuẩn hóa, mở rộng sang khóa học mới nhanh và đồng bộ.
Nhất quán thiết kế và sản phẩm
Spacing và màu đi qua Variables, bản dev khớp với bản thiết kế.
Bàn giao cho dev
File Figma tổ chức theo luồng, ghi chú rõ logic tương tác để team Tech dựng đúng.
Kết quả
tải giảm cho đội tư vấn sau khi chuyển sang thanh toán tự động.
PDP
Người dùng có đủ dữ liệu để tự quyết định, không phải chờ cuộc gọi.
Phễu
Luồng chọn lộ trình mới kéo nhiều người đi vào trang sản phẩm thay vì thoát ở trang chủ.