02 — Vai trò & mục tiêu

Thiết kế end-to-end, thống nhất bằng design system

Mình phụ trách nghiên cứu người dùng, information architecture, thiết kế toàn bộ giao diện web & mobile, và xây hệ thống component ChicGo để đảm bảo nhất quán khi sản phẩm mở rộng. Mục tiêu: rút gọn luồng đặt phòng và làm rõ khung giờ trống ngay từ màn đầu.

03 — Quy trình

04 — Design system

Bảng màu & typography

Hệ màu lấy từ chính design token trong file thiết kế Chicstay — hồng làm màu hành động chủ đạo, kết hợp nền trung tính để giao diện sạch và dễ đọc.

05 — Màn hình chính

Các màn hình chính của sản phẩm — cuộn bên trong từng khung để xem trọn cả trang.

01

Trang chủ & tìm kiếm

Tìm theo Vibe, khu vực và khung giờ ngay từ màn đầu — đưa hành động đặt phòng lên trước tiên.

chicstay.vn

↕ Cuộn trong khung để xem cả trang

02

Khám phá

Trang khám phá giúp người dùng duyệt homestay & khách sạn theo bộ lọc linh hoạt (khu vực, vibe, mức giá) và gợi ý phù hợp với nhu cầu.

chicstay.vn/kham-pha

03

Chi tiết phòng & thanh toán

Thông tin phòng đầy đủ, đánh giá minh bạch và luồng thanh toán rút gọn theo từng bước rõ ràng.

chicstay.vn/phong

06 — Kết quả

Sản phẩm đã lên sóng thực tế

02 — Nền tảng (Foundations)

Token màu & Typography

Bộ token màu lấy trực tiếp từ Figma: hồng làm màu hành động chủ đạo, kèm hệ trung tính cho chữ và nền.

03 — Component

Thư viện component tái sử dụng

Các thành phần dựng theo token, có đủ trạng thái — bản render sống bằng chính hệ màu ChicGo. Bấm thử các thành phần bên dưới nhé.

04 — Tác động

Nhất quán & đi nhanh hơn

02 — Vai trò & mục tiêu

Dẫn dắt người dùng qua từng bước một cách tự tin

Mình phụ trách thiết kế trải nghiệm & giao diện cho toàn bộ luồng onboarding: chia nhỏ quy trình thành các bước có tiến độ rõ ràng, hướng dẫn trực quan cho thao tác khó (chụp giấy tờ, quét NFC), và xử lý đầy đủ các trạng thái lỗi / chờ để người dùng không hoang mang.

03 — Quy trình

04 — Màn hình chính

Hành trình mở tài khoản

Toàn bộ hành trình mở tài khoản: từ giới thiệu, đồng ý chính sách dữ liệu, định danh eKYC bằng CCCD, đọc chip NFC, xác thực sinh trắc học khuôn mặt, đến đăng ký hồ sơ (SĐT, OTP, địa chỉ, nghề nghiệp, người giới thiệu) — mỗi trạng thái đều có phản hồi rõ ràng để người dùng không bế tắc.

01

Định danh giấy tờ (eKYC)

Chào mừngOnboarding giới thiệu giá trị, mở đầu hành trình mở tài khoản.

Đồng ý chính sách dữ liệuMinh bạch về bảo vệ dữ liệu cá nhân trước khi bắt đầu.

Tổng quan 3 bướcĐịnh danh → Đăng ký hồ sơ → Thiết lập tài khoản.

Chụp giấy tờ (eKYC)Dùng CCCD gắn chip để định danh, không dùng bản sao.

Chụp CCCD — mặt trướcCamera có khung căn sẵn để chụp mặt trước căn cước rõ nét.

Chụp CCCD — mặt sauTiếp tục chụp mặt sau để hoàn tất bước định danh giấy tờ.

Quét QR trên giấy tờPhương án khác: tự động chụp khi mã QR trên CCCD khớp khung.

Quét QR thành côngXác nhận đã đọc được mã QR để lấy thông tin định danh.

Xử lý tình huống lỗiThông báo rõ ràng khi thiết bị không đọc được chip NFC.

02

Đọc chip NFC

Đang xử lý thông tinMàn chờ có phản hồi rõ ràng khi hệ thống đối chiếu dữ liệu.

