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.