- La data escogida fue la de Pokemón ya que es una data amigable, la cual tiene un amplio público haciendolo así popular y con un mayor campo por explorar.
- El usuario: Se analizó y se priorizo resolver las problemáticas para las personas que eran fanáticos de la serie, ya que así no se tendría un sector reducido(usuarios de PokemonGo).
- Las expectavivas: Se esperaba poder tener un amplio público además de accesible para poder definir el producto a desarrollar, nos basamos en las entrevistas a público con conocomiento previo a la serie Pokemón (fans en su mayoría), con los cuales se pudo sacar varias problemáticas existentes con respecto a esta.
- Los usuarios expresaban que existe una muy larga variedad de pokemones por lo cual era muy difícil recordar ciertas características de ellos.
- Los usuarios expresaban que se les complicaba en cierto modo poder separar a los pokemones por tipos.
- Los usuarios no tenían idea de cuanto pesaban, ni median.
- Para algunos de ellos, era importante saber las debilidades de los pokemones.
Se realizaron y obtuvieron en base a las problemáticas.
-
HU01: Como usuario quiero visualizar todos los Pokémon que hay para conocer más sobre ellos.
Definición de terminado HU01: La HU01 estará terminada cuando en la pantalla se muestren todos los Pokémon con las propiedades que se han elegido teniendo en cuenta lo que desea saber el usuario.
-
HU02: Como usuario quiero buscar a los Pokémon por su nombre para buscarlos de manera rápida.
Definición de terminado HU02: La HU02 estará terminada cuando en la pantalla haya un input donde el usuario pueda ingresar el nombre del Pokémon que quiera buscar y el botón para que lo busque. Además, que se muestre el Pokémon que se ha buscado.
-
HU03: Como usuario quiero poder agruparlos por categorías para conocerlos más según su tipo.
Definición de terminado HU03: La HU03 estará terminada cuando en la pantalla haya un botón de Búsqueda Avanzada, para que cuando el usuario haga clic, se despliegue un div con un select con todos los tipos que se pueden seleccionar, y un botón para hacer la búsqueda. Luego de eso, se deben mostrar todos los Pokémon que tengan como tipo el seleccionado.
-
HU04: Como usuario quiero poder sacar promedios sobre la altura y peso de los Pokémon para conocer datos extras sobre todos ellos.
Definición de terminado HU04: La HU04 estará terminada cuando en la pantalla se muestren el peso y altura promedio según el tipo de Pokémon elegido. Adicional a eso, el usuario podrá ver la cantidad de Pokémon por tipo que hay.
-
HU05: Como usuario quiero ordenar a los Pokémon alfabéticamente para así visualizarlos mejor.
Definición de terminado HU05: La HU05 estará terminada cuando en la pantalla se muestre un select con opciones de ordenar de la A a la Z y de la Z a la A. Luego de seleccionar, que se muestren los Pokémon ordenados alfabéticamente según su nombre.
Para que cada historia de usuario esté terminada, además de la funcionalidad especificada en cada historia, debe tener su prototipo, ser responsive y estar subido a gh-pages.
Luego de definir las historias de usuario, se decidió implementar una aplicación de nombre PokePedia, que tiene como usuarios principales a los fans de la serie Pokémon. Tiene como objetivo que el usuario pueda conocer más sobre las características principales de los Pokémon. Lo utilizarían cada vez que quieran saber cómo son los Pokémon, saber sus nombres, los tipos, las debilidades, su peso y talla.
El proceso de diseño tiene cinco fases relacionadas al usuario para satisfacer sus necesidades.
- Entrevistas: Las entrevistas fueron la base para empezar a realizar el producto ya que con ellas encontramos las problemáticas ya mencionadas, se definieron las historias de usuario y se planteó la resolución de problemas.
A continuación un resumen de las conclusiones que se obtuvieron de los usuarios entrevistados:
Se planteó implementar una aplicación en base a las necesidades del usuario. Una app:
- En la que puedan visualizar a toda la gama de los Pokémon.
- En la que puedan filtrar a los Pokémon por tipo, para que lo puedan organizarlo mejor.
- Que permita buscar por nombre a los Pokémon.
- Que pueda dar a conocer el promedio del peso y talla de los Pokémon.
- Que puedan ordenar de forma ascendente y descendente alfabéticamente por nombre.
En base a problemática.
- Barra de búsqueda
- Un select con los tipos
- Opción de filtrado (botón)
- Opción de sacar promedios (botón)
Al tener la data ya establecida, validamos con los usuarios que información será útil para ellos.
El usuario requirió:
- Imagen del Pokémon
- Nombre
- Tipo
- Datos extras (peso y altura)
- Debilidades
Prototipo de baja fidelidad Es el prototipo hecho en lápiz y papel, las dos ideas de pantalla de inicio y la segunda página donde se muestra todo lo demás.
Prototipo de alta fidelidad Son los prototipos hecho en Figma, exportados a Zeplin:
El feedback recibido por los usuarios al momento de mostrarles el prototipo de alta fidelidad.
Además de mostrarles el prototipo de alta fidelidad, en las primeras historias se mostró la interfaz.
Iteración con usuarios: El usuario no identificaba la aplicación como algo relacionado a Pokémon por los colores que se le había puesto, solo lo reconocía porque se mostraban los Pokémon.
Lo que se hizo después de tener esa información del usuario, fue modificar el diseño para la siguiente historia de usuario.
Iteración con usuarios: Se mostró el prototipo al usuario, a pesar de tener un ícono de Pokémon y los colores, decía que le faltaba algo más.
Así que se agregó un fondo relacionado a Pokémon, además de mostrar dos Pokémon por fila y centrado.
Al empezar el proyecto, empezamos definiendo las historias de usuario, pusimos tareas generales en nuestro tablero, pero no fue de mucha ayuda.
Para la siguiente historia, definimos un orden de trabajo, iba a ser la siguiente:
-
Primero crear los tests en
data.spec.jsde las funciones que queriamos que funcionen.- Para cada función, debía retornar que era una función.
- Y además, que funcione correctamente, llamando a la función con sus argumentos. Para eso, creamos inputs y outpus de ideal que quería que retorne.
-
Investigar sobre cuáles eran los métodos que podíamos usar para crear la función.
-
Hacer pruebas en la consola de la aplicación, hasta llegar a que la función ya esté implementada.
-
Implementar la función en nuestro archivo
data.js. -
Pasar los tests de esa función.
-
Una vez que pasó el test de funcionalidad, se implementa en el archivo
main.jspara que se muestre en la interfaz de usuario (IU)
Trabajar de esa manera nos ayudó a tener claro que funciones eran las que queriamos implementar.
En nuestro tablero, por cada historia de usuario, dividimos las tareas por colores:
- El naranja era todo lo que se tenía que crear con javaScript (funciones, tests)
- El azul era lo que se implementaba en el html
- El rosado era el diseño que se debía hacer de acuerdo al prototipo de alta fidelidad.