Đã có tài khoảnXử lý tình huống người dùng đã tồn tại — điều hướng sang đăng nhập.

Hướng dẫn quét chip NFCGiải thích 3 lưu ý trước khi đọc chip trên căn cước gắn chip.

Chuẩn bị quét NFCNút chờ đếm ngược, tránh thao tác vội khi chưa đặt đúng vị trí.

Sẵn sàng quét NFCKích hoạt nút quét khi đã áp đúng vùng đọc chip.

Chạm chip vào máySheet hệ thống hướng dẫn áp chip vào mặt lưng điện thoại.

Đang đọc dữ liệu chipThanh tiến trình trực quan, nhắc giữ yên căn cước khi đọc.

Đọc NFC thành côngPhản hồi tức thì bằng dấu tích, trấn an người dùng.

Trạng thái chuyển tiếpMàn mờ có nhận diện thương hiệu khi chuyển sang bước sau.

03

Sinh trắc học khuôn mặt

Giới thiệu sinh trắc họcNêu lý do và 3 lưu ý để chụp khuôn mặt đạt chuẩn.

Nhận diện khuôn mặtKhung oval căn mặt kèm hẹn giờ hoàn thành trong 60 giây.

Căn khuôn mặt vào khungHướng dẫn trực quan giúp đưa khuôn mặt vào đúng vùng nhận diện.

Khớp khung — sẵn sàngViền chuyển xanh báo hiệu khuôn mặt đã vào đúng vị trí.

Đang kiểm tra khuôn mặtCận cảnh để hệ thống đánh giá chất lượng ảnh sinh trắc.

Xác thực thành côngViền xanh xác nhận khuôn mặt hợp lệ, hoàn tất sinh trắc học.

Giữ yên khi xác thựcNhắc người dùng giữ yên, kèm nhận diện thương hiệu tạo tin cậy.

Đang phân tích khuôn mặtHiệu ứng xử lý sinh trắc học ngay trên khung nhận diện.

04

Đăng ký hồ sơ

Tiến độ 3 bướcTrực quan hoá bước đã xong và bước đang thực hiện.

Nhập số điện thoạiBàn phím số riêng, tối ưu cho thao tác nhập nhanh.

Số điện thoại đăng kýXác nhận số chính chủ trước khi gửi mã OTP.

Nhập mã OTPÔ nhập OTP rõ ràng kèm ghi chú số lần thử còn lại.

Đang nhập OTPPhản hồi từng ký tự, kèm đếm ngược gửi lại mã.

Hoàn tất nhập OTPĐủ 6 số, sẵn sàng xác thực số điện thoại.

Nơi ở hiện nayChọn địa chỉ theo cấp hành chính, tự gợi ý chi nhánh hỗ trợ gần nhất.

Chọn nghề nghiệpDanh sách nghề nghiệp phục vụ đánh giá hồ sơ (KYC).

Xác nhận nghề nghiệpTrạng thái đã chọn một mục trong danh sách nghề nghiệp.

Email liên hệNhập email nhận sao kê, kèm tuỳ chọn thêm người giới thiệu.

Thêm người giới thiệuBottom sheet nhập SĐT/mã người giới thiệu — không bắt buộc.

Nhập mã giới thiệuXác thực mã giới thiệu để gán đúng chi nhánh hỗ trợ.

Xác nhận người giới thiệuHiển thị thông tin đã khớp trước khi tiếp tục.

Email sai định dạngKiểm tra realtime: báo lỗi ngay khi email chưa đúng định dạng.

Email hợp lệEmail đúng định dạng, kích hoạt nút tiếp tục.

05

Thiết lập tài khoản

Bước 3 — Thiết lập tài khoảnStepper cho biết đã xong định danh + hồ sơ, đến bước thiết lập.

Chọn tên đăng nhậpQuy tắc đặt tên hiển thị realtime với dấu tích xanh.

Tên đăng nhập đã tồn tạiBáo lỗi rõ khi tên đã có người dùng, gợi ý chọn tên khác.

Tên đăng nhập hợp lệTên mới hợp lệ, sẵn sàng sang bước đặt mật khẩu.

Đặt mật khẩuÔ mật khẩu kèm danh sách điều kiện bảo mật.

Mật khẩu chưa đạtĐiều kiện chưa thoả (có dấu) được đánh dấu trực quan.

