Kanpani Girl – Website Game Web3
Tháng 9/2022
Kanpani Girl là một website landing game Web3 được thiết kế để giới thiệu thế giới, các nhân vật và lộ trình phát triển, giúp người chơi và nhà sưu tập nhanh chóng hiểu về trò chơi và tham gia vào cộng đồng.
Trải nghiệm tập trung vào việc kể chuyện bằng hình ảnh mạnh mẽ, điều hướng nhẹ nhàng và các nút kêu gọi hành động (CTA) hướng tới chuyển đổi để phát triển cộng đồng trong giai đoạn đầu.
Vai trò của tôi
- Định hướng hình ảnh và thiết kế UI/UX trang landing page
- Cấu trúc thông tin cho các phân mục và điều hướng
- Thiết kế bố cục đáp ứng (responsive) và tương tác
- Hỗ trợ xây dựng Front-end và kiểm tra chất lượng (QA)
Công cụ sử dụng
- Figma
- Photoshop / Illustrator
- Công cụ tạo bản mẫu (Prototyping)
- HTML/CSS/Bootstrap
Tổng quan
Kanpani Girl là một trò chơi được hỗ trợ bởi Web3, kết hợp lối kể chuyện qua nhân vật, lối chơi chiến thuật và quyền sở hữu kỹ thuật số thực sự thông qua công nghệ blockchain. Người chơi có thể thu thập, nâng cấp và tương tác với các nhân vật trong khi tham gia vào một hệ sinh thái trò chơi năng động, không ngừng phát triển.
Dự án này tập trung vào việc thiết kế một website phong phú về mặt hình ảnh và hấp dẫn để giới thiệu thế giới trong game, truyền tải các cơ chế cốt lõi và làm nổi bật giá trị của Web3 - hướng dẫn người dùng từ lúc khám phá đến lúc tham gia vào trò chơi và cộng đồng.
Vấn đề
Trải nghiệm hiện tại thiếu sự rõ ràng trong việc truyền tải các cơ chế cốt lõi của trò chơi và giá trị Web3, khiến những người chơi mới gặp khó khăn trong việc hiểu cách bắt đầu và tham gia trò chơi.
Thử thách chính: Giới thiệu các khái niệm Web3 phức tạp thông qua một trải nghiệm trò chơi trực quan và hấp dẫn.
Trình bày không rõ ràng về cơ chế trò chơi và hệ thống thăng tiến
Kể chuyện hạn chế về thế giới trong game, các nhân vật và cốt truyện
Sự phức tạp của các khái niệm Web3 (ví, tài sản, quyền sở hữu) mà không có sự hướng dẫn rõ ràng
Thiếu sự tin tưởng và rõ ràng về các tính năng blockchain và quyền sở hữu tài sản kỹ thuật số
Giải pháp
Chúng tôi đã thiết kế lại website thành một nền tảng giới thiệu Web3 sống động, thu hẹp khoảng cách giữa trải nghiệm trò chơi truyền thống và cơ chế blockchain, cho phép người dùng nhanh chóng hiểu, tham gia và tương tác trong hệ sinh thái trò chơi.
- Cấu trúc lại thông tin để ưu tiên trải nghiệm trò chơi và hành trình người chơi
- Thiết kế quá trình tham gia (onboarding) từng bước từ lúc khám phá đến khi kết nối ví và bắt đầu chơi
- Chuyển hóa các khái niệm Web3 phức tạp thành những tương tác trực quan, thân thiện với người chơi
- Tăng cường mức độ tương tác thông qua lối kể chuyện bằng nhân vật và thiết kế hình ảnh
- Tối ưu hóa luồng chuyển đổi để tăng tỷ lệ tham gia, duy trì và phát triển cộng đồng
Thiết kế
Tập trung vào việc tạo ra một trải nghiệm sống động, lấy người chơi làm trung tâm, cân bằng giữa kể chuyện qua hình ảnh và tính dễ sử dụng - cho phép người dùng khám phá thế giới trong game, hiểu các cơ chế cốt lõi và chuyển đổi mượt mà sang việc tham gia và chơi game.
Triển khai
Nền tảng được triển khai bằng WordPress CMS và Bootstrap 5, với trọng tâm là hiệu suất, khả năng mở rộng và trải nghiệm người dùng sống động. Hệ thống cho phép cập nhật nội dung động trong khi vẫn đảm bảo thời gian tải nhanh và các tương tác đáp ứng (responsive) được tối ưu hóa để hỗ trợ quá trình tham gia, tương tác và khám phá của người chơi trên mọi thiết bị.
Backend
Một theme WordPress tùy chỉnh đã được phát triển để phù hợp với hệ sinh thái nội dung của trò chơi và các yêu cầu về khả năng mở rộng. Các Custom Post Type như Nhân vật, Tính năng Trò chơi, Tin tức và Sự kiện đã được cấu trúc, hỗ trợ bởi các Taxonomy linh hoạt để cho phép quản lý nội dung hiệu quả và mở rộng trong tương lai.
Frontend
Frontend được xây dựng bằng Bootstrap 5, tận dụng hệ thống lưới responsive ưu tiên thiết bị di động (mobile-first) và các component UI có thể tái sử dụng. Trải nghiệm được nâng cao với các bố cục phong phú về hình ảnh và tương tác mượt mà—đảm bảo hiệu suất nhanh, tính nhất quán và trải nghiệm người dùng sống động trên mọi thiết bị.
Ra mắt & Kết quả
Nền tảng đã được ra mắt thành công với trọng tâm là hiệu suất, khả năng mở rộng và trải nghiệm người chơi sống động. Bằng cách kết hợp thiết kế, nội dung và công nghệ, website cho phép người dùng chuyển đổi liền mạch từ lúc khám phá đến khi tham gia và tích cực tương tác trong hệ sinh thái trò chơi.
Triển khai và Tối ưu hóa
Nền tảng được triển khai bằng WordPress CMS với theme tùy chỉnh và Bootstrap 5, tập trung vào hiệu suất, khả năng mở rộng và khả năng bảo trì. Việc tối ưu hóa liên tục được áp dụng để nâng cao quá trình tham gia, cải thiện chất lượng tương tác và thúc đẩy mức độ tương tác và duy trì cao hơn.
- Cải thiện khả năng khám phá, giúp người chơi nhanh chóng hiểu lối chơi, nhân vật và quá trình thăng tiến
- Thiết lập các cấu trúc trang có thể mở rộng với các component tái sử dụng để mang lại trải nghiệm nhất quán
- Tăng mức độ tương tác thông qua hình ảnh sống động, lối kể chuyện và nội dung tương tác
- Hợp lý hóa luồng tham gia từ khám phá đến lối chơi và tham gia cộng đồng
Tham gia & Kết quả
Trải nghiệm được thiết kế lại giúp người chơi chuyển tiếp mượt mà từ khám phá đến tham gia và lối chơi tích cực. Bằng cách đơn giản hóa các tương tác Web3 và nâng cao tính rõ ràng, nền tảng thúc đẩy sự tương tác, tỷ lệ giữ chân và sự tham gia cao hơn trong hệ sinh thái trò chơi.
Dự án khác
GIANTY
Website doanh nghiệp
Một website doanh nghiệp được thiết kế tỉ mỉ để truyền tải các dịch vụ, sự uy tín của thương hiệu và câu chuyện công ty của GIANTY thông qua một sự hiện diện kỹ thuật số rõ ràng.