Báo cáo test bản clone CHAGEE

1 · Trang chủ - UI/UX không khớp

1a · Icon VN / chọn ngôn ngữ trên Trang chủ

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Nhấn icon VN trên Trang chủ			Không khớpGhi chú UI/UX chuẩn: CHAGEE hiển thị sheet ngôn ngữ dạng bottom sheet nằm trong khung mobile, chiều rộng bằng màn app, bo góc phía trên và lớp dim phủ đúng vùng nội dung. App test bung sheet theo chiều ngang desktop nên sai tỷ lệ mobile, sai vị trí neo dưới, sai chiều rộng, khoảng cách mép trái/phải và cảm giác modal. Cần đối chiếu lại kích thước sheet, bán kính bo góc, màu nền, độ mờ overlay, cỡ chữ option và khoảng cách giữa các lựa chọn theo CHAGEE.

1b · Voucher trên Trang chủ khi đã đăng nhập

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Màn Voucher của tôi khi đã đăng nhập			Không khớpGhi chú UI/UX chuẩn: CHAGEE có empty state đầy đủ gồm icon voucher đặt giữa màn, tiêu đề "KHÔNG CÓ PHIẾU GIẢM GIÁ." chữ xanh navy đậm, mô tả màu xám bên dưới và khoảng cách dọc cân đối. App test chỉ hiện -KẾT THÚC-, thiếu icon, thiếu title/mô tả empty state, sai hierarchy thị giác. Ô Thêm Voucher của app test dùng viền nét đứt và bo góc lớn hơn, trong khi CHAGEE dùng khung mảnh sáng hơn, chiều cao thấp hơn, căn text/icon theo cùng trục ngang.
2	Màn Thêm Voucher			Không khớpGhi chú UI/UX chuẩn: CHAGEE dùng ô nhập nền xám nhạt toàn hàng, không viền nổi, placeholder Nhập mã ưu đãi tại đây... màu xám nhạt và icon scan nằm sát phải trong ô. Nút chính là Đổi quà, chữ thường theo mẫu và trạng thái disabled có nền xám nhạt. App test dùng input viền bo góc, placeholder khác, nút ÁP DỤNG viết hoa, thiếu icon scan và thừa mô tả/mã demo. Sai cả nội dung, cỡ chữ, khoảng cách giữa input-nút và phong cách control.

2 · Màn hình đăng nhập - UI/UX không khớp

2a · Đối chiếu sheet nhập mã bảo mật

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Sheet nhập mã bảo mật			Không khớpGhi chú UI/UX chuẩn: CHAGEE hiển thị OTP bằng bottom sheet đúng tỷ lệ mobile, bo góc phía trên, padding trái/phải đồng nhất và nội dung nằm gọn trong vùng an toàn. Cụm OTP dùng 6 ký tự lớn, khoảng cách đều, màu xanh navy và căn giữa theo trục sheet. App test bị giãn theo desktop, chiều rộng sheet sai, khoảng trắng dư nhiều, cỡ chữ/line-height OTP và vị trí title không theo mẫu CHAGEE.
2	Trạng thái lỗi mã xác minh			Không khớpGhi chú UI/UX chuẩn: CHAGEE phản hồi lỗi bằng toast Lỗi mã xác minh nổi phía trên sheet, nền/toast có vị trí rõ và không làm đổi style các ô OTP. OTP vẫn giữ màu xanh navy, không có underline đỏ. App test đổi số OTP và gạch chân sang đỏ, thêm text lỗi trong sheet nên sai cơ chế feedback, sai màu trạng thái, sai khoảng cách vertical và làm bố cục sheet nặng hơn bản CHAGEE.

2b · Đối chiếu giao diện gợi ý đăng nhập

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Sheet gợi ý đăng nhập bằng SĐT			Không khớpGhi chú UI/UX chuẩn: CHAGEE dùng bottom sheet cao, phủ dim toàn màn, tiêu đề đậm màu xanh navy, form có nhịp spacing rõ giữa title, input, nút và cụm điều khoản. App test sai chiều cao sheet, sai padding trên/dưới, cỡ chữ title/input/checkbox chưa khớp, icon và checkbox không cùng tỷ lệ với CHAGEE. Cần chỉnh lại độ bo góc sheet, màu overlay, font weight, line-height, khoảng cách giữa các field và vị trí nút theo ảnh gốc.
2	Sheet gợi ý đăng nhập bằng email			Không khớpGhi chú UI/UX chuẩn: CHAGEE giữ cùng system visual cho sheet email: title/mô tả/input/nút/cụm điều khoản có font size, font weight, màu chữ và padding đồng bộ. App test lệch cỡ chữ, line-height, vị trí input, chiều cao nút và khoảng cách giữa các khối; màu chữ xám/navy chưa đúng độ tương phản CHAGEE. Cần test theo từng layer: overlay, sheet, heading, field, primary button, checkbox và legal text.

3 · Menu và chọn cửa hàng - UI/UX không khớp

