Đối chiếu bản clone HTML với tài liệu wireframe của dự án — phân theo 4 tab của app
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Tại màn hình đăng nhập, nhập số điện thoại rồi trượt xác minh | Hiện đủ trạng thái sau khi nhập số điện thoại: Vui lòng trượt để xác minh và Đã xác minh. | Thiếu trạng thái xác minh sau khi nhập số điện thoại. | ![]() ![]() |
Fail |
| 2 | Tại màn đăng nhập: nhập số điện thoại, tích Thông tin tiếp thị nhưng KHÔNG tích ô "Tôi xác nhận rằng tôi đã đọc và chấp nhận Điều khoản sử dụng và Chính sách bảo mật" rồi bấm TIẾP TỤC | Thiếu — phải hiện thông báo nhắc "Vui lòng kiểm tra để đồng ý với các điều khoản", không cho đi tiếp. | Thiếu màn/thông báo nhắc tích điều khoản. | ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Tại màn hình đăng nhập, nhập số điện thoại | Màn hình đăng nhập không giới hạn số điện thoại. | Đăng nhập bằng số điện thoại đang bị giới hạn số. | ![]() |
Fail |
| 2 | Nhập sai OTP quá số lần cho phép | Đăng nhập OTP có tối đa 4 lần nhập: nếu lần thứ 4 vẫn sai thì khóa tài khoản trong 10 phút. | Màn hình báo Tài khoản bị khóa trong 10 phút. | ![]() |
Fail |
| 3 | Trong lúc báo tài khoản bị khóa 10 phút, nhập số điện thoại khác | Phải xử lý đúng theo số mới, không dùng lại trạng thái khóa/OTP của số trước. | Thông báo Không gửi được OTP. Thử lại. | ![]() |
Fail |
| 4 | Trong lúc báo tài khoản bị khóa 10 phút, nhập số điện thoại khác rồi bấm TIẾP TỤC | Phải chuyển sang màn nhập OTP của số điện thoại mới. | Màn hình đứng, không chuyển sang màn nhập OTP. |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Nhấn chọn Delivery | Hiện màn Chọn địa chỉ giao hàng với danh sách địa chỉ đã lưu và nút Thêm địa chỉ. | Thiếu luồng/màn chọn địa chỉ giao hàng theo trạng thái Login. | ![]() |
Fail |
| 2 | Tại màn chọn địa chỉ giao hàng, nhấn Thêm địa chỉ | Hiện màn Địa chỉ chi tiết để thêm địa chỉ mới, có bản đồ, tên, liên hệ, địa chỉ chi tiết và nút lưu. | Thiếu màn thêm địa chỉ giao hàng. | ![]() |
Fail |
| 3 | Tại màn địa chỉ chi tiết, nhấn icon tìm kiếm | Hiện màn Tìm kiếm địa chỉ với ô nhập tìm kiếm. | Thiếu màn tìm kiếm địa chỉ. | ![]() |
Fail |
| 4 | Tại trang địa chỉ chi tiết, nhấn vào mục Liên hệ | Hiện màn Mã vùng để chọn mã quốc gia/khu vực. | Thiếu màn chọn mã vùng khi nhập liên hệ. | ![]() |
Fail |
| 5 | Tại màn chọn địa chỉ giao hàng, nhấn icon chỉnh sửa | Hiện thông tin địa chỉ chi tiết để chỉnh sửa; trong màn này nhấn icon tìm kiếm vẫn mở Tìm kiếm địa chỉ. | Thiếu màn chỉnh sửa địa chỉ và trạng thái tìm kiếm trong luồng chỉnh sửa. | ![]() ![]() |
Fail |
| 6 | Tại màn chỉnh sửa địa chỉ, nhấn Xóa | Hiện popup xác nhận Xóa địa chỉ với nút Đóng và Xác nhận. | Thiếu popup xác nhận xóa địa chỉ. | ![]() |
Fail |
| 7 | Tại màn chọn địa chỉ giao hàng, vuốt reload trang | Hiện trạng thái pull-to-refresh/reload trên danh sách địa chỉ. | Thiếu trạng thái reload danh sách địa chỉ giao hàng. | ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Ở Trang chủ, nhấn vào icon đại diện | Khi nhấn vào icon đại diện phải hiện trang Tôi. | Đang điều hướng sai sang trang menu/đồ uống. | Fail | |
| 2 | Ở Trang chủ, nhấn banner | Khi nhấn banner phải điều hướng sang menu. | Banner tĩnh, không mở được đến trang menu. | ![]() |
Fail |
| 3 | Ở Trang chủ, nhấn Delivery | Khi nhấn Delivery phải hiện trang Chọn địa chỉ giao hàng. | Đang điều hướng sang trang menu đồ uống. | ![]() |
Fail |
| 4 | Ở Trang chủ, nhấn TEA LEAVES | Khi nhấn phải điều hướng sang trang Tea Leaves của tôi. | Không điều hướng sang trang khác. | ![]() |
Fail |
| 5 | Ở Trang chủ, nhấn VOUCHER | Khi nhấn phải điều hướng sang trang Voucher của tôi. | Không điều hướng sang trang khác. | ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Menu Tự đến lấy → nhấn CHAGEE NGUYỄN GIA TRÍ · 3.29km → màn Chọn cửa hàng lấy hàng → nhấn thanh tìm kiếm | Nhấn thanh tìm kiếm phải chuyển sang màn Tìm kiếm cửa hàng. | Không chuyển sang màn Tìm kiếm cửa hàng. | ![]() |
Fail |
| 2 | Ở màn Tìm kiếm cửa hàng (vào từ cả tab Cửa hàng gần bạn lẫn tab Yêu thích), vuốt kéo để tải lại | Thiếu — phải có màn reload (vòng xoay) ở màn Tìm kiếm cửa hàng. | Chưa có trạng thái reload. | ![]() |
Fail |
| 3 | Màn Chọn cửa hàng lấy hàng → tab Cửa hàng gần bạn → vuốt kéo trang để tải lại | Thiếu — phải hiện trạng thái reload (vòng xoay) trên danh sách cửa hàng. | Chưa có trạng thái reload khi vuốt kéo. | ![]() |
Fail |
| 4 | Màn Chọn cửa hàng lấy hàng → tab Yêu thích → vuốt kéo trang để tải lại | Thiếu — phải hiện trạng thái reload (vòng xoay). | Chưa có trạng thái reload khi vuốt kéo ở tab Yêu thích. | ![]() |
Fail |
| 5 | Màn menu đồ uống tab Tự đến lấy → nhấn icon trái tim ở góc trái màn hình | Nhấn thì icon trái tim phải chuyển sang màu đỏ; sau đó vào tab Yêu thích ở màn Chọn cửa hàng lấy hàng phải thấy địa chỉ cửa hàng vừa thả tim. | Icon trái tim đang tĩnh, không chọn được. | Fail | |
| 6 | Chọn combo → vào chi tiết combo → tích chọn một đồ uống trong combo | Phải hiện sheet chọn biến thể (Size · Mức đá · Độ ngọt) với nút Xác nhận. | Đang hiện sheet chỉnh sửa (có thêm nút XOÁ) — sai bước. | ![]() ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Menu Tự đến lấy → Kiểm tra lại / Thanh toán → màn Đơn hàng của bạn → nhấn link ở mục Thời gian nhận món | Phải hiện sheet Chọn thời gian nhận hàng (có tuỳ chọn Sớm nhất). | Đang điều hướng sang màn Chọn cửa hàng giao hàng — sai màn. | ![]() |
Fail |
| 2 | Màn Đơn hàng của bạn (Tự đến lấy) → nhấn mục địa chỉ CHAGEE NGUYỄN GIA TRÍ · 3.31km › | Phải hiện màn Chọn cửa hàng lấy hàng. | Đang hiện màn Chọn cửa hàng giao hàng — sai luồng, đây là luồng Tự đến lấy. | Fail | |
| 3 | Màn Đơn hàng của bạn (Tự đến lấy) → nhấn mục Ghi chú đơn hàng | Thiếu — nhấn phải hiện sheet Ghi chú đơn hàng (tùy chọn): ô nhập tối đa 500 ký tự + nút GỬI. | Mục ghi chú đơn hàng đang tĩnh, nhấn không có phản hồi. | ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Tại màn Voucher của tôi, nhấn icon đồng hồ góc phải | Hiện màn Lịch sử Voucher, tab Không khả dụng có danh sách voucher không khả dụng. | Thiếu màn lịch sử voucher. | ![]() |
Fail |
| 2 | Tại màn Lịch sử Voucher, vuốt xuống reload tab Không khả dụng | Hiện trạng thái reload trên danh sách voucher không khả dụng. | Thiếu trạng thái reload lịch sử voucher tab Không khả dụng. | ![]() |
Fail |
| 3 | Tại màn Lịch sử Voucher, chọn tab Đã sử dụng | Hiện tab Đã sử dụng với empty state Không có phiếu giảm giá. | Thiếu tab Đã sử dụng trong lịch sử voucher. | ![]() |
Fail |
| 4 | Tại tab Đã sử dụng, vuốt xuống reload | Hiện trạng thái reload trên empty state của tab Đã sử dụng. | Thiếu trạng thái reload lịch sử voucher tab Đã sử dụng. | ![]() |
Fail |
| 5 | Vào tab Tôi → chọn Tea Leaves → màn TEA LEAVES CỦA TÔI → chọn xem chi tiết điểm | Hiện màn Điểm sắp hết hạn, tab Khả dụng: ô Điểm khả dụng 80, dòng "Không có điểm nào sẽ hết hạn trong 6 tháng tới", nút Đổi điểm ở chân màn. | Thiếu màn Điểm sắp hết hạn (tab Khả dụng). | ![]() |
|
| 6 | Ở màn Điểm sắp hết hạn → chọn tab Đã hết hạn | Hiện tab Đã hết hạn: ô Điểm đã hết hạn 0, empty state "Chưa có điểm hết hạn.", nút Đổi điểm. | Thiếu tab Đã hết hạn. | ![]() |
|
| 7 | Ở màn TEA LEAVES CỦA TÔI → nhấn Lịch sử Tea Leaves | Hiện màn Lịch sử Tea Leaves: dòng Đã đặt hàng · nhãn Trên ứng dụng · +80, kèm ngày giờ và Số dư Tea Leaves 80. | Thiếu màn Lịch sử Tea Leaves. | ![]() |
|
| 8 | Ở màn TEA LEAVES CỦA TÔI → nhấn Lịch sử quy đổi | Hiện màn Lịch sử quy đổi với empty state "KHÔNG CÓ LỊCH SỬ QUY ĐỔI." — Bạn chưa có hoạt động đổi điểm nào. | Thiếu màn Lịch sử quy đổi. | ![]() |
|
| 9 | Ở màn TEA LEAVES CỦA TÔI → nhấn dấu ⓘ góc phải trên | Hiện popup "Tận hưởng hành trình tích lũy điểm thưởng cùng CHAGEE!" — nội dung chương trình CHAGEE Tea Leaves Rewards (cách thu thập, cách tính điểm…), có nút ✕ đóng. | Thiếu popup giới thiệu Tea Leaves Rewards. | ![]() |
|
| 10 | Ở màn TEA LEAVES CỦA TÔI → chọn 1 phiếu để xem chi tiết | Hiện màn Chi tiết phiếu (vd FREE UPSIZE): ảnh phiếu, Giới hạn quy đổi 99, Điểm cần để đổi 200, mục Thông tin chi tiết sản phẩm 6 điều khoản, nút chân màn "TEA LEAVES KHÔNG ĐỦ" ở trạng thái mờ khi chưa đủ điểm. | Thiếu màn Chi tiết phiếu quy đổi. | ![]() |
|
| 11 | Tab Tôi → nhấn icon ảnh đại diện → màn Cá nhân → nhấn mục Số điện thoại | Hiện popup "Xác nhận thay đổi số điện thoại": "Khi số điện thoại đã được thay đổi, số điện thoại hiện tại +84 862****26 sẽ không được sử dụng để đăng nhập." — 2 nút KHÔNG / CÓ. | Thiếu popup xác nhận thay đổi số điện thoại. | ![]() |
|
| 12 | Ở popup trên, bấm CÓ | Hiện màn Xác minh số điện thoại của tài khoản đăng nhập hiện tại: hiển thị số 862****26, ô Điền mã, link Nhận mã xác minh, nút Xác nhận (mờ khi chưa nhập). | Thiếu màn xác minh số điện thoại hiện tại. | ![]() |
|
| 13 | Ở màn xác minh, bấm Nhận mã xác minh | Hiện popup captcha trượt — "Vui lòng trượt để xác minh", có nút ✕ đóng. | Thiếu popup captcha trượt. | ![]() |
|
| 14 | Sau khi trượt captcha thành công | Màn nhập mã OTP có đếm ngược 48S, bàn phím số và gợi ý mã lấy từ tin nhắn. | Thiếu màn nhập OTP kèm đếm ngược khi đổi số điện thoại. | ![]() |
|
| 15 | Nhập đúng mã OTP của số hiện tại | Hiện sheet "Bạn có thể liên kết một số điện thoại mới": +84 · ô Số điện thoại · ô Điền mã · link Nhận mã xác minh · nút Xác nhận · tick "Tôi đồng ý nhận tin nhắn này" kèm dòng điều khoản SMS. | Thiếu màn liên kết số điện thoại mới. | ![]() |
|
| 16 | Ở màn Cá nhân, nhấn mục Sinh nhật khi chưa chọn ngày | Hiện sheet Sinh nhật với con lăn chọn năm / tháng / ngày và nút GỬI; dòng Sinh nhật hiển thị cảnh báo đỏ "Không thể thay đổi sau khi chọn". | Thiếu sheet chọn sinh nhật kèm cảnh báo không thể đổi lại. | ![]() |
|
| 17 | Tab Tôi → nhấn thẻ hạng CHA Seeker → nhấn icon ⓘ ở góc trên cùng bên phải | Hiện popup Quy định hạng thành viên — chương trình CHAGEE Rewards: 4 hạng theo số CUPs (CHA Seeker 0–<10 · CHA Explorer 10–<40 · CHA Pioneer 40–<80 · CHA Master ≥80), quá trình thăng hạng và hiệu lực thành viên. | Thiếu popup Quy định hạng thành viên. | ![]() ![]() |
| STT | Thao tác | YC | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Tại màn Voucher của tôi, nhấn icon đồng hồ góc phải | Khi nhấn phải điều hướng sang trang Lịch sử Voucher. | Không điều hướng sang trang khác, chỉ hiện thông báo Lịch sử voucher (đang cập nhật). | ![]() |
Fail |
| 2 | Màn Cá nhân → mục Sinh nhật khi ngày sinh đã được cập nhật | Khi ngày sinh nhật đã cập nhật thì phải khóa lại, không cho chỉnh sửa (đúng như cảnh báo "Không thể thay đổi sau khi chọn"). | Sinh nhật đã được cập nhật nhưng vẫn đổi được ngày. | ||
| 3 | Màn Cá nhân → nhấn mục Khu vực đăng ký: Việt Nam | Khi nhấn không hiện mục để chọn, không cho chỉnh sửa khu vực. | Nhấn vào điều chỉnh được khu vực. |
| # | Thao tác | Màn mong đợi | Clone | Ảnh app thật (chưa đăng nhập) | Status |
|---|---|---|---|---|---|
| 1 | Truy cập vào ứng dụng | Splash quảng cáo key visual chiến dịch, đếm ngược “Bỏ qua Ns” | ✕ chưa có | ![]() |
Fail |
| 2 | Sau khi hết số giây, hiện màn hình trang chủ | Popup quảng cáo lớp 2 đè lên Trang chủ | ✕ chưa có | ![]() |
Fail |
| 3 | Thao tác kéo thả (reload) trang chủ | Kéo xuống làm mới pull-to-refresh | ✕ chưa có | ![]() |
Fail |
| 4 | Nhấn icon ảnh đại diện trên Trang chủ | Gợi ý đăng nhập hiện đúng sheet yêu cầu đăng nhập khi guest nhấn avatar. |
✕ chưa có | ![]() ![]() |
Fail |
| 5 | Nhấn icon Việt Nam trên Trang chủ | Sheet chọn quốc gia hiện danh sách quốc gia và trạng thái Việt Nam đang được chọn. |
✕ chưa có | ![]() |
Fail |
| # | Thao tác | Màn mong đợi | Clone | Ảnh màn test | Status |
|---|---|---|---|---|---|
| 1 | Từ Trang chủ chọn Calorie Calculator | Mở màn Calorie Calculator và cho thao tác bình thường: tích chọn loại trà/cup, cuộn/kéo trang để tiếp tục kiểm tra. | Màn test bị kẹt trạng thái Loading, không thao tác tích chọn hoặc kéo chuột/cuộn được. | ![]() |
Fail |
| 2 | Nhấn banner trên màn hình Trang chủ | Điều hướng sang tab Giao hàng theo app thật. | Banner đang tĩnh, không điều hướng khi nhấn. | ![]() |
Fail |
| 3 | Mở app → màn khởi động (splash quảng cáo) đang đếm ngược, chạm vào màn hình | Mục logout phải có trang khởi động khi truy cập vào ứng dụng; hết đếm ngược hoặc chạm/bỏ qua đều về Trang chủ. | Thiếu trang khởi động trong mục logout. Khi chạm lúc màn đang đếm ngược thì điều hướng thẳng sang trang đồ uống · mục Tự đến lấy, không về Trang chủ. | ![]() |
Fail |
| 4 | Tại trang Calorie Calculator, nhấn dấu mũi tên đi xuống (cạnh SELECT YOUR CUP OF TEA) | Khi nhấn dấu mũi tên thì trang phải trượt xuống phần chọn loại trà. | Mũi tên đang tĩnh, nhấn không có phản hồi, trang không trượt. | ![]() |
Fail |
| 5 | Tích chọn 1 nhóm đồ uống → tích xem chi tiết nhóm đồ uống → gõ vào thanh tìm kiếm trong trang | Khi nhấn/nhập thông tin vào thanh tìm kiếm thì phải lọc được danh sách món trong nhóm. | Trang có thanh tìm kiếm nhưng đang tĩnh, nhập vào không lọc được. | Fail | |
| 6 | Vào tab Calorie Calculator, sau đó nhấn dấu mũi tên thoát ra ngoài | Dù đang ở trang nào, nhấn mũi tên đều phải back về được Trang chủ. | Thoát ra Trang chủ không thành công, điều hướng lộn xộn. | Fail |
| # | Tab con | Trạng thái | Clone | Ảnh app thật | Status |
|---|---|---|---|---|---|
| 1 | Tất cả | Gợi ý đăng nhập — bằng email sheet “Nhập địa chỉ email của bạn” | ✕ chưa có | ![]() |
Fail |
| 2 | Thoát gợi ý → danh sách rỗng “KHÔNG CÓ ĐƠN HÀNG.” + nút Đặt ngay | ✕ chưa có | ![]() |
Fail | |
| 3 | Trên ứng dụng | Gợi ý đăng nhập — bằng SĐT sheet CHÀO MỪNG | ✕ chưa có | ![]() |
Fail |
| 4 | Gợi ý đăng nhập — bằng email | ✕ chưa có | ![]() |
Fail | |
| 5 | Thoát gợi ý → danh sách rỗng | ✕ chưa có | ![]() |
Fail | |
| 6 | Tại cửa hàng | Gợi ý đăng nhập — bằng SĐT | ✕ chưa có | ![]() |
Fail |
| 7 | Gợi ý đăng nhập — bằng email | ✕ chưa có | ![]() |
Fail | |
| 8 | Thoát gợi ý → danh sách rỗng | ✕ chưa có | ![]() |
Fail | |
| 9 | Khác | Gợi ý đăng nhập — bằng SĐT | ✕ chưa có | ![]() |
Fail |
| 10 | Gợi ý đăng nhập — bằng email | ✕ chưa có | ![]() |
Fail | |
| 11 | Thoát gợi ý → danh sách rỗng | ✕ chưa có | ![]() |
Fail |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| STT | Thao tác | Màn mong đợi | Clone | Ảnh app thật (chưa đăng nhập) | Status |
|---|---|---|---|---|---|
| 1 | Nhấn icon quốc kỳ Việt Nam | Màn/sheet chọn quốc gia hoặc ngôn ngữ đúng theo app thật. | Tĩnh, không hiện danh sách chọn quốc gia. | ![]() |
Fail |
| 2 | Nhấn icon đại diện đăng nhập | Hiện đủ 2 biến thể gợi ý đăng nhập: bằng email và bằng SĐT. | Thiếu email/SĐT theo từng entry; clone dùng một login gate chung, không tách state theo entry. | ![]() ![]() |
Fail |
| 3 | Nhấn cài đặt | Guest được gợi ý đăng nhập trước khi vào cài đặt, có đủ biến thể email/SĐT. | Thiếu màn gợi ý đăng nhập riêng cho cài đặt. | ![]() ![]() |
Fail |
| 4 | Nhấn thông báo | Hiện gợi ý đăng nhập riêng cho thông báo, có đủ biến thể email/SĐT. | Thiếu màn gợi ý đăng nhập riêng cho thông báo. | ![]() ![]() |
Fail |
| 5 | Nhấn FRIEND | Hiện gợi ý đăng nhập đúng flow app thật; không tự che toàn bộ tab Tôi khi vừa mở. | Thiếu màn gợi ý đăng nhập riêng; clone đang bật login gate chung. | ![]() ![]() |
Fail |
| 6 | Nhấn TEA LEAVES | Hiện gợi ý đăng nhập đúng flow app thật, có đủ biến thể email/SĐT. | Thiếu màn gợi ý đăng nhập riêng cho Tea Leaves. | ![]() ![]() |
Fail |
| 7 | Nhấn VOUCHER | Hiện gợi ý đăng nhập đúng flow app thật, có đủ biến thể email/SĐT. | Thiếu màn gợi ý đăng nhập riêng cho Voucher. | ![]() ![]() |
Fail |
| 8 | Khi thực hiện thao tác đăng nhập, nhấn Điều khoản sử dụng | Hiện màn Điều khoản sử dụng đúng theo app thật. | Thiếu màn Điều khoản sử dụng trong luồng đăng nhập khi chưa đăng nhập. | ![]() |
Fail |
| 9 | Khi thực hiện thao tác đăng nhập, nhấn Chính sách bảo mật | Hiện màn Chính sách bảo mật đúng theo app thật. | Thiếu màn Chính sách bảo mật trong luồng đăng nhập khi chưa đăng nhập. | ![]() |
Fail |
| 10 | Từ bất kỳ đâu, chuyển sang tab Tôi khi chưa đăng nhập | Màn hình đầu tiên hiện ra phải là gợi ý đăng nhập, đủ 2 biến thể: sheet CHÀO MỪNG (SĐT) và sheet Nhập địa chỉ email của bạn. | Thiếu — vào tab Tôi không tự hiện gợi ý đăng nhập làm màn đầu tiên. | ![]() ![]() |
Fail |
| STT | Thao tác | YC | Clone | Ảnh app thật (chưa đăng nhập) | Status |
|---|---|---|---|---|---|
| 1 | Nhấn banner trong màn Tôi | Khi nhấn banner ở dưới phải hiện trang đồ uống. | Lỗi điều hướng: nhấn banner ở dưới điều hướng sang gợi ý đăng nhập. | Fail | |
| 2 | Nhấn Những câu hỏi thường gặp | Nhấn Những câu hỏi thường gặp phải hiện trang Những câu hỏi thường gặp. | Nhấn Câu hỏi thường gặp nhưng điều hướng vào gợi ý đăng nhập. | ![]() |
Fail |
| 3 | Test mục đăng nhập | Không giới hạn số khi test đăng nhập. | Mục đăng nhập khi test đang giới hạn số. | ![]() |
Fail |
| 4 | Ở tab Tôi khi chưa đăng nhập, nhấn vào Cài đặt (icon bánh răng) | Khi nhấn phải hiện gợi ý đăng nhập: sheet CHÀO MỪNG (SĐT) và biến thể Nhập địa chỉ email của bạn. | Nhấn vào Cài đặt lại hiện màn hình đăng xuất trong khi đang ở trạng thái chưa đăng nhập. | ![]() ![]() |
Fail |