#06 - allpokemon.info | Ai-Team builder |
Sebastian Avelar →
Bubble Developer
BuildShip Developer
Low-Code/No-Code
Bubble
BuildShip
Framer
Project Overview
Problem Statement
Solution Design
Project Evolution
Version 1: Basic Pokémon Cards
Version 2: Enhanced Team Builder
Version 3: AI-Assisted Team Creation
Development Process
Technical Implementation
Architecture Overview
Performance Optimizations
User-Centered Design
AI Integration
Results and Impact
Lessons Learned
Future Development
Project Overview
AllPokemon is a comprehensive Pokémon team-building platform that evolved from browsing Pokemon to an AI-powered team-creation tool.
Key Technologies: Bubble.io, Framer, Buildship, Custom API integration, Plausible Analytics, Microsoft Clarity, Logsnag
My Role: Full-stack developer, UX researcher, and project manager
Problem Statement
While researching, we discovered high search volumes for individual Pokémon, indicating strong user interest. Existing team builders were outdated and lacked features for competitive play. There was a clear need for a modern, user-friendly platform catering to both casual and competitive Pokémon players.
Solution Design
We initially designed a basic Pokémon browser and team creator. As we gained user insights, we pivoted to focus on competitive play features and eventually integrated AI for team suggestions.
Project Evolution
Version 1: Basic Pokémon Cards
V1. Teambuilder without Pokemon
V1. Team builder with Pokemon
Simple design focusing on essential information
Key features: Pokémon image, name, type, and basic strengths/weaknesses
Version 2: Enhanced Team Builder
V2. image is taken from screen recordings
Key Improvements:
Expanded information for competitive play; Abilities, items, moves, and detailed stats
Added search for items & moves
Version 3: AI-Assisted Team Creation
V3. Integrated AI-builder and better UX/UI
Key Improvements:
Comprehensive card design with strategic insights
Explanation of Pokémon's role, type combinations, and expanded move sets
Development Process
Initial Prototype: Built using Bubble.io for rapid development
Performance Optimization: Migrated high-traffic pages to Framer
Feature Expansion: Iteratively added competitive play elements
AI Integration: Implemented using Buildship and a custom Bubble.io API
We adopted an agile approach, releasing updates every two weeks based on user feedback and analytics data.
Key Features
Comprehensive Pokémon database
Advanced team builder with abilities, items, and moves
AI-powered team suggestions
Team sharing and exploration
Trainer profiles
Created SEO-friendly Pokemon descriptions using OpenAI API.
Technical Implementation
Architecture Overview
Frontend: Bubble.io and Framer
Backend: Bubble.io database and custom API
AI Integration: Buildship
Analytics: Plausible Analytics, Microsoft Clarity
Performance Optimizations
To improve page load times and SEO, we:
Migrated static content to Framer
Optimized Bubble.io database queries
Implemented lazy loading for Pokémon images
User-Centered Design
We employed several UX research methods:
Forum participation for user insights
Implemented analytics from day one
Conducted user interviews with competitive players
Analyzed user behavior through Microsoft Clarity screen recordings
This research led to key improvements like the advanced team builder and AI integration.
AI Integration
We integrated AI to provide intelligent team suggestions, addressing user demand for quick, competitive team creation. This feature was built using Buildship, interacting with our Bubble.io backend through a custom API.
Impact: 50% increase in daily active users, 75% increase in teams created per day
Results and Impact
Traffic analytics for allpokemon
Grew from 0 to 100 monthly active users in 3 months
Increased traffic from different sources
Featured in two major community forums
Lessons Learned
The importance of continuous user feedback in product development
Balancing feature development with performance optimization
The power of AI in enhancing user experience and engagement
Future Development
Implement further ai personalized team suggestions
Expand our mobile version of the teambuilder
Build chrome extension
