CarlaSanchezCorrea / LIM014-data-lovers

Home Page:https://carlasanchezcorrea.github.io/LIM014-data-lovers/src/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Data Lovers - League of Legends

Team: Fernández Paula , Sánchez Carla 👩👩

1.- Introducción

League of Legends (LOL) es un video juego muy popular a nivel mundial y está compuesto por más de 140 campeones que son los personajes que te acompañarán en cada batalla que tengas para lograr tu objetivo final que es vencer a tus oponentes.

2.- Definición del producto 🔎

La página está dirigida a usuarios nuevos y también aquellos que ya tienen experiencia en el juego pero que necesiten información númerica de cuál campeón podrían escoger para sus próximas batallas y donde puedan resolver sus dudas sobre el juego. La información que se ha pensado poner en la página es sencilla de leer y queremos que la interacción del usuario con la página sea lo más didáctica al usarlo.

Asimismo, se hizo una investigación sobre otras páginas de diseño LOL, con el fin de recabar información y sacar conclusiones sobre qué elementos se podría incluir en el proyecto. En su mayoría, en las páginas lo que más resaltaba son los datos numéricos de cada campeón; es decir, su nivel de defensa, fuerza y habilidad que pueda servir al usuario elegirlo en las batallas.

3.- Prototipo de baja fidelidad ✍

Para iniciar con el diseño de la página se tuvo que dibujar en papel, la primera idea que teníamos para realizar el diseño y cómo queríamos plasmar las ideas en la hoja. Además, el prototipo de baja calidad nos sirvió para hacer varios posibles diseños y con ello lograr que podamos tener más claro cómo queríamos poner ciertas elementos en el Figma. Sin embargo, al momento de pasar al diseño en la web se tuvo que descartar algunas partes del dibujo que se hizo, ya que no quedaba muy bien cómo lo hubieramos imaginado.

4.- Diseño de la Interfaz de Usuario ✔

El diseño de la interfaz tomó una semana en armar el prototipo y a su vez pedir feedback a potenciales usuarios que va dirigido la página. Se quizo recopilar información acerca de los colores, el orden y la forma en cómo iba a ser la interacción con los filtros que se plantea colocar. Cabe mencionar que al transcurrir la primera semana, se siguió recibiendo feedback de detalles que se podían pulir y/o cambiar. Por ello, se presentará las imágenes de los diseños elaborados en la plataforma de figma, la cual nos ha permitido tener una visión más clara de cómo sería la página.

5.- Testeos de usabilidad

Después de los feedbacks realizados, se pudo obtener como observación agregar botones de orden de dificultad y por letra según el nombre del campeón. Debido a que los usuarios tenían la necesidad de buscar más rápido a sus campeones, es por eso que se implementó dos inputs que cumplan con la función de obtener respuestas más rápidas al momento de filtrarlo. También, por recomendación se redujo el tamaño de la barra de búsqueda para que se vea mejor encajado con los botones que estaban a lado. Por último, se cambió el idioma del español al inglés, ya que debía ver una armonía entre todo los elementos que componen la página y no generar con conflictos con el usuario, al momento de leerlo, ya que es mejor en un solo idioma.

About

https://carlasanchezcorrea.github.io/LIM014-data-lovers/src/


Languages

Language:JavaScript 98.3%Language:CSS 1.3%Language:HTML 0.4%