En este proyecto construimos una página web para visualizar un conjunto de datos que se adecúa a lo que nuestros usuarios necesitan.
En esta ocasión decidimos trabajar con:
-
[Pokémon]: En este set trabajamos con los 151 Pokémon de la región de Kanto, mostrando de la forma que analizamos mejor para nuestros usuarios del juego. Pokémon GO.
Nota: Debido a que la data se encuentra obtenida de la Primera Generación de Pokémon de la Región de Kanto, en los filtros de Tipo y Debilidades habrá algunos cambios. Dentro del filtro "Tipo" en las selecciones de "Acero" y "Hada" no aarecerá información porque estos tipos aparecieron recién con la Generación posterior. Asimismo, en el filtro "Debilidades" omitimos la opción "Normal" ya que este tipo no representa ningún daño a los otros tipos de Pokémon.
Invitamos a nuestros usuarios a ingresar al siguiente link que los llevará a disfrutar la experiencia de "PokéLovers"
PokéLovers (Link GH-Pages)
AL realizar los test de nuestras funciones obtuvimos desde un 75% de aprobación
Tomando en consideración los set presentados decidimos trabajar con la data de Pokémon Go, nuestro proceso de diseño contempla la realización de una aplicación web donde el usuario pueda ingresar y realizar búsqueda directa de todos los pokémon o de los diferentes tipos y la correspodiente tarjeta con toda la información por pokémon. Este producto ayuda a que nuestros usuarios puedan obtener la información necesaria para tomar mejores decisiones con respecto a escoger a sus Pokémon para la batalla, ya sea en Gimnasios o contra otros Entrenadores, y para Usuarios Novatos (aquellos que recién comienzan a jugar o se quieren interiorizar y conocer más de Pokémon) entregar una información clara sobre cada criatura de la Región de Kanto. Dentro de las consideraciones realizamos un sketch de diseño visualizando a grandes raasgos lo que pretendíamos realizar.
Historia 1:
Usuario Juzera: No es jugadora Pokémon Go (Novata)
Necesita: Conocer conceptos básicos (Pokémon, Pokédex, Tipo Pokémon)
Para: Poder entender de mejor manera la app web presentada.
Criterios de aceptación:
[X] Incluir en prototipo de Alta Fidelidad.
[X] Diseño de página (HTML, JS, CSS)
[X] Incuir secciones de información "Novato"
[X] Agregar información ¿Qué es un Pokémon?
[X] Agregar información ¿Qué es Pokédex?
[X] Agregar información ¿Qué es un tipo de Pokémon?
[X] Subir cambios Repositorio Git Hub.
Definición de Terminado: Se cumple con agregar información requerida en orden a lo propuesto en diseño de alta fidelidad, con breve y clara explicación para mejor entendimiento de usuarios novatos.
Historia 2:
Usuario Ariana: No es jugadora Pokémon Go (Novata)
Necesita: Visualizar un menú en el encabezado de la página.
Para: Poder moverse libremente dentro de la app web.
Criterios de aceptación:
[X] Incluir en prototipo de Alta Fidelidad.
[X] Diseño de página (HTML, JS, CSS)
[X] Incluir menú para navegación en sección Header de la página.
[X] Agregar Menú Desplegable (Novato y Entrendor)
[X] Agregar buscaor interno (ubicado en header)
[X] Subir cambios Repositorio Git Hub.
Definición de Terminado: Se agrega menú en heather, incluye "Menú Novato" (preguntas) y "Menú Entrenador" (pokédex y tipos)
Historia 3:
Usuario Sebastián: Jugador Pokémon Go.
Necesita: Conocer debilidades, imagen de nostalgia (Pokébola 8bit, Pokémon para Game Boy)
Para: Obtener mayor información sobre sus Pokémon para la batalla en Gimnasios, contra otros Entrenadores e Incursiones.
Criterios de aceptación:
[X] Incluir en prototipo de Alta Fidelidad.
[X] Diseño de página (HTML, JS, CSS)
[X] Incluir en diseño de página pokéball 8bit (marco)
[X] Crear tarjeta con información de cada pokémon.
[X] Agregar interacción, manejo de data, diseño y estilos.
[X] Subir cambios Repositorio Git Hub.
Definición de Terminado: Se agrega información detallada anteriormente, se incluyen pokébola 8bit como marco en esquinas de la página, se reordena imagen en ficha pokémon y, además se agrega cantidad de caramelos para evolucionar, información distribuida de forma más clara.
Dentro de los inicios de nuestro proyecto realizamos el diseño (sketch) del prototipo básico, el cual mostramos a continuación.
Al momento de realizar iteraciones con posibles usuarios realizamos el prototipo de baja fidelidad en el programa InVision, con el cual realizamos testeo en usuarios quienes nos proporcionaron información para mejorar este diseño y del cual pudimos obtener nuestras primeras Historias de Usuario.
Prototipo de Baja Fidelidad (link testeo loom)
Al obtener los feedbacks necesarios nos propusimos realizar los cambios sugeridos para así lograr una mejor experiencia para nuestros usuarios, éste diseño se asemeja bastante a nuestro diseño real.
Prototipo de Alta Fidelidad (link testeo loom)
En este diseño trabajamos con una tipografía simple 'Roboto; sans-serif' y 'Gill Sans MT'. Además tratamos de utilizar una paleta de colores simple y en relación con la temática, la cual mostramos a continuación.
Al iniciar nuestro proyecto no teníamos bien definido a nuestro usuario, esto lo decidimos apenas terminamos de diseñar el sketch (presentado anteriormente), con ello nos respondimos las siguientes preguntas para así ayudarnos a relizar los futuros diseños (baja y alta fidelidad)
-
¿Quiénes son los principales usuarios de producto?
Nos quisimos enfocar en que nuestros usuarios fueran principiantes, quienes jueguen Pokémon Go por primera vez o que hayan comenzado en el juego hace poco tiempo (niveles más bajos), y además a Jugadores que lleven tiempo con juego, los llamados Entrenadores.
-
¿Cuáles son los objetivos de estos usuarios en relación con el producto?
Los objetivos son claros, encontrar información sobre determinados pokémon (que el usuario escoja) y mostrarlos en detalle el nombre, número, peso, altura, aparición en huevos, debilidades, fortalezas y evoluciones de acuerdo a caramelos necesarios. Información completa que requieren los usuarios para poder tomar decisiones y así poder combatir en gimnasios y contra otros entrenadores.
-
¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
Los datos más relevantes que pretendemos ver y mostrar son los datos de los pokémon, pero adicionalmente nos interesa poder mostrar una pequeña introducción al mundo Pokémon a través de información al inicio y luego pasar a la Pokédex donde se muestran todos los pokémon y donde el usuario puede buscar, filtrar y escoger.
-
¿Cuándo utilizan o utilizarían el producto?
Este producto se utilizará cuando el usuario decida comenzar con la aventura de Pokémon Go o cuando requiera información que lo ayude en la toma de decisiones sobre qué pokémon es mejor a la hora de combatir, y así conocer las debilidades y fortalezas de sus rivales. Obteniendo ventaja de información y un mejor desempeño al momento de elegir a sus pokémon y combatir.
-
Investigación previa: Historias de Usuario.
Dentro del punto "Historias de Usuario" detallamos lo que obtuvimos como resultado de nuestra investigación, esto nos ayudó a redefinir el diseño para el prototipo de alta calidad y es con lo que trabajamos en el diseño de interfaz del producto final.
A todos nuestros usuarios les realizamos testeos de usabilidad, en primera instancia a nuestro prototipo de baja fidelidad y de acuerdo al feedback recibido por cada uno de ellos realizamos cambios en el diseño y logramos realizar el prototipo de alta fidelidad, con ello adicionalmente, al realizar el testeo con los usuarios realizamos entrevistas grabadas de la interacción de ellos con el prototipo. Éstas entrevistas la pueden revisar a continuación:
En nuestro proyecto definimos la utilización del tablero Trello para mayor organización en interacción de las tareas a realizar, se adjunta imagen y link del mismo.
Pokemon Lovers Trello (link tablero)
