En nuestro trabajo de Data Lovers decidimos elegir la opción del juego League of Legends(LOL), decidimos titularlo LUL Level Up League of Legends.
Data Lover es una web que contiene información principalmente sobre los personajes que puedes elegir para jugar LOL. Acá encontraras imágenes de los personajes y una descripción de cada uno de ellos y podrás filtrarlos para saber a que Tag pertenecen para poder jugar de mejor manera.
La planificación de nuestro sitio puedes encontrarla en el siguiente Link:
Nos enfocaremos a 3 tipos de Usuarios, los cuales fueron definidos por una encuesta. El primero es una persona que quiere comenzar un juego ó le han recomendado LOL pero no sabe si comenzar o no por que no tiene claro de que se trata.
El segundo tipo de usuario es una persona que ya descargo el juego pero no sabe que campeón elegir. Finalmente el tercer usuario es un jugador de LOL que por estrategia quiere comparar a los campeones.
Se realizaron encuestas para realizar las historias de Usuario
Puedes revisar la encuesta aquí
COMO USUARIO INDECISO QUIERO CONOCER LOL PARA COMENZAR UN JUEGO NUEVO Y DECIDIR SI DESCARGARLO CUANDO SEPA QUE ES INTERESANTE PARA MI.
COMO USUARIO QUE YA DESCARGO EL JUEGO QUIERO CONOCER QUE CAMPEONES EXISTEN PARA ELEGIR UNO Y COMENZAR A JUGAR.
COMO USUARIO QUE COMENZÓ A JUGAR RECIÉN QUIERO TENER LA INFORMACIÓN COMPLETA DE MI CAMPEÓN PARA SABER QUE EQUIPO Y RUNAS ELEGIR.
COMO USUARIO QUE COMENZÓ A JUGAR RECIÉN QUIERO COMPRENDER LA TERMINOLOGÍA DEL JUEGO PARA PODER JUGAR MEJOR.
COMO USUARIO QUE YA JUEGA LOL QUIERO COMPARAR LA INFORMACIÓN DE LOS CAMPEONES PARA TOMAR DECISIONES ESTRATÉGICAS.
-
Criterio de aceptación para historia de Usuario 1 : Que el usuario esté enterado de el juego y pueda conocer a los personajes para poder decidir. Para esto Subiremos un video explicativo del juego, También mostraremos imágenes del juego que servirán de link para nuestro sitio y otros sitios que puedan ayudarlos.
-
Criterio de aceptación para historia de Usuario 2: Que el usuario pueda reconocer a todos los campeones .Para esto mostraremos la imagen de cada uno de los 143 campeones y sus nombres
-
Criterio de aceptación para historia de Usuario 3: Que además de ver las imágenes de los campeones con sus nombre , el usuario tenga información detallada de ellos. Para esto al pinchar cada imagen del campeón se abrirá la información detallada de él. El usuario también podrá filtrar a los campeones por status
-
Criterio de aceptación para historia de Usuario 4: Mostrar al usuario los términos mas usados en el juego de forma clara y concisa. Para esto creamos un diccionario del juego
-
Criterio de aceptación para historia de Usuario 5: Que el usuario pueda comparar entre dos campeones Para esto mostraremos gráficos comparativos donde el usuario puede seleccionar los dos campeones que quiere comparar. También se mostrarán los tipos de estatus de los campeones donde podrán filtrar solo los nombres que necesitan ver.
Experiencia de usuario
Diseño
Puedes revisar LUL aquí
– | – |
– | – |
El prototipo de Alta Fidelidad fue realizado en Figma .
Aquí Puedes encontrar el prototipo de alta fidelidad .
- Prototipo de Baja Fidelidad
Se realizaron 4 pruebas con el prototipo de baja fidelidad de la que obtuvimos feedback sobre el diseño y amigabilidad del sitio, lo anterior fue modificado en el prototipo de alta fidelidad mostrado a continuación.
- Pruebas de Prototipo de Alta Fidelidad.
Se realizaron 4 pruebas con el prototipo de alta fidelidad, realizadas en loom ,estos pueden ser vistos en los links a continuación:
Ver Pruebas con prototipo de alta fidelidad
Se utilizó Vanilla JS, CSS , HTML y Boostrap.
En la interfaz logramos mostrar todas las imágenes y parte de la información de los campeones que se encontraban en la data permitiendo filtrarlos por categoría, lo que puede ser visualizado en distintos tamaños de pantallas móviles.
Checklist Obligatorio para el Proyecto
- Usa VanillaJS.
- No hace uso de
this
. - Pasa linter (
npm 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)
enREADME.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.