Mật khẩu hợp lệTất cả điều kiện xanh, mật khẩu đạt chuẩn.

Nhập lại mật khẩuYêu cầu nhập lại để xác nhận, tránh sai sót.

Đang xác nhận mật khẩuNhập lại mật khẩu để hệ thống đối chiếu.

Mật khẩu không khớpBáo lỗi ngay khi hai lần nhập chưa trùng khớp.

Mật khẩu khớpHai lần nhập trùng khớp, hoàn tất đặt mật khẩu.

06 — Kết quả

Luồng gọn, rõ, tuân thủ

02 — Vai trò & mục tiêu

Biến quy trình nhiều bước thành hành trình rõ ràng

Mình thiết kế trọn luồng đăng ký hộ kinh doanh cho khách hàng có CCCD: tận dụng bóc tách dữ liệu từ giấy tờ để giảm nhập tay, chia quy trình thành các bước có tiến độ, hướng dẫn trực quan cho thao tác khó (chụp giấy tờ, ký số), và xử lý đầy đủ trạng thái lỗi để người dùng không bế tắc giữa chừng.

03 — Màn hình chính

Luồng đăng ký hộ kinh doanh (có CCCD)

Toàn bộ hành trình: tải & chụp giấy chứng nhận đăng ký kinh doanh, khai báo thông tin hộ kinh doanh, ký hợp đồng bằng chữ ký số, đến xác nhận và mở tài khoản thành công — kèm các bottom sheet lựa chọn, thông báo và trạng thái lỗi/chờ duyệt thường gặp.

01

Giới thiệu & Giấy tờ

Điểm vào MerchantEmpty state: chưa có tài khoản HKD, mời người dùng mở tài khoản.

Giải pháp bán hàngTrang giới thiệu giải pháp Merchant, nhận diện người đã có tài khoản HKD.

Mở tài khoản trong 2 bướcMàn giới thiệu nêu rõ 2 bước: tải hồ sơ ĐKKD và khai báo thông tin.

Chụp giấy chứng nhận ĐKKDKhung camera căn sẵn, hướng dẫn đặt giấy tờ để chụp rõ nét.

Chọn ảnh từ thư việnPhương án khác: chọn ảnh giấy tờ có sẵn từ thư viện máy.

Xác nhận ảnh giấy tờKiểm tra lại ảnh giấy chứng nhận trước khi hệ thống bóc tách thông tin.

02

Khai báo thông tin hộ kinh doanh

Thông tin hộ kinh doanhTự động điền tên HKD, mã ĐKKD, địa chỉ, ngành nghề từ giấy tờ đã chụp.

Chọn ngành nghề kinh doanhMở bottom sheet chọn ngành nghề, có tìm kiếm để lọc nhanh.

Danh sách ngành nghềDanh sách ngành nghề đầy đủ, chọn nhóm phù hợp với hộ kinh doanh. (cuộn để xem đầy đủ)

Địa chỉ trụ sởChọn địa chỉ theo cấp hành chính qua bottom sheet.

Chọn Tỉnh/Thành phốBottom sheet chọn tỉnh/thành, có ô tìm kiếm nhanh.

Địa chỉ đã nhậpĐiền đủ tỉnh/phường/số nhà cho địa chỉ trụ sở kinh doanh.

Người giới thiệuNhập SĐT/mã người giới thiệu, tự khớp tên và chi nhánh hỗ trợ.

03

Chữ ký số & Xác nhận

Tạo chữ ký sốRà soát thông tin và ký hợp đồng mở tài khoản bằng chữ ký số. (cuộn để xem đầy đủ)

Xác nhận OTP chữ ký sốNhập OTP từ đối tác để xác thực và tạo chữ ký số.

Tạo chữ ký số thành côngPhản hồi tích cực, sẵn sàng bước xác nhận cuối.

Tạo chữ ký số thất bạiXử lý khi tạo chữ ký số không thành công, cho phép thử lại.

Xác nhận mở tài khoảnTổng hợp thông tin HKD, đại diện pháp luật và hợp đồng ký số. (cuộn để xem đầy đủ)

04

Hoàn tất

Mở tài khoản thành côngMàn chúc mừng, dẫn tới xem thông tin tài khoản hoặc về trang chủ.

Chi tiết tài khoản HKDHiển thị số tài khoản thanh toán và thông tin hộ kinh doanh vừa mở.

