Product design for a Conversion Rates oriented Platform
Irina Zubareva
Like this project
Posted Dec 7, 2023
Implemented UX strategies and conducted user research to optimize the website's conversion rates, resulting in increased customer engagement and sales. Style,UI
Likes
0
Views
27
Link to the project
Project Overview
Problem Statement
Solution Design
SEO
Objectives
Process
Performance Optimizations
AI Integration
Results and Impact
Responsibilities
Project Evolution
Version 1: Basic Pokémon Team builder
Version 2: Enhanced Team Builder
Version 3: AI-Assisted Team Creation
UI examples
Figma tokens and booleans
Management
Link to the project
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.
SEO
Objectives
To capture a share of the high-traffic niche market by providing a modern, SEO-focused website that offers valuable content.
Product is proposing a pokemon team builder tool with a clear and simple process which goes together with Pokemon profiles (pokedex).
Process
Keyword research to identify opportunities in the web space.
Market research to find a potential problem
User research and interviews to confirm/reject ideas, define a problem
Designed the application in Figma (web and mobile), considering insights.
Developed the application in Bubble, pulling and formatting data from various APIs.
Implemented a dual client acquisition strategy: organic SEO and a social media sharing feature for Pokemon teams.
Optimized database schema for fast page loading and implemented Fuzzy search.
Created SEO-friendly Pokemon descriptions with GPT using OpenAI API.
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
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
Responsibilities
Users and market research
Application design
UI kit, breakpoint variables and grid variables
Half of the project builded on Framer
Prototypes for Bubble integration of the second part
Users screen recordings and data monitoring
User-Centered Design andl UX research methods:
Project Evolution
Version 1: Basic Pokémon Team builder
Team creation
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
AI agent integration for team creations
UI examples
Landing page section
Poxedex menu
Pokemon page, BG color is according to the pokemon type
Published team page - prototype
Figma tokens and booleans
Tokens spacing
Tokens colors and booleans
Management
Notion tasks creation and monitoring
