- 1. Definición del producto
- 2. Historias de usuario
- 3. Diseño de la Interfaz de usuario
- 4. Tests de usabilidad
- 5. Implementación de la Interfaz de usuario
- 6. Pruebas unitarias
Trabajamos con la data disponible del Studio Ghibli. El objetivo fue crear una página que permitiera a usuarios tanto familiarizados con sus producciones, como a quienes aún no les conocían, un lugar donde encontrar información general clara y ordenada acerca de las películas, su equipo realizador y otros datos, como personajes.
Para el mejor desarrollo de nuestras historias de usuario, hicimos un formulario para identificar qué datos específicos resultaban los más relevantes para las posibles usuarias.
Dada esta información, pudimos definir que las usuarias podían ser tanto personas que ya conocían el trabajo de Studio Ghibli como quienes sabían poco al respecto y querían saber más. Además, los temas que se posicionaron como más relevantes, fueron las sinopsis de películas, datos sobre personajes y la inclusión de material gráfico.
En base a esto, trabajamos con las siguientes historias de usuario:
Al probar la implementación de nuestros diseños y recibir feedback de compañeras, identificamos varias posibles mejoras que aplicamos en el código. Los principales problemas y sus resoluciones fueron:
⌑ El botón de home se ve muy grande en pantallas más pequeñas, se agrega propiedad en css para disminuir tamaño en pantallas menores a 768px.
⌑ Los contenedores se extienden mucho con la data, se agrega propiedad scroll en css para facilitar la navegación en la página.
⌑ Los botones del navbar pierden su estilo en pantallas más pequeñas, se agrega propiedad en css para disminuir tamaño en pantallas menores a 768px.
⌑ El color del prototipo de alta fidelidad en el contenedor de "Fun fact" tiene poco contraste con los gráficos, se le cambia el color a uno que genera mas contraste.
⌑ El idioma de la página es español y el de la data es inglés, se le cambia el idioma a la página para que tenga más sentido con la data.
⌑ En la pantalla donde está el menú principal falta un header que contextualice la página en la que nos encontramos, cambiamos el logo que teníamos como footer al header y le dimos un estilo más distintivo.
Redactamos nuestros tests para probar la funcionalidad de los filtros de películas y personajes.