Danh sách tài khoảnTài khoản HKD hiển thị cùng tài khoản thanh toán trong danh mục.

Thông báo hoàn tấtTrung tâm thông báo xác nhận đã đăng ký và mở tài khoản HKD thành công.

05

Trạng thái lỗi & chờ duyệt

Lỗi hệ thốngThông báo gián đoạn kèm mã lỗi, hướng dẫn thử lại sau.

Hết thời gian chờXử lý khi API quá thời gian phản hồi, tránh treo màn cho người dùng.

Mất kết nối internetThông báo mất kết nối, hướng dẫn kiểm tra mạng và thử lại.

Hồ sơ chờ phê duyệtThông báo hồ sơ chưa được phê duyệt, cần bổ sung hoặc chờ xử lý.

04 — Sửa thông tin hộ kinh doanh

Luồng cập nhật thông tin hộ kinh doanh

Sau khi mở tài khoản, chủ hộ kinh doanh có thể tự cập nhật thông tin ngay trong app: từ tài khoản → chọn trường cần sửa (tên, địa chỉ, ngành nghề…) → xác nhận & ký → chờ ngân hàng phê duyệt, kèm các trạng thái từ chối và lỗi.

A

Vào tài khoản hộ kinh doanh

Danh sách tài khoảnChọn tài khoản HKD trong danh mục Tài khoản / Thẻ / Tích luỹ. (cuộn để xem đầy đủ)

Chi tiết tài khoản HKDXem chi tiết tài khoản HKD đang hoạt động, mở tuỳ chọn cập nhật. (cuộn để xem đầy đủ)

B

Cập nhật thông tin

Cập nhật thông tin HKDMàn tổng hợp thông tin hiện tại, cho phép sửa từng phần.

Sửa các trường thông tinChỉnh các trường: mã ĐKKD, địa chỉ, ngành nghề, ngày cấp.

Thay đổi tên hộ kinh doanhCập nhật tên HKD với dữ liệu mới.

Nhập tên hộ kinh doanhBàn phím nhập tên HKD, kiểm tra realtime.

Địa chỉ trụ sởChọn lại địa chỉ trụ sở theo cấp hành chính.

Địa chỉ đã cập nhậtXác nhận địa chỉ mới sau khi chỉnh sửa.

Chọn ngành nghềCập nhật lại ngành nghề kinh doanh từ danh sách đầy đủ. (cuộn để xem đầy đủ)

C

Xác nhận & Phê duyệt

Xác nhận cập nhậtRà soát toàn bộ thay đổi và giấy đề nghị trước khi gửi. (cuộn để xem đầy đủ)

Xác thực sinh trắcXác thực bằng vân tay/khuôn mặt để ký yêu cầu cập nhật.

Đang chờ phê duyệtHồ sơ cập nhật đã gửi, theo dõi trạng thái chờ ngân hàng duyệt. (cuộn để xem đầy đủ)

Cập nhật thành côngYêu cầu được duyệt, thông tin HKD đã thay đổi.

D

Từ chối & Lỗi

Hồ sơ chưa được duyệtThông báo hồ sơ chưa được phê duyệt kèm lý do. (cuộn để xem đầy đủ)

Từ chối yêu cầu cập nhậtNgân hàng từ chối yêu cầu cập nhật, hướng dẫn bước tiếp theo. (cuộn để xem đầy đủ)

Mất kết nối hệ thốngThông báo gián đoạn kết nối kèm mã lỗi, cho thử lại.

05 — Kết quả

Đăng ký hộ kinh doanh ngay trên app

02 — Dùng AI tạo toàn bộ hình ảnh

Quy trình dựng art bằng AI

Toàn bộ asset hình ảnh — nhân vật, cây trồng, vật phẩm, quái vật, môi trường và UI — được tạo bằng AI: xây style reference & prompt chuẩn cho từng nhóm asset, lặp nhiều biến thể rồi chọn lọc, và hậu kỳ (tách nền, chỉnh màu, ghép bộ) để đảm bảo tính đồng nhất. Cách làm này giúp dựng một thư viện art lớn, đồng bộ trong thời gian ngắn.

03 — Hình ảnh trong game

Thư viện hình ảnh

Bộ màn hình tiêu biểu của Greenland — nông trại, chăn nuôi, xây dựng, chiêu mộ quái và đấu PVP. Toàn bộ hình ảnh được tạo bằng AI.

