- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Desarrollo del Proyecto
- 4. Contenido de referencia
- 5. Checklists
- 6. Autores
League of Legends es uno de los videojuegos MOBA (multijugador de arena de batalla en línea) más populares en todo el mundo, llegando a considerarse un e-sport de excelencia con competencias a nivel mundial, donde los mejores equipos de cada continente batallan por conseguir el cuantioso premio de hasta 1.7 millones de dólares.
Pese a su gran fama y accesibilidad, aún hay mucha gente que no se atreve a probar el juego por diversos factores, entre ellos el bombardeo de información no ordenada que confunde a los usuarios y finalmente desisten en jugar.
Este proyecto consiste en construir una página web que permita al usuario obtener información breve pero detallada sobre el juego League of Legends, así como filtrar, ordenar y ver los cálculos más importantes de los personajes (llamados “Campeones”) para que el usuario tenga mayor facilidad al momento de escoger a su campeón.
Inicialmente se entrevistó a 5 jugadores con experiencia en LoL para recibir inputs y tomarlos en cuenta en la interfaz. También se encuestó a usuarios sin experiencia en Lol para conocer qué tipo de información valorarían más, ya que ellos son el público objetivo.
Conforme se avanzó con el prototipo, se fue testeando con otros usuarios, midiendo su experiencia, hasta conseguir un diseño ideal.
En la elaboración del producto, se extrajo la data desde League of Legends - Challenger leaderboard y se utilizó el lenguaje Javascript, HTML y CSS. El resultado es una web informativa, dinámica, directa y responsive para mobile y desktop.
Se hicieron entrevistas vía telefónica a 5 usuarios con experiencia en el juego League of Legends.
Conocer qué tipo de información es necesaria para jugar LOL.
Hola, entrevistado, esta entrevista es para conocer sobre tu experiencia con el juego League of Legends. Nada de lo que digas está bien o mal, ni vamos a juzgarte por eso. Si en algún momento decides que no quieres continuar con la entrevista, puedes manifestarlo, no hay ningún problema.
- Nombre
- Edad
- Condición: estudiante, trabajador, etc.
- Distrito en que vive
- LOL Roundabout
- ¿Qué tan seguido juegas LOL?
- ¿Desde qué dispositivo juegas LOL?
- ¿Conoces alguna página web o aplicación informativa de LOL que te haya ayudado a jugar?
- ¿Qué te gusta y/o disgusta de esta página web o aplicación?
- Playing LOL Roundabout I: Beginning
- ¿Qué te hubiera gustado saber de LOL para entender mucho mejor el juego?
- Playing LOL Roundabout II: Starting
- ¿Cuáles son los criterios que tomas para elegir a tu campeón?
- De todo lo que hemos conversado, ¿hay algo que te gustaría conocer o añadir en una página web sobre LOL?
- A los jugadores de Lol les interesa saber de manera general en qué consiste cada rol, ya que de acuerdo a esto escogen las zonas y los personajes.
- Los jugadores de Lol necesitan saber qué campeones aplican a cada rol para armar estrategias en equipo.
- Les fue difícil encontrar una buena plataforma web que les brinde información completa del juego.
- Les gustaría tener mayor información sobre las competencias a nivel internacional.
Para tener un panorama más amplio de qué busca el usuario en este tipo de plataformas informativas, se hizo una encuesta a jugadores y no jugadores de League of Legends.
- LOL Roundabout I: About LOL
- ¿Juegas League of Leyends?
- ¿Sabes de qué trata el juego? (Si la respuesta es “no” pasar a la pregunta 5)
- ¿Fue fácil entenderlo?
- ¿Qué te ayudó o dificultó para entender el juego?
- ¿Qué te gustaría saber para entender mucho mejor el juego?
- LOL Roundabout II: Other games
- ¿Qué otros videojuegos o juegos en línea practicas?
- ¿Qué es lo que más valoras en los personajes de los juegos que mencionaste?
- ¿Conoces alguna plataforma que brinde información sobre tus juegos en línea favoritos? (Si la respuesta es “no” pasar a la pregunta 10)
- ¿Qué es lo que más te gusta de esta plataforma?
- ¿Qué tipo de información de gustaría obtener en una plataforma informativa de tus juegos en línea favoritos?
https://forms.gle/eTA8JDKyEXPQS71U6
- Un gran procentaje no juega League of Legends pese a tener mucha popularidad (87%).
- A un porcentaje significativo de los encuestados que juegan League of Legends se les dificultó entender el juego (37%).
- Todos han experimentado juegos del tipo MOBA.
- Más de la mitad de los encuestados no conocen plataformas informativas sobre sus juegos favoritos.
- A los usuarios les gustaría obtener información de qué consiste el juego, con breves videos, historias de los personajes, habilidades y debilidades.
- Los usuarios desearían encontrar una plataforma con información sobre el alcance internacional del juego.
Con las entrevistas y encuestas realizadas, pasamos a diseñar el prototipo de baja fidelidad:
Estos fueron los primeros diseños del home y la página Campeones. Se recibió el feedback de acortar los filtros, ya que causaban confusión y nos quedamos solo con los siguientes:
Se tuvo la idea de añadir una ventana modal para mostrar las estadísticas por campeón seleccionado.
En el feedback se comentó que la idea era buena, pero les gustaría ver este detalle en una ventana aparte, por lo que se reemplazó la ventana Novedades por Estadísticas. También se pidió añadir un botón de Jugar:
Con la nueva pestaña de Estadísticas, se pensó colocar información resumida de cada campeón en una tarjeta giratoria que permita ver la imagen en una cara y la información en otra:
En la pestaña Estadística se pensó colocar íconos de cada rol y que al dar click aparezca una ventana modal con cálculos promedio por rol:
También se aumentó información general del juego. Estas ideas fueron aceptadas en el feedback:
Trabajamos con la herramienta de diseño visual Figma, siguiendo los fundamentos de visual design (balance, contraste, alineación y repetición para mantener el orden).
PARA DESKTOP: 💻
PARA MOBILE: 📱
https://app.zeplin.io/project/5f5ef1fc4892306c9586c8e4.
Con el prototipo listo, se pasó a crear las Historias de Usuario, siguiendo el marco de trabajo Scrum que incluye también eventos como el Sprint Planning, Sprint Goal, Daily Scrum, Sprint Review y Sprint Retrospective.
Historia de Usuario 1: Como jugador de LOL quiero saber de qué trata el juego para tener una noción de la temática del juego.
Criterios de Aceptación:
- El usuario debe visualizar la pantalla de inicio.
- El usuario puede seleccionar distintos botones que lo deriven a las otras secciones de la página: ¿Qué es LOL?, Campeones, Juega Profesionalmente y Estadísticas.
- El usuario puede seleccionar el botón de Jugar.
Definición de terminado:
- Estructurar HTML semántico.
- El diseño debe ser similar al prototipo.
- La página debe ser responsive.
- Usar Eslint para corregir errores de código.
- Subir a GitHub.
El feedback que se recibió fue el de añadir botones que nos direccionen a las páginas oficiales de LoL y Riot Games, así como añadir más efecto visual.
Historia de Usuario 2: Como jugador de LOL quiero visualizar a los campeones disponibles según su rol para ver qué personaje me agrada y conviene más en cada rol.
Criterios de Aceptación:
- El usuario puede seleccionar el rol de su preferencia.
- El usuario puede visualizar los campeones que aplican a determinado rol.
Definición de Terminado:
- Se extrae las imágenes y la información de los campeones desde la data.
- El filtrado funciona.
- Realizar test de usabilidad (1o 2 usuarios).
El feedback que se recibió fue poner un fondo más llamativo y colocar alguna flecha que permita regresar a la parte superior de la página porque hay muchos campeones que hacen la página muy extensa.
Historia de Usuario 3: Como jugador de LOL quiero ordenar a los campeones disponibles según su nombre para encontrarlos rápidamente.
Criterios de Aceptación:
- El usuario puede ordenar los campeones según nombre.
- El usuario puede ver la imagen e información de los campeones.
Definición de Terminado:
- La función de orden es efectiva.
- Realizar test de usabilidad (1o 2 usuarios).
Historia de Usuario 4: Como jugador de LOL quiero conocer las estadísticas y descripción de cada rol para escoger el rol que más me convenga en la batalla.
Criterios de Aceptación:
- El usuario puede conocer los roles disponibles para los campeones.
- El usuario puede conocer cuantitativamente las principales fortalezas de cada rol.
Definición de Terminado:
- La interfaz debe mostrar los roles existentes.
- La interfaz debe mostrar una ventana modal con el promedio de estadísticas.
- La interfaz es responsive.
Historia de Usuario 5: Como jugador de LOL quiero obtener información sobre las competencias para proyectarme como jugador profesional.
Criterios de Aceptación:
- El usuario puede ver las competencias que existen en las distintas partes del mundo.
- El usuario puede conocer los requisitos para participar, entre otras características de las competencias.
Definición de Terminado:
- La interfaz debe mostrar información general de las competencias.
- La interfaz debe mostrar un video resumen de las competencias.
- Investigación con usuarios / entrevistas
- Principios de diseño visual
- Unidad de testing en curso de JavaScript en LMS.
- Unidad de arreglos en curso de JavaScript en LMS.
- Unidad de objetos en curso de JavaScript en LMS.
- Unidad de funciones en curso de JavaScript en LMS.
- Unidad de DOM en curso de Browser JavaScript en LMS.
- Array en MDN
- Array.sort en MDN
- Array.map en MDN
- Array.filter en MDN
- Array.reduce en MDN
- Array.forEach en MDN
- Object.keys en MDN
- Object.entries en MDN
- Fetch API en MDN
- json.org
- expressions-vs-statements
- expresión vs sentencia
- datos atómicos vs datos estructurados
- Modulos: Export
- Modulos: Import
- Editor en texto: Code.
- Herramienta de diseño visual: Figma.
- Repositorio de imágenes: Imgur.
- Web de íconos diversos: Flaticon.
- Git
- GitHub
- GitHub Pages
- Node.js
- Jest
- Usa VanillaJS.
- No hace uso de
this. - 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.
- Castro Alva, Ruth Smith.
- Flores Calla, Verónica.