League of Legends es actualmente el juego más jugado del mundo. Recientemente los datos nos muestran que hay 100 millones de jugadores activos mensualmente. Desde la creación de ligas de competición profesionales el juego y su comunidad han crecido año tras año. Pero más que datos, vamos a centrarnos en explicar qué es League of Legends y por qué gusta y emociona a tantas personas de todo el mundo. El juego está inspirado en el popular mapa personalizado del Warcraft III, Defense of the Ancients: Allstars diseñado por Steve «Guinsoo» Feak el cual a su vez está basado en el escenario de StarCraft «Aeon of Strife».
En este proyecto construimos una página web para dos tipo de user person: Nivel Avanzado y principiante. Este set de datos muestra la lista de jugadores en una liga del juego League of Legends (LoL). Primero elegimos quién sería nuestro usuario y qué necesita saber o ver exactamente; luego construimos una interfaz que le va ayudar a interactuar y entender mejor esos datos. Nuestra página web permitirá visualizar la data, filtrarla, ordenarla, cuenta con un buscador y una sección de estadísticas para que el usuario pueda comparar las estadísticas de los campeones que desee.
Los usuarios a los que este proyecto va dirigido son aquellos jugadores de nivel avanzado de Lol y/o personas que se inician (jufadores principiantes) en el mundo de “League of Legends” y quieren conocer más de los campeones con los que este MOBA (multiplayer online battle arena) se desarrolla.
Encuesta en google form de usuarios del Juego, para definir requerimientos.
Entrevista a 3 Jugadores de Nivel Avanzado
A continuación les comentamos un poco más sobre los 2 tipos de User-Person que elegimos.
User Person Nivel Principiante
User Person Nivel Avanzado
El usuario entrevistado es un jugador avanzado de League of Legends, conoce el juego desde hace mucho tiempo. Durante la entrevista el usuario hizo hincapié en la cantidad de campeones que se pueden usar en el juego, nos comentaron sobre runas, objetos. La diversidad y cantidad de todos los personajes hace complicado para un jugador principiante el poder reconocerlos y asociarlos con sus roles, habilidades, dificultad, etc, es por ello que también nuestra página tiene un segundo user person a considerar: nivel principiante, los cales si pudiesen visualizar la información de los héroes como sus nombres e imágenes, la dificultad de uso mejora. Por ejemplo visualizar los tipos de roles de los campeones (assassin, fighter, mage, marksman, support, tank) e información extra como los puntos de vida y de maná de cada campeón por niveles, está seguro que le facilitaría a desarrollarse mejor en el juego.
Hicimos nuestra planificación en Trello: Product Backlog, Sprint Backlog. Les compartimos nuestro link de esta herramienta:
-
INICIO: YO COMO jugador de LOL, QUIERO: que la página tenga una presentación PARA conocer las partes de la página
-
GUÍA DE CAMPEONES YO COMO: Jugador de nivel intermedio - avanzado de lol QUIERO: una guía avanzada PARA: buscar información relevante para mi juego (runas, objetos, posiciones)
-
BARRA DE FILTROS. YO COMO jugador de LOL QUIERO filtrar a los campeones por su rol("Fighter", "Tank", "Mage", "Assassin", etc) PARA elegir con qué campeón pelear.Yo como usuario quiero poder filtrar a los campeones por sus roles para poder identificarlos y poder conocerlos.
-
ORDER. YO COMO jugador de LOL QUIERO ordernar a los campeones desde A-Z y de Z-A, PARA encontrar el campeón que quiero.
-
ESTADÍSTICAS. YO COMO: Jugador de lol QUIERO hacer una comparación del mana, vida y ataque de mis campeones PARA evaluarlos según el nivel del juego
-
FILTRO DAÑO-ATAQUE: YO COMO jugador de LoL QUIERO filtrar a los campeones, por nivel daño-ataque PARA facilitar la fase inicio de mi ataque a mi contrincante.
-
CARACTERÍSTICAS DEL CAMPEÓN. YO COMO: Jugador de lol QUIERO: ver las características de cada campeón. PARA: Conocer mejor las características de mi campeón.
Debido a que contamos con la data, la idea de producto es una página web que le brinde a nuestro usuario con experiencia de juego, una guía de campeones y para aquellos usuarios principiantes secciones donde puedan conocer más sobre los campeones de League of Leyends de un modo sencillo, que le permita visualizar, buscar, ordenar, hacer comparaciones, ver características de sus campeones y filtrar la data según sus requerimientos.
Pantalla 1 Mobile-Responsive
Pantalla 2 Mobile-Responsive
Pantalla 3 Mobile-Responsive: Recibimos feedback, nos sugirieron agrandar el buscador y filtro por daño de ataque.
Pantalla 1-Desktop
Pantalla 2-Desktop
Recibimos feedback y se decidió eliminar la pantalla SOUNDTRACK porque no tenía usabilidad.
Primero realizamos la página de inicio, donde el usuario avanzado encontrará una guía que le redireccionará a páginas que le brindarán información sobre runas, objetos y temás de interés relacionado al juego. El usuario podrá visitar una sección de campeones, donde encontrará una lista de campeones de League of Legends. De manera resumida mostraría a cada uno como cards con una imagen y su respectivo nombre, a su vez en la parte superior se vería un listado de los tipos de roles de los campeones para filtrar la data, un buscador, filtro por daño de ataque, que según encuesta es de interés del usuario. Además, según la investigación con el usuario, se decidió agregar una funcionalidad para ordenar a los campeones de A hasta la Z y viceversa. En el desarrollo del proyecto se realizaron varios tests de usabilidad, se comprobó que el botón playnow no se apreciaba, así que se decidió mejorarlo. Además el buscador era muy pequeño en versión responsive, por lo que se decidió que ocupe el ancho de la pantalla (versión mobile). Por otro lado la sección soundtrack no tenía funcionalidad, es por ello que se retiró del proyecto. Los tests de usabilidad demostraron que la página necesitaba dinamismo, es por ello que se implementó la visualización de la información de todos los campeones con un modal. La última sección es de estadísticas, en la cual se decidió hacer una comparación de data importante para el usuario, entre los campeones, y resaltar al campeon del que el usuario quisiera revisar sus indicadores con una transición.
El prototipo de alta fidelidad fue elaborado en Figma con la ayuda del Zeplin.