Pokeweb

Índice

• 1. Introducción
• 2. Historias
  • 2.1. Historia 1
  • 2.2. Historia 2
  • 2.3. Historia 3
  • 2.4. Historia 4
  • 2.5. Historia 5
  • 2.6. Historia 6
  • 2.7. Historia 7
  • 2.8. Historia 8
• 3. Proceso de Diseño
• 3.1. Prototipos * 3.1.1. Baja Fidelidad * 3.1.2. Alta Fidelidad
  • 3.2. Paleta de Colores
    • 3.2.1 Colores Base
• 3.3. Tipografía
• 4. Testeos de usabilidad
• 4.1. Resultados testeo de usabilidad
• 4.2. Aspectos a mejorar

1.- Introducción

Pokeweb es una página creada para los jugadores nuevos en el mundo de Pokémon GO, donde les ayudará a conocer los primeros 151 Pokemon de la región de Kantō, con los datos necesarios para poder empezar y conocer al detalle cada uno, brindándole además algunos tips para iniciar.

2.- Historias

2.1. Historia 1

Yo como jugador novato quiero ver todos los Pokemon y en orden alfabético con su número, nombre, foto y tipo para conocerlos.

Criterios de aceptación:

• El usuario al acceder a la página podrá visualizar a todos los Pokemon.
• El usuario podrá ordenar en orden alfabético A-Z / Z-A.
• El usuario podrá ver su foto, su nombre y el tipo del Pokemon.
• La página se podrá visualizar en cualquier dispositivo.

2.2. Historia 2

Como jugador quiero poder filtrar por Tipo para conocer que Pokemon es de tipo "agua", "fuego" u otros tipos.

Criterios de aceptación:

• El usuario podrá Filtrar por Tipo de Pokemon
• El usuario podrá visualizar por lista los Pokemon que cumplan el filtro.
• Se podrá visualizar en cualquier dispositivo.

2.3. Historia 3

Como jugador quiero poder filtrar por Huevo para saber al momento de incubar por km recorridos, que Pokemon me pueden eclosionar.

Criterios de aceptación:

• El usuario podrá Filtrar por Huevo de aparición.
• El usuario podrá visualizar por lista los Pokemon que cumplan el filtro.
• Se podrá visualizar en cualquier dispositivo.

2.4. Historia 4

Como jugador quiero al clickear una tarjeta de Pokemon entrar a ver el detalle del Pokemon que me interesa para saber sus características y debilidades.

Criterios de aceptación:

• El usuario podrá clickear la tarjeta de Pokemon e ingresar a una sección nueva.
• El usuario podrá visualizar las características y debilidades del Pokemon.
• La página se podrá visualizar en cualquier dispositivo.

2.5. Historia 5

Como jugador quiero poder visualizar las evoluciones de cada Pokemon para saber cuántas y cuáles son las evoluciones que tienen antes y después.

Criterios de aceptación:

• El usuario podrá visualizar cuales son las evoluciones del Pokemon antes y después.
• El usuario podrá visualizar cada evolución con su número. nombre, imagen y tipo.
• Se podrá visualizar en cualquier dispositivo.

2.6. Historia 6

Como jugador quiero saber cuántos caramelos necesita un Pokemon para evolucionar.

Criterios de aceptación:

• El usuario podrá visualizar en sus características cuantos caramelos necesita para evolucionar.
• Se podrá visualizar en cualquier dispositivo.

2.7. Historia 7

Como jugador quiero saber el top 10 de frecuencia de aparición de los Pokemon para prepararme antes de salir.

Criterios de aceptación:

• El usuario podrá visualizar una tabla de posición con los que tienen mayor frecuencia de aparición.
• La página se podrá visualizar en cualquier dispositivo.

2.8. Historia 8

Como jugador nuevo quiero conocer algunos tips para que ayuden a subir de nivel, como evolucionar, entre otros.

Criterios de aceptación:

• El usuario podrá visualizar un listado de tips con Título, descripción y/o vídeo explicativo.
• La página se podrá visualizar en cualquier dispositivo.

---

3.- Proceso de Diseño

Para comenzar a diseñar la plataforma, ideamos 2 Tipos de prototipos, el baja fidelidad realizado en papel y lápiz, el de alta fidelidad utilizamos la herramienta de Figma

• El de baja fidelidad que nos ayuda a organizar a grandes rasgos los elementos que tendría la plataforma.
• El prototipo de Alta fidelidad para poder llevarlo al testeo de usabilidad con usuarios.

