POKEPEDIA

Te enseñamos datos que ni te imaginabas de los pokemones.

Definición del producto
Resumen
Consideraciones generales
Consideraciones técnicas
Contenido de referencia
Checklist

Definición del producto

Diseño de experiencia de usuario (User Experience Design)

Investigación con usuarios / entrevistas
- ¿Quiénes son los principales usuarios de producto?
- ¿Cuáles son los objetivos de estos usuarios en relación con el producto?
- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
- ¿Cuándo utilizan o utilizarían el producto?
Historias de usuario

Como usuario, quiero visualizar a todos los pokemones disponibles en cards.

Definition Of Done (DOD).
- Cuando el usuario acceda al producto, debe poder visualizar todas las tarjetas con la información básica de cada pokemón, si clickea estas cards, debe acceder a datos aún mas complejos.

Principios de diseño visual
- Fué importante que la interfaz a pesar de ser una versión mínima de nuestro ideal, siga los fundamentos de visual design.

Resumen del proyecto

NOTA: DESARROLLAR LA TEMÁTICA Y POR QUÉ LA ELEGIMOS, BASADA EN LO ANTERIOR

Una vez que definas tu área de interés, entiende quién es tu usuario y qué necesita saber o ver exactamente; luego podrás construir la interfaz que le ayude a interactuar y entender mejor esos datos.

Investigación
- Cuestionario
En el siguiente enlace se muestran los resultados obtenidos en una tabla

Ideación

Diseño de la Interfaz de Usuario

Prototipo de baja fidelidad
- Prototipo 1.1
Card completa
- Prototipo 1.2
Durante la segunda iteración (Segundo sprint), después del feedback recibido, se añadieron a UI otras características.
1. HOME PAGE
1. CARDS DE LA BUSQUEDA
1. CARDS CUANDO SE ORDENA POR TIPO
1. CARD PRINCIPAL, MUESTRA DATOS ESTADISTICOS
Prototipo de alta fidelidad
- PENDIENTE
Testeos de usabilidad
- DEMO con Marvel
- Entrevistas
Implementación de la Interfaz de Usuario (HTML/CSS/JS)

Consideraciones generales

Este proyecto se resolvió en dupla.
- Integrantes:
  - Minerva Meza Maldonado.
  - Leticia Vianey Lara Rangel.
Tiempo para completarlo: Fueron 3 semanas divididas en 3 sprints (una entrega del producto funcional al término de cada sprint).

Instalación
- ¿Cómo visualizo el producto final?
La demo del producto está disponible gracias al host de GitHub Pages.

Puedes acceder dando click al enlace que se encuentra en la cabecera de este repositorio y/o dando click aquí DEMO.

Detalles del proyecto

Metodología:

Fué usado el método Ágile por medio de tablero Kanban en papel para ser usado por el SQUAD de trabajo y con TRELLO para el tablero Kanban digital que usamos en dupla en el desarrollo del proyecto.
Herramientas:
- GitHub y GitHub Pages: Control de versiones y hosting.
- Trello: Organización y gestión de tareas.
- Figma: Prototipo de alta fidelidad.
- Marvel: Demo de prototipos de baja fidelidad (sketch).
- Editor de texto: Visual Studio Code.

Hacker edition

PENDIENTE

NOTA: CREAR UNA CARPETA Y LINKEAR ESTA INFORMACION.

Herramientas

Objetivos de aprendizaje

El objetivo principal de este proyecto es que aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el usuario necesita.

Dicho en palabras sencillas, aprenderás a:

Aplicar y profundizar todo lo que aprendiste en el proyecto anterior.
Pensar en las necesidades de los usuarios para crear historias de usuario.
Escribir y trabajar con historias de usuario, sus definiciones de terminado (definition of done) en la organización y planificación de tu trabajo.
Definir qué data y de qué forma mostrarla en el producto, basándote en tu entendimiento del usuario.
Crear productos que sigan los principios básicos de diseño visual y las heurísticas de usabilidad.
Iterar el diseño del producto, basándote en los resultados de los tests de usabilidad.
Manipular arreglos (arrays) y objetos (objects).
Manipular el DOM (agregar elementos dinámicamente basados en la data).
Manejar eventos del DOM para permitir interacción con el usuario (filtrado, ordenado, ...).
Entender los beneficios y complejidades de trabajar en equipo en un ambiente de incertidumbre.

Consideraciones técnicas

La lógica del proyecto está implementada completamente en JavaScript (ES6), HTML5 y CSS3.

En este proyecto NO fueron usadas librerías o frameworks, solo vanilla JavaScript, con la excepción de librerías para hacer gráficas (charts); ver Hacker Edition más arriba.