01

Khởi đầu & Nông trại

Bắt đầu gameOnboarding đầu game với nhân vật trên nông trại.

Nông trại chính (Home)Trung tâm game: nhà cửa, ô đất và cổng PVE/PVP.

Toàn cảnh nông trạiBố cục nhà ở, khu chăn nuôi và ruộng đất.

Cụm nông trạiKhu nhà và khu chăn nuôi liền kề.

Cốt truyệnSkull Emperor dẫn dắt mạch truyện của game.

02

Trồng trọt & Thu hoạch

Gieo trồngChọn hạt giống để gieo trên từng ô đất.

Thu hoạchThu hoạch nông sản khi cây đã chín.

Thu hoạch nông sảnNhận nông sản trực tiếp trên ruộng.

Nhận sản phẩmNhận thành phẩm từ cây trồng/vật nuôi.

Chọn ô đất trồngDùng búa chọn ô đất để canh tác.

Trồng ngôCanh tác ngô trên ô đất.

03

Chăn nuôi

Chuồng bòNâng cấp chuồng bò, thu sữa để sản xuất.

Chuồng bò LV1Chuồng bò cấp 1 và tuỳ chọn nâng cấp.

Chuồng bò LV2Chuồng bò đạt cấp tối đa hiện có.

Trại cừu LV5Trại cừu cấp cao, nhiều cừu.

Trại cừu LV1Đàn cừu trong chuồng cấp 1.

Trại cừu LV3Nâng cấp chuồng cừu lên cấp 3.

Trại cừu LV2Chuồng cừu cấp 2.

Cho cừu ănCho cừu ăn để tăng sản lượng lông.

Cho cừu ăn (LV1)Bổ sung thức ăn cho đàn cừu.

Lấy lông cừuThu hoạch lông cừu từ đàn.

Thêm cừuBổ sung cừu vào chuồng.

04

Kho & Kinh tế

Kho — Tất cảQuản lý toàn bộ vật phẩm trong kho.

Kho — Nông sảnLọc kho theo nhóm nông sản.

Kho — Vật phẩmNhóm vật phẩm trong kho.

Kho — Khoáng sảnNhóm khoáng sản trong kho.

Kho — Thức ănNhóm thức ăn chăn nuôi trong kho.

Kho lưu trữQuản lý kho vật phẩm theo tab.

Bán vật phẩmBán nông sản để đổi lấy vàng.

Cửa hàngMua kim cương/vàng và gói ưu đãi.

Không đủ vàngBáo thiếu vàng kèm gợi ý kiếm thêm.

05

Xây dựng

Xây dựngChọn ô đất trống để đặt công trình.

Chế độ xâyBố trí công trình trên các ô trống.

Chọn ô xâyCác ô đất chờ đặt công trình.

Đặt công trìnhXem trước vị trí đặt nhà.

Nhà khoCông trình nhà kho trên nông trại.

06

Chiến đấu & Quái

Doanh trại — chiêu mộChiêu mộ quân Skeleton để chiến đấu.

Doanh trại — SkeletonTạo lính Skeleton cơ bản.

Cung thủ SkeletonChiêu mộ Skeleton Archer (Double Shot).

Cung thủ — tạo quânĐẩy nhanh tiến trình tạo lính.

Skeleton WarriorLính chiến mạnh với kỹ năng riêng.

Warrior — kỹ năngSkeleton Warrior với kỹ năng phản damage.

Thiếu nguyên liệuBáo lỗi khi không đủ nguyên liệu tạo lính.

Chiến thắng — nhận thưởngKết thúc trận đánh, trao thưởng.

07

Nhiệm vụ, Xã hội & Mùa giải

Nhiệm vụ — đang làmNhiệm vụ hằng ngày đang thực hiện.

Nhiệm vụ — hoàn thànhNhiệm vụ đã xong, nhận thưởng.

Bạn bèMời bạn và danh sách giới thiệu.

Hall of FameBảng vinh danh người chơi theo mùa.

Bảng xếp hạng PVPXếp hạng theo mùa, đấu với người chơi khác.

Xếp hạng mùa giảiHạng mùa (Silver/Bronze) và phần thưởng.

Luật PVPThể lệ chế độ PVP theo mùa giải.