- Introducción
- Definición de usuario y sus necesidades
- Definición del Producto
- Diseño
- Prototipado
- Test de Usuario
A todo true gamer le ha pasado que cuando busca algo en específico pasa por MILES de páginas y miles de párrafos que le hacen perder VALIOSO tiempo de juego o de vida. Para esto llega POKE ME!(https://marielysis.github.io/SCL011-data-lovers/src/index.html), una aplicación complementaria al juego POKEMÓN GO, que te permite encontrar de manera rápida y fácil los datos de aparición de ese escurridizo pokemón que se niega a ocupar el espacio que le corresponde en tu pokedex.
Cuando abordamos el proyecto, nos propusimos solucionar necesidades de usuarios frecuentes de la aplicación POKEMON GO. Podríamos decir entonces, que nuestro primer acercamiento a un perfil de usuario apuntaba a un gamer experimentado, y que nuestro nicho yacía en lo que la aplicación no podía entregarles para completar una experiencia de usuario satisfactoria.
Basadas en el punto anterior, nos dirigimos a 4 usuarios que cumplieran con los siguientes requisitos:
1.- Ser usuarios frecuentes de POKEMON GO
2.- Entender las mecánicas del juego POKEMON GO
3.- Ser gamers experimentados y entendidos en la dinámica del mundo Pokemón
Debido a los tiempos, las entrevistas fueron documentadas de distintas maneras:
Karis Letelier (Entrevista vía audio whatsapp)
(https://soundcloud.com/user-817300132/entrevista-karis-letelier)
Carolina Soza (Entrevista vía audio whatsapp)
(https://soundcloud.com/user-817300132/entrevista-carolina-soza)
Continuación entrevista vía texto:
Enrique Arias (Entrevista vía texto whatsapp)
Gonzalo Moya (Entrevista vía texto facebook)
CONCLUSIONES: De las entrevistas pudimos concluir los siguientes puntos:
1.- Nuestros usuarios mayoritariamente son adultos.
2.- No tienen mucho tiempo libre.
3.- Les interesa la información acerca de la aparición de los Pokemones.
4.- Les interesa evolucionar e intercambiar Pokemones.
5.- Necesitan información exacta.
"Atraparlos mi prueba es, entrenarlos mi ideal"
¡TE PRESENTAMOS A NUESTRO USER PERSONA!
Antes de que comience el abucheo, DEBEMOS DECLARAR QUE NUESTRO PRODUCTO NO TIENE DISTINCIÓN DE GÉNERO, PERO HEMOS TOMADO A UN HOMBRE COMO USER PERSONA, BASADAS EN UN ESTUDIO QUE REALIZADO POR WEPC, una empresa que otorga soluciones tecnológicas a gamers, de manera didáctica y accesible para todos.
El punto específico de que tomamos de este estudio fue el siguiente:
Puedes saber más acerca del estudio en el siguiente enlace:
(https://www.wepc.com/news/video-game-statistics/#mobile-gaming)
Última actualización, Junio 2019.
Gerardo creció mirando animé y jugando videojuegos. De adulto, se niega a dejar ir esa parte de él que siente "lo mantiene joven", pero sabe que sólo puede dedicarles la atención que merecen en su poco tiempo disponible. Ya sea debido al trabajo o estudios, necesita liberarse del estrés y sacar a su niño interior de esta manera.
Al ser una persona con poco tiempo, valora mucho cuando la tecnología (arma de preferencia) le simplifica la vida diaria, sobretodo al momento de jugar. Es ahí cuando recurre a foros y páginas especializadas en los diversos temas que necesita saber para ganar algo de tiempo. Descarga apps y compra accesorios complementarios para tener una experiencia más completa del juego.
Con Pokemón, le pasa que siente una nostalgia especial. Recuerda esas tardes cuando llegaba del colegio a ver la serie, y luego jugaba con sus amigos a ser líderes de gimnasio para enfrentarse entre ellos y ganar medallas. Es por eso que cuando POR FIN llegaron a Chile los videojuegos POKEMON RED Y BLUE (videojuegos que se había informado, impulsaron la serie), los pidió a sus padres como regalo. Cuando finalmente pudo jugar, fue amor al primer intento. Se convirtió en un jugador experto, estudiando las mecánicas para poder convertirse en un criador Pokemón, dedicándole MUCHAS HORAS a este punto.
Cuando salió Pokemón GO, sintió que no podía dejar de jugarlo, pero ya no tenía el mismo tiempo que antes. Planifica su tiempo para jugar, y quiere lograr sus metas de forma rápida (atraparlos, evolucionarlos e intercambiarlos). Apreciaría mucho que la tecnología le ayudara a lograrlo.
• Mostrar los 150 Pokémons de la región de Kanto, según número de Pokedex.
• Filtrar Pokémons por spawn de mayor y menor aparición.
• Filtrar Pokémons por tipos.
• Ordenar los Pokémons por nombre (a-z) o spawn (menos a más).
• Mostrar información específica de aparición de los Pokémons a través de tarjetas.
• Promedios aplicados en Pokémons comunes y raros (se hizo un promedio para esta separación)
• Diseño responsive.
• Tests pasan.
Teniendo en cuenta lo anteriormente expuesto, concluímos que el producto que necesitan nuestros usuarios es una app que se pueda utilizar desde un dispositivo movil, y que permita al usuario encontrar de manera rápida y fácil los datos de aparición del pokémon que necesita.
Para cubrir las necesidades del usuario, nuestra app tiene que cubrir las siguientes necesidades:
1.- Mostrar los datos de aparición de los Pokémons (spawn chance, avg spawn, spawn time)
2.- Filtrar por tipo.
3.- Mostrar ubicación de Pokémons.
4.- Permitir intercambio de Pokémons.
Proponemos una app directa y simple, en donde al entrar en la app, se encuentren dos botones principales:
1.- El primero que llame a los Pokémons con mayor avg spawn.
2.- El segundo que llame a los Pokémons con menor avg spawn.
Ambos resultados han sido producto de un cálculo que permitió clasificarlos en "comunes" y "raros".
Adicionalmente, con estos dos botones damos solución inmediata a una de las primeras necesidades de nuestros usuarios, conocer cuales son los Pokémons con mayor y menor avg spawn y sus respectivos datos.
En el menú de la página ubicaremos los filtros y el orden. Debemos incluir prioritariamente el filtro por tipo, ya que es el método que mayor importancia dieron nuestros entrevistados.
Para mostrar la ubicación de los Pokémons, incluiremos un mapa que muestre su ubicación en la parte inferior de la página.
Hablaremos del intercambio de Pokémons en la sección "Próxima Iteración".
Puedes revisar nuestra planificación en Trello en el siguiente link: (https://trello.com/b/nR9I0atM/tablero-data-lovers)
Para comenzar el proceso de diseño, decidimos empezar diseñando la interfaz para dispositivos moviles, ya que nuestro usuario juega POKEMON GO a través de plataformas móviles, por lo que sería cómodo para ellos que la información que les proveeremos con POKE ME! sea a través de la misma manera.
Comenzamos con una idea muy simple y directa. Sin distracciones y lista para usar.
Acá fuimos detallando más la información que llevaría cada sección. El wireframe sirvió para testear a 2 usuarios, que no encontraron problema alguno en la navegación.
Al querer enfocarnos en no distraer al usuario, decidimos utilizar fondos neutros, una única fuente con muchas variantes, idealmente san serif y que fuera similar a la utilizada en la interfaz de POKEMON GO. Detallamos más a continuación:
Imágenes
Queríamos darle un toque único a la aplicación, rescatando esa nostalgia de muchos al ver la serie ahí por el año 1999. Debido a este último punto, trajimos de vuelta esas ilustraciones, con calidad superior a la de ese entonces, y dándole un papel protagónico en nuestra app.
Color
El color que escogimos como principal, fue el turquesa, por poseer dos cualidades: ser animado y ser relajante. Nuestra idea es invitar al usuario a pasar un rato divertido, no es estresarlo con más estímulos.
Formas UI
Todos los elementos siguen una forma orgánica, evitando, dentro de lo posible, las formas afiladas. De esta manera creamos lo que visualmente serían zonas cómodas.
Tipografía
La familia que elegimos fue "Roboto", por ser similar a "Lato", tipografía usada en POKÉMON GO. Recordemos que no queremos ser iguales.
A partir de las desiciones de diseño previamente mencionadas, comenzamos a diseñar nuestro prototipo de alta fidelidad. A continuación puedes ver las imágenes, pero si deseas probar el prototipo interactivo, puedes verlo acá:
(https://www.figma.com/file/dZdKbCjrDu6D8I22OntLF4/Poke-Me?node-id=0%3A1)
NO PUDIMOS INTEGRAR FIGMA CON ZEPLIN PORQUE NO PUDIMOS INSTALAR ZEPLIN DEBIDO AL SISTEMA OPERATIVO VIGENTE EN NUESTROS COMPUTADORES.
Después de mucho trabajo y esfuerzo, nuestro prototipo final, se ve así:
(https://www.loom.com/share/a63deb9aee70411f9b1d6b572fdda227)
El feedback recibido, nos hizo concluir lo siguiente:
1.- Tener cuidado de cómo mostramos la información para no desanimar al usuario.
2.- Sería óptimo diseñar una sección para explicar la información de los pokémons para que sea comprensible al usuario.
3.- Agregar más datos, como evoluciones.
4.- Re evaluar color de fondo por otro un poco más oscuro para distinguirlo de las mini cards.
5.- Limpiar los selects para no confundir con información.
6.- Revisar por qué se duplican resultados en algunas opciones.
7.- Es necesario implementar los modales en el resto de los pokémons.
8.- Re evealuar el botón "más...". Quizás subirlo más o incluir el "más..." dentro de la mini card.
9.- Hacer más consistente el estilo de las ilustraciones con el mostrado en las mini cards.
10.- Sacar el menú si no otorga información alguna.
Debido a las necesidades de nuestros usuarios, para próximas iteraciones podríamos considerar lo siguiente:
1.- Que el diseño se parezca aún más a nuestro prototipo Figma.
2.- Mostrar la información de manera tal que sea más amigable con el usuario.
3.- Mostrar evoluciones en modal.
4.- Limpiar los selects.
5.- Mostrar modales en todos los pokémon.
6.- Ver posibilidad de manipular la data para reemplazar las ilustraciones por otras que se ajusten más a lo que apuntabamos.
7.- Trabajar con menu en vez de selects.
8.- Trabajar con banco de datos de pokemones deseados, otorgados por usuario.
9.- Trabajar con el GPS del celular y así indicarle al usuario cuando un Pokémon que desea, está en el área.
10.- Permitir intercambio y comparación de Pokémon.
Después de unas semanas trabajando en el proyecto, queremos proponerte una segunda parte que se adapte a tu proceso de aprendizaje individual. Esto permitirá que consolides, profundices y/o complementes lo aprendido.
Las alternativas son las siguientes:
Pues termínala ¿no? No te olvides de que estás acá para aprender y no para simplemente "pasar" de un proyecto a otro y tener la ilusión de que aprendes. No estás compitiendo con nadie más que contigo misma.
Completa el proyecto original con todo lo que se especifica en la parte obligatoria.
Tienes estas opciones:
2.1. Haz la "Parte Opcional" (Hacker Edition).
Enfócate en los dos puntos principales: cargar la data usando fetch
y/o agregar gráficas con Chart.js
o Google Charts. Si ya hiciste esto,
pasa a las siguientes opciones (obviamente).
2.2. Si quieres explorar un poco más sobre el Diseño de Experiencia de Usuario (UX Design), te proponemos hacer sesiones de testeo de usabilidad con usuarios y una evaluación heurística de tu sitio completo. Recuerda incorporar aprendizajes y oportunidades de mejora en tu readme. Haz una búsqueda de referentes de diseño visual para tu sitio que te sirvan de inspiración para resolver desafíos de interfaz. A partir de todos estos aprendizajes de usabilidad y diseño visual, trabaja en una iteración de la interfaz de tu sitio.
Así podrás, además, reforzar tus conocimientos sobre heurísticas de usabilidad y principios de diseño visual.
2.3 Si quieres profundizar sobre lo ya aprendido de Front-end y codear un poco más, elige otra fuente de datos para hacer otro "Producto". Por ejemplo, si hiciste una visualización con datos del Banco Mundial, puedes aplicar todo lo aprendido para, esta vez, hacer una sobre Pokémon.
2.4 Refactoriza tu código para aumentar la cobertura de tests (incluyendo pruebas para componentes de interfaz).
-
Esta segunda parte del proyecto es individual, salvo alguna excepción que decida tu Training Manager.
-
Es responsabilidad de lxs coaches y la Training Manager, después de las entrevistas del final del proyecto original "Data Lovers", aconsejar y validar qué opciones de todas las detalladas en este
README.md, se adecúan más a cada estudiante.
Para actualizar tu fork/rama de este proyecto con este archivo (EXTRA.md),
puedes hacer pull de los cambios desde la rama master del remoto de
Laboratoria con un comando como el siguiente:
git pull <repo-url> <branch>Por ejemplo, si el repo de tu cohort es
https://github.com/Laboratoria/lim-2018-11-bc-core-am-data-lovers.git:
git pull https://github.com/Laboratoria/lim-2018-11-bc-core-am-data-lovers.git master