Data Lovers - Harry Potter

Índice

• 1. Definición del producto
• 2. Historias de Usuario
• 3. Prototipo de baja fidelidad
• 4. Prototipo de alta fidelidad
• 5. Tests de usabilidad
• 6. Interfaz de usuario

---

1. Definición del producto

El objetivo de esta aplicación es cubrir las necesidades de los fans de la saga de Harry Potter de conocer más acerca de ella. Para desarrollar esta aplicación se llevo a cabo una investigación de la cual se obtuvieron los siguientes resultados:

• Para los usuarios es importante conocer a los personajes de la saga Harry Potter, en especial los siguientes datos: Nombre, casa, género, fecha de nacimiento y fecha de muerte.

• Para los usuarios es importante conocer los hechizos y las pociones utilizadas a lo largo de la saga y algunos datos extra sobre ellos.

• Para los usuarios es importante conocer los libros que componen la saga de Harry Potter además de ciertos datos como autor y fecha de publicación.

• Finalmente se incluyen algunos datos adicionales para que el usuario pueda conocer un poco más sobre esta interesante saga.

2. Historias de Usuario

Con base en las entrevista realizadas a diferentes usuario se obtuvieron Historias de Usuario que fueron fundamentales para el desarrollo de esta aplicación.

• H1. Diseño de la página principal. El objetivo fue realizar una página principal que nos introduzca a la saga de Harry Potter mediante una pequeña introducción y de esta manera quien no tenga mucha información pueda conocer un poco de la misma y así comprender un poco mejor toda la información que el usuario verá más adelante dando click al botón.

• H2. Desplegar data en la pantalla. Al realizar las entrevistas conocimos que el usuario deseaba visualizar la data mediante cards para que la información que va a obtener sea más dinámica y fácil de comprender. La data desplegada comienza dandole al usuario el nombre de la card ya sea "character", "spell", "potion" o "book" para decidir si es la información requerida y en este caso al mantener el puntero sobre la card o en caso de usar otro dispositivo al dar click sobre la card esta le muestre al usuario más información.

• H3. Realizar un filtrado separando la data por "characters", "spells", "potions", "books" y "funfacts". La data que el usuario va a obtener se encuentra clasificada mediante un menu que le da al usuario las opciones de ver "characters", "spells", "potions", "books" y "funfacts" lo que le permitirá navegar en estas categorías para poder visualizar la información que necesita.

• H4. Realizar un filtrado que ordene la data de forma ascendente y descendente. Dentro del menu el usuario también tendrá la opción de ordenar la data de forma alfabética ya sea de A-Z o de Z-A. Esta opción únicamente se encuentra en los apartados de "characters", "spells" y "potions".

• H5. Realizar un cálculo agregado desplegado en gráficas. Para dar mayor información al usuario se agregaron dos gráficas tomando en cuenta lo que para ellos es importante conocer acerca de la saga como son personajes por casa y origenes mágicos de los personajes.

• H6. Realizar un buscador. Para facilitar la navegación dentro de la página se agregó un buscador para que el usuario pueda localizar más rapidamente la información que desea conocer. Al comenzar a ingresar las letras el buscador descartará la data que no las contenga.

3. Prototipo de baja fidelidad

4. Prototipo de alta fidelidad

Link a figma: https://www.figma.com/file/UiNnNkE06i74b8RHR6TmVC/Harry-Potter?node-id=48-98&t=RNxtwiLoo4usftBm-0

5. Tests de usabilidad

• Mejorar redacción.
• Dar estilo a textos.
• Modificar colores para tener mejor contraste.
• Ajustar el tamaño de las imagenes.
• Eliminar botones no necesarios.
• Hacer visible el menu.
• Poner fondos que permitan ver el contenido sin problemas.

6. Interfaz de usuario

Aquí mostramos como se visualiza, después de las modificaciones realizadas a los prototipos, el proyecto terminado.