Kanpani Girl – Website Game Web3

Sep 2022

Kanpani Girl is a Web3 game landing website designed to introduce the world, characters, and development roadmap, helping players and collectors quickly understand the game and join the community.

The experience focuses on strong visual storytelling, lightweight navigation, and conversion-oriented CTAs to grow the early community.

My Contribution

  • Visual direction and landing page UI/UX design
  • Information architecture for sections and navigation
  • Responsive layout and interaction design
  • Frontend build support and QA

Tools Used

  • Figma
  • Photoshop / Illustrator
  • Prototyping tools
  • HTML/CSS/Bootstrap

Overview

Kanpani Girl is a Web3-powered game that combines character-driven storytelling, tactical gameplay, and true digital ownership through blockchain technology. Players can collect, upgrade, and interact with characters while participating in a dynamic, evolving game ecosystem.

This project focused on designing a visually rich and engaging website to introduce the game world, communicate core mechanics, and highlight the value of Web3, guiding users from discovery to joining the game and community.

Problem

The existing experience lacked clarity in communicating the game’s core mechanics and Web3 value, making it difficult for new players to understand how to start and participate.

Key challenge: Introduce complex Web3 concepts through an intuitive and engaging game experience.

Unclear presentation of game mechanics and progression systems

Limited storytelling around the game world, characters, and narrative

Complex Web3 concepts such as wallets, assets, and ownership without clear guidance

Lack of trust and clarity around blockchain features and digital asset ownership

Solution

We redesigned the website into an immersive Web3 introduction platform that bridges traditional game experiences and blockchain mechanics, allowing users to quickly understand, join, and engage with the game ecosystem.

  • Restructured information to prioritize the game experience and player journey
  • Designed step-by-step onboarding from discovery to wallet connection and gameplay
  • Translated complex Web3 concepts into visual, player-friendly interactions
  • Increased engagement through character storytelling and visual design
  • Optimized conversion flows to increase participation, retention, and community growth

Design

Focused on creating an immersive, player-centered experience that balances visual storytelling and usability, allowing users to explore the game world, understand core mechanics, and move smoothly into participation and gameplay.

Implementation

The platform was implemented with WordPress CMS and Bootstrap 5, focusing on performance, scalability, and an immersive user experience. The system enables dynamic content updates while ensuring fast load times and responsive interactions optimized for player onboarding, engagement, and exploration across devices.

Backend

A custom WordPress theme was developed to fit the game’s content ecosystem and scalability requirements. Custom Post Types such as Characters, Game Features, News, and Events were structured, supported by flexible taxonomies for efficient content management and future expansion.

Frontend

The frontend was built with Bootstrap 5, using its mobile-first responsive grid and reusable UI components. The experience was enhanced with visually rich layouts and smooth interactions, ensuring fast performance, consistency, and an immersive user experience across devices.

Launch & Results

The platform launched successfully with a focus on performance, scalability, and an immersive player experience. By combining design, content, and technology, the website enables users to move seamlessly from discovery to participation and active engagement in the game ecosystem.

Deployment & Optimization

The platform was deployed with WordPress CMS, a custom theme, and Bootstrap 5, focusing on performance, scalability, and maintainability. Continuous optimization was applied to improve onboarding, interaction quality, and higher engagement and retention.

  • Improved discoverability, helping players quickly understand gameplay, characters, and progression
  • Established scalable page structures with reusable components for a consistent experience
  • Increased engagement through immersive visuals, storytelling, and interactive content
  • Streamlined the onboarding flow from discovery to gameplay and community participation

Engagement & Outcome

The redesigned experience helps players move smoothly from discovery to participation and active gameplay. By simplifying Web3 interactions and improving clarity, the platform drives stronger engagement, retention, and participation within the game ecosystem.


Other Projects

GIANTY

Corporate Website

A carefully designed corporate website that communicates GIANTY’s services, brand credibility, and company story through a clear digital presence.

UI DESIGN WEBSITE CORPORATE
VIEW PROJECT
GIANTY preview

I'd love to hear from you.

Email me any time at
tuyenphanxyz@gmail.com