Puedes revisar nuestro prototipo de alta fidelidad también en Zeplin

3.1. Prototipos

3.1.1. Baja Fidelidad

3.1.2. Alta Fidelidad

Para conocer nuestro prototipo de alta fidelidad haz click aquí

Para interactuar con el prototipado puedes hacer click Aquí

3.2. Paleta de Colores

La paleta de colores se definió en base a la misma del juego "Pokemon Go", pero manteniendo un diseño minimalista y sencillo a la vista del usuario.

3.2.1 Colores Base

3.3. Tipografía

Utilizamos la fuente Roboto, que es una familia de fuentes del tipo Sans-serif, las cuales son del tipo de fuentes tipográficas sin adornos, pequeñas terminaciones o remates, recomendadas para usar en pantallas, para evitar sobrecargar o cansar la vista y facilitar la lectura.

4. Testeos de usabilidad

Utilizando el prototipo de alta fidelidad realizado en Figma, se realizó el testeo de usabilidad en Maze, finalizando con 19 usuarios y logrando recopilar respuestas en las que nos basamos para las mejoras en el proyecto final

4.1. Resultados testeo de usabilidad

• Encuentra el listado de Pokemon

Donde un 89.5% de usuarios lograron completar la misión de manera directa y un 10.5% encontró caminos alternativos para lograrlo.

• Filtra por tipo eléctrico

Donde un 89.5% de los usuarios lo completó de manera directa y un 5.3% lo logró por caminos alternativos y un 5.3% abandonó la misión.

• ¿Que tan complicado fueron las misiones anteriores?

Se le pidió al usuario seleccionar que tan complicado fue realizar las misiones anteriores, donde la escala fue "5 muy complicado" y "1 nada complicado" Logrando concluir que el 94% consideró que fue "nada complicado" las misiones de encontrar la Pokedex y Filtrar por tipo Eléctrico y un 6% poco complicado.

• Ingresa al detalle de Ivysaur

Donde intencionalmente se inició a los usuarios en la página inicial para aplicar todo lo anterior y poder acceder al detalle del pokemon Los resultaron fueron que un 77.8% lograron la misión directamente, un 22.2% logró la misión por caminos alternativos, recopilando que tanto ingresar por la pokedex, filtrado o por el buscador se lograba el objetivo principal.

• De las siguientes características, marca las que consideres que se cumplen en la última misión

Necesitábamos saber si la cantidad de información que estábamos presentando al usuario eran suficientes o si entendía.

Y según lo que recopilamos el 94% entiende que se puede acceder a un detalle, el 61% entiende la información y un 6% indica que falta información o datos complementarios, este último en la ultima pregunta logramos entender que faltaba para mejorar.

• ¡Ultima misión! Ingresa en el Ranking de frecuencia de aparición

El objetivo de la última misión era para saber si era de fácil acceso para el usuario y para recopilar si se entendía la información Donde un 88.9% logró completar la misión directamente y un 11,1% logró completarla por caminos alternativos.

• Con la información que te presentamos en el Home ¿Se entiende que es un Top 10 de frecuencia de aparición?

Según lo mencionado anteriormente un 83% indicó que si se entiende de que trata el Ranking versus un 17% que indicó que no se entendía, por lo que la pregunta final fue de suma importancia para entender todas las preguntas anteriores.

• ¡Ayúdanos a mejorar!

Decidimos realizar la pregunta abierta para que los usuarios nos pudieran contar como mejorar en base al testeo anterior, por lo que rescatamos algunos mensajes con detalles que consideramos importantes a destacar como:

4.2. Aspectos a mejorar

En base al análisis anterior creamos un listado con puntos a mejorar:

• Crear un botón de "Ver Detalles" para indicar al usuario que al clickear se accede a más información.
• Generar una glosa explicativa en la sección de ranking y cambiar la columna de Frecuencia de Aparición por Ratio de Aparición
• En el Home profundizar que es o hace cada sección.
• Aumentar el interlineado para facilitar la lectura
• Agregar un texto explicatorio en la sección ranking para mayor entendimiento del usuario.

Para futuras iteración, nos gustaría implementar:

• Tipos y Debilidades en español
• Información sobre Pokeparadas
• Información sobre objetos

Si quieres visualizar el sitio en su ultima actualización haz click en el siguiente enlace