3a · Đối chiếu menu giao hàng và màn chọn cửa hàng

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Màn menu tab Giao hàng			Không khớpGhi chú UI/UX chuẩn: CHAGEE đang active tab Giao hàng với gạch đỏ ngắn nằm chính giữa dưới label, header địa chỉ có icon pin, text đậm và cửa hàng CHAGEE TÂN SƠN NHÌ kèm 4.01km. App test active sai tab Tự đến lấy, dữ liệu cửa hàng/khoảng cách khác và phần tab/header lệch hierarchy. Sidebar danh mục có cỡ icon, cỡ chữ, line-height và khoảng cách item khác; vùng product card bị cắt/nén khác CHAGEE, ảnh banner và card combo không cùng tỷ lệ.
2	Màn Chọn cửa hàng lấy hàng - tab cửa hàng gần bạn			Không khớpGhi chú UI/UX chuẩn: CHAGEE hiển thị list card cửa hàng với ảnh thật ở bên phải, viền vàng mảnh cho item đầu, padding trong card rộng và typography nhất quán: tên cửa hàng đậm, địa chỉ lớn hơn dòng phụ, khoảng cách km đặt dưới cùng. App test dùng dữ liệu cửa hàng khác, ảnh bị lỗi/không tải, thời gian 26-28 phút thay vì 0 Phút, button disabled và thumbnail có màu/tỷ lệ sai. Tab underline, search box, card spacing và khoảng cách giữa các card chưa theo CHAGEE.
3	Màn Chọn cửa hàng lấy hàng - tab yêu thích			Không khớpGhi chú UI/UX chuẩn: CHAGEE dùng underline active ngắn, đúng dưới chữ Yêu thích, màu đỏ mảnh và tab text có weight vừa. Empty state của CHAGEE có icon lớn, đặt thấp hơn gần trung tâm vùng nội dung, title chữ navy đậm và mô tả xám căn giữa. App test kéo underline dài gần hết nửa tab, icon nhỏ, khoảng cách từ tab đến empty state ngắn hơn, title/mô tả chưa đúng cỡ chữ và line-height.
4	Màn Chọn cửa hàng giao hàng			Không khớpGhi chú UI/UX chuẩn: CHAGEE có banner Giao đến: cao, nền sáng, icon bản đồ ở góc phải với tỷ lệ nhỏ và không hiển thị địa chỉ chi tiết trong banner. App test đặt địa chỉ dài trong banner, dùng icon pin lớn màu đỏ nên sai bố cục, sai hierarchy và làm mất khoảng trắng. Danh sách cửa hàng trong CHAGEE dùng ảnh thật, thời gian N/A Phút, button và card đúng tỷ lệ; app test ảnh lỗi/không tải, thời gian 26 phút, thumbnail tối và padding card lệch.

4 · Tab Đơn hàng - UI/UX không khớp

4a · Áp dụng cho tất cả màn hình trong tab Đơn hàng

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Tab Đơn hàng - trạng thái không có đơn hàng			Không khớpGhi chú UI/UX chuẩn: áp dụng cho tất cả màn hình trong tab Đơn hàng. CHAGEE hiển thị full mobile, title LỊCH SỬ ĐẶT HÀNG sát mép trái với cỡ chữ lớn, tab ngang có font weight/spacing đều và đường phân cách mảnh. Empty state dùng icon lớn, rõ nét, title navy đậm, mô tả xám và nút Đặt ngay kéo gần hết chiều ngang với padding ngang nhỏ. App test nằm trong khung giả lập bo góc, title/tab bị giới hạn chiều ngang, icon empty state sai nét/tỷ lệ, khoảng cách từ empty state đến nút và chiều rộng nút chưa khớp CHAGEE.

5 · Tab Tôi - UI/UX không khớp

5a · So sánh chuẩn UI/UX màn Tab Tôi sau đăng nhập

STT	Khu vực	Hình ảnh CHAGEE	Hình ảnh clon	Kết luận
1	Tab Tôi - màn tài khoản sau đăng nhập			Không khớpGhi chú UI/UX chuẩn: phông chữ, cỡ chữ và khoảng cách chưa khớp CHAGEE. Header CHAGEE đặt avatar và chữ ĐĂNG NHẬP cùng hàng, cỡ chữ vừa, mũi tên sát chữ; app test phóng to chữ ĐĂNG NHẬP, đặt lệch lên giữa header và che nền banner. Icon VN/cài đặt/chuông trong CHAGEE có kích thước nhỏ, đều hàng và khoảng cách rõ; app test dùng icon lớn hơn, cụm icon bị dồn và lệch. Thẻ FRIEND của CHAGEE cao hơn, bo góc và nền member card rõ, icon profile nằm bên phải; app test card thấp hơn, bố cục text/nút Xem Quyền lợi của tôi lệch và thiếu tỷ lệ như ảnh gốc. Khối TÀI KHOẢN CỦA TÔI, hai ô TEA LEAVES/VOUCHER, banner khuyến mãi, dòng FAQ và bottom nav đều có spacing, cỡ chữ, căn lề và tỷ lệ ảnh khác CHAGEE.