Kanpani Girl – Game Web3 Website

Sep 2022

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

The experience focuses on strong visual storytelling, lightweight navigation, and conversion-driven CTAs for early community growth.

My Contribution

Visual direction and landing page UI/UX
Information architecture for sections and navigation
Responsive layout and interaction design
Front-end 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, strategic 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 focuses on designing a visually rich and engaging website to introduce the game world, communicate its core mechanics, and highlight Web3 value—guiding users from discovery to onboarding and community participation.

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 engage with the game.

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

Unclear presentation of gameplay mechanics and progression systems

Limited storytelling around the game world, characters, and narrative

Complexity of Web3 concepts (wallet, assets, ownership) without clear guidance

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

Solution

We redesigned the website as an immersive Web3 onboarding platform bridging the gap between traditional game experiences and blockchain mechanics, enabling users to quickly understand, engage, and participate in the game ecosystem.

Reframed information architecture to prioritize gameplay experience and player journey
Designed step-by-step onboarding from discovery to wallet connection and gameplay
Translated complex Web3 concepts into intuitive, player-friendly interactions
Strengthened engagement through character-driven storytelling and visual design
Optimized conversion flow to increase onboarding, retention, and community growth

Designing

Focused on creating an immersive, player-centric experience that balances visual storytelling and usability enabling users to explore the game world, understand core mechanics, and smoothly transition into onboarding and gameplay.

Implementation

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

Backend

A custom WordPress theme was developed to align with 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 to enable efficient content management and future expansion.

Frontend

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

Launching & Results

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

Deploy and Optimize

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

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

Onboarding & Results

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