Poke Fans

Desarrollado por Lorena Marroquín y Yurany Toloza

Índice

• 1. Definición del producto
• 2. Investigación UX
• 3. Historias de usuario
• 4. Prototipos
• 5. Diseño final del producto
• 6. Test de usabilidad
• 7. Pruebas unitarias
• 8. Checklist

---

1. Definición del producto

Esta es una aplicación web enfocada en el juego Pokemon GO para usuarios principiantes e intermedios, con el objetivo de que los usuarios puedan conocer más a los pokemones en aspectos como nombre, número, imagen, tipo, habilidad y así elegir a los mejores pokemon para sus estrategias de juego.

2. Investigación UX

Para conocer mejor a nuestros usuarios y sus preferencias, realizamos una investigación UX por medio de la siguiente encuesta:

Los hallazgos de esta investigación fueron:

• Los principales usuarios de nuestro producto son personas con niveles principiantes e intermedios en Pokemon Go.
• Los principales objetivos de los usuarios son conocer más a los pokemones en aspectos como nombre, número, imagen, tipo y habilidades, para elegir a los mejores pokemones en sus estrategias de juego.
• Los datos más relevantes para nuestros usuarios en un producto web de Pokemon son: nombre, número, imagen, tipo y habilidad.

3. Historias de usuario

• UH-1: Yo como usuario quiero ver una página de bienvenida con opciones de navegación para poder navegar fácilmente de acuerdo a mis intereses

• UH-2: Yo como usuario principiante quiero ver a los pokemos en tarjetas donde se visualice su información básica (nombre, numero, imagen) para conocer a cada pokemon.

• UH-3: Yo como usuario intermedio quiero poder tener la opción de organizar a los pokemon por nombre y numero. quiero poder ver a los pokemon en tarjetas con información adicional como (habilidad, tipo, peso y altura).

• UH-4: Yo como usuario intermedio quiero poder clasificar a los pokemon por tipo para así poder elegir a los mejores pokemon.

• UH-5: Yo como usuario intermedio quiero poder ver un gráfico de promedio de defensa y de ataque de los pokemon para conocer estadisticas y datos curiosos.

4. Prototipos

Nuestro proyecto se enfoca en el diseño del aplicativo móvil de Pokemón GO, por lo que se manejan los colores de los mapas de la aplicación dentro de toda nuestra página web. Se realizaron los sketch y diseños de la interfaz de nuestro producto para sitio web y para mobile.

Prototipos de baja fidelidad

Web

Mobile

Prototipos de alta fidelidad

EL diseño de nuestra interfaz busca acercar al usuario al juego Pokemon GO, teniendo en cuenta sus colores y los mapas usados dentro de la aplicación.

Ver todos los prototipos de alta fidelidad.

Web

Mobile

5. Diseño final del producto

El diseño final de nuestra aplicación respeta el diseño de la interfaz planteado en los prototipos y se encuentra publicada en GitHub Pages.

Página web PokeFans.

Web

Mobile

6. Test de usabilidad

A continuación se presentan los problemas encontrados en los test de usabilidad:

• Los colores usados en la barra de navegación y los títulos en la página principal diferían entre sí.
• Usar el cambio de forma en el cursor al pasar por los botones, para hacer evidente que eran botones y que se podían usar.
• En el diseño de las modales se veían los bordes muy redondeados y no contrastaban correctamente con el diseño general de la página.
• Los nombres de los pokemones se encontraban en minúscula por lo que era mejor manejar las mayúsculas para respetar la escritura de los nombres.

Mediante los test de usabilidad pudimos encontrar varios aspectos a mejorar en nuestro producto, los cuales fueron tenidos en cuenta, por lo que se hicieron todas las mejoras correspondientes a los problemas encontrados y de esta manera hacer más amigable la interfaz de usuario.

7. Pruebas unitarias

Se realizaron las respectivas pruebas unitarias a todas las funciones que hacían parte del código y se alcanzó un coverage del 100%.

8. Checklist

• Uso de Fetch.
• Usa VanillaJS.
• Pasa linter (npm run pretest)
• Pasa tests (npm test)
• Pruebas unitarias cubren un mínimo del 70% de statements, functions y lines y branches.
• Incluye Definición del producto clara e informativa en README.md.
• Incluye historias de usuario en README.md.
• Incluye sketch de la solución (prototipo de baja fidelidad) en README.md.
• Incluye Diseño de la Interfaz de Usuario (prototipo de alta fidelidad) en README.md.
• Incluye link a Zeplin en README.md.
• Incluye el listado de problemas que detectaste a través de tests de usabilidad en el README.md.
• UI: Muestra lista y/o tabla con datos y/o indicadores.
• UI: Permite ordenar data por uno o más campos (asc y desc).
• UI: Permite filtrar data en base a una condición.
• UI: Es responsive.