I have always loved Pokemon and wanted to create a website that would give me an excuse to geek out over Pokemon stats and revisit a part of my childhoold. I also wanted to create a website that Pokemon fans would enjoy using and playing around with.
While browsing the internet, I came across a Pokédex that was created by the Pokemon company. I noticed that the site was not mobile-friendly and that it was not interactive (i.e. you could not sort or filter the Pokemon). Looking at the other three major Pokédex websites, I noticed that they were all not mobile-friendly and that they were not interactive as well!
Therefore, I created a toy Pokédex using Material UI (MUI), a React component library! I wanted to create a new Pokedex concept that allows users to sort and filter in a way the major Pokedex websites do not!
Before we get started, let's take a look at what a Pokédex is!
A Pokédex is a device that is used to record and store information about the various species of Pokémon in the world.
Our Toy-Pokédex will include MUI cards of the first few Pokemon in the official Pokedex (linked on the left), filter and sort these Pokemon, and even assemble their own team and see some of its stats!
It all started with a Google Search! I searched for Pokédex and examined Google's top 3 recommendations, as seen on the right!
Below is an overview of each of the Top 3 Pokédex's! I also dive into their features and then the ideas I got while playing around with them!
This is the official Pokédex from The Pokémon Company! It is a great resource for Pokemon fans, and includes through information about each Pokemon. Some of the features it includes are:
However, the site is not mobile-friendly and does not allow for much interactivity! The most glaring issue is the lack of sorting by Type!
This fanmade site is a great resource for Pokemon fans. It includes everything from news to a large database chronicling all of the Pokemon. It's features include: However, it's Pokedex is contained in a "spreadsheet" format, and does not allow for much interactivity!
While looking at this Pokédex, I realized what a primary use of a Pokédex is: creating many different Teams! I wanted to create a Pokédex that allows users to create their own teams and see some of their stats!
Bulbagarden is a Wikipedia-like site that contains a lot of information about Pokemon. As a Wiki, it's Pokédex incorporates a lot of the information on its site:
A feature I thought would be incredibly interesting to add after looking at this site is sorting by Evolution Stage! This is something almost no other Pokédex has, and I think it would be a great addition to my Pokédex! I believed in this idea so much that I named my concept "Pokédex Evolution"!
To create a fresh and new Pokédex, I decided to create a mobile-friendly and interactive Pokédex that allows users to sort by Type, Evolution, Attack, and HP, provides more glanceable information and enables adding Pokemon to a team!
Below are are annotations of my new concept and how they incoporate these new features! Click to enlarge the annotation!
After making a LoFi prototype, we moved onto making our HiFi prototype in Figma. This prototype went through a few iterations (especially after incorporating the feedback from studio).
Now, you can go play around with the concept yourself! Have fun filtering and sorting Pokémon and evaluating the stats of different team configurations!
I hope you enjoy playing around with it! Click the image below to open the site!
In the end, I would love to add more Pokemon to this prototype and see this become a real product! I think it would be excellent to make this concept open source: both adding more Pokémon and scaling the features to handle all of the Pokémon!
For the Pokémon lovers out there, I hope this inspired you to create new tools for the Pokémon community! I would love to see what you come up with!
Now, go catch 'em all!