#06 - allpokemon.info | Ai-Team builder | by Sebastian Avelar #06 - allpokemon.info | Ai-Team builder | by Sebastian Avelar

#06 - allpokemon.info | Ai-Team builder |

Sebastian Avelar

1 collaborator

Completed work

BuildShip Developer

Low-Code/No-Code Developer

Bubble Developer

Bubble

BuildShip

Framer

Design

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