Pokémon es una franquicia nipona de entretenimiento creada en consorcio con Nintendo, Game Freak y Creatures, bajo el nombre The Pokémon Company. Los productos se pueden encontrar en videojuegos, anime, manga, obras de teatro; etc.
El proyecto se basa en la data del videojuego Pokémon Go, lanzado por Niantic en julio del 2016. Hoy en día, el número de usuarios activos de Pokémon Go llega a los 60 millones de usuarios, 20 millones más que los usuarios de Uber.
Nuestro usuario es un seguidor de Pokémon que necesita tener a la mano los datos básicos de los pokémones y poder ordenarlos por tipo. Es por ello que nace Pokedex, para poder filtrar los pokemones por tipo y después acomodarlos por orden alfabético.
El producto es una pagina web que filtra pokemones por tipo y ordena alfabeticamente los pokemons. Está enfocada a los usuarios y fans de la Franquicia de Pokémon. Aunque existen muchas páginas web sobre los datos de la app de Pokémon Go, ninguna mantiene un estilo simple y sin contenido que distraiga o quite la atención a los datos importantes que los jugadores necesitan.
El diseño de la página web de basa en una pokedex. Se han respetado los colores originales y se realizaron modificaciones con base en las pruebas con usuarios. Al inicio se pensaba en la pokedex original con todos los botones y elementos de la misma, pero al final se decidió mantener más limpio el espacio con menos botones que eran confusos para los usuarios.
Para acceder al mockup ir al siguiente enlace --> Mockup
1.- Yo, como jugador de Pokémon quiero conocer los pokemones que existen, para saber sus características. 2.- Yo, como jugador, quiero filtrar los pokémones según su tipo para consultar sólo los datos de esos pokémons. 3.- Yo, como jugador de Pokémn, quiero ordenar los resultados filtrados por orden alfabético.
Los test de usabilidad se realizaron vía online y de forma prescencial. Para ello se realizó el flujo de la webapp con Invision.
Se lanzó la url del flow de la webapp. Aunque se les dijo a los usuarios que sólo se mostraba el flujo y que aún no hacía nada la "página". Muchos comenzaron a tener conflictos porque sólo mostraba a Vaporeon. Algunos otros usuarios comentaron que debería de tener una congruencia con la tipogafía y su tamaño. Que los botones eran muchos y que eran confusos.
Los usuarios mostearon conflicto con la interfaz inicial, dado que tenía muchos botones y no sabía cuales eran los funcionales y cuales no. Por lo tanto, de secició a realizar una interfaz más limpia, respetando lo más que se pudiera el diseño de la Pokedex original.
- Debes realizar un 🍴 fork del repo.
- ⬇️ Clona tu 🍴 a tu computadora (copia local).
- 📦 Instala las dependencias del proyecto con el comando
npm install. Esto asume que has instalado Node.js (que incluye npm). - Si todo ha ido bien, deberías poder ejecutar las 🚥
pruebas unitarias (unit tests) con el comando
npm test. - ¡Listo! 🚀
- HTML 5
- CSS
- JavaScript Vainilla
- Adobe Ilustrator
- [Inkscape] (https://inkscape.org/es/)
- [Invision] (https://www.invisionapp.com/)
- Git
- GitHub
- GitHub Pages
- Node.js
- Jest
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent