Studio Ghibli es un estudio de animación japonés, conocido por sus largometrajes animados como Mi vecino Totoro, El viaje de Chihiro o El castillo ambulante, entre otros grandes éxitos.
Las animaciones tienen gran acogida a nivel mundial y algunas han recibido varias nominaciones y premios. De todo este fandom hay un grupo que desea poder interactuar y ver la información de las animaciones y sus personajes.
Definición del producto
Este producto está dirigido a fans o posibles fans de Studio Ghibli que esten interesados en revisar información sobre las películas y personajes, también podrán encontrar una trivia para poner a prueba su conocimiento y una breve introducción al estudio.
Para entregar una experiencia grata, los colores y diseño del sitio se escogieron pensando en el usuario y en la temática. La paleta de colores e imágenes utilizadas se basaron en referencias extraidas desde sitios oficiales y de las películas.
-
HU1
- Como: Fan de Studio Ghibli
- Quiero: Ver todas las peliculas hechas por Studio Ghibli en pantalla.
- Para: Revisar si he visto todas las películas que han hecho.
Criterios de aceptación
- Ver todas las películas por pantalla.
- Cada película debe contener información general.
Definición de terminado
- Los elementos se muestran alineados.
- Se muestran todos los elementos de la data.
- Se muestra la información correspondiente a cada elemento.
- Diseño responsive.
- Test unitario.
-
HU2
- Como: Fan de un director (cualquiera) de Studio Ghibli.
- Quiero: Filtrar las películas por director.
- Para: Ver solo las películas de mi director favorito.
Criterios de aceptación
- Mostrar las películas con su imagen, director, puntuación ,fecha de lanzamiento y productor.
- Poder filtrar las peliculas por director.
- Ver solo las películas del director que se escogió.
Definición de terminado
- Que haya un filtro con opciones de directores de los que el usuario pueda escoger.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se oculten el resto de las películas y que solo se muestren las filtradas.
-
HU3
- Como: Fan de un productor (cualquiera) de Studio Ghibli.
- Quiero: Filtrar las películas por productor.
- Para: Ver solo las películas de mi productor favorito.
Criterios de aceptación
- Mostrar las películas con su imagen, director, puntuación ,fecha de lanzamiento y productor.
- Poder filtrar las peliculas por productor.
- Ver solo las películas del productor que se escogió.
Definición de terminado
- Que haya un filtro con opciones de productores de los que el usuario pueda escoger.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se oculten el resto de las películas y que solo se muestren las filtradas.
-
HU4
- Como: Estudiante de animación.
- Quiero: Ver todas las películas de el estudio en orden cronológico.
- Para: Ver la evolución en las animaciones.
Criterios de aceptación
- Ver todas las películas de Ghibli al ingresar a la sección "movies".
- Poder ordenar las películas de más nueva a más antigua.
- Poder ordenar las películas de más antigua a más nueva.
- Ver las películas con su imagen, director, puntuación ,fecha de lanzamiento y productor.
Definición de terminado
- Que exista un botón que ordene las películas dependiendo de la elección del usuario.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se muestren las películas en orden cronológico.
-
HU5
- Como: Fan de Ghibli.
- Quiero: Conocer todas los personajes que hay por película.
- Para: Aprender más sobre los personajes de Ghibli.
Criterios de aceptación
- Poder escoger una película para filtrar.
- Ver todos los personajes de la película escogida.
- Ver los personajes con su imagen, nombre, género, edad y color de ojos.
Definición de terminado
- Que exista un botón que filtre por película dependiendo de la elección de usuario.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se muestren los personajes de la película escogida y que se oculte el resto.
-
HU6
- Como: Fan de Ghibli.
- Quiero: Conocer todas las especies de los personajes de las películas de Ghibli.
- Para: Aprender más sobre Ghibli.
Criterios de aceptación
- Ver todos los personajes al ingresar a la sección "characters".
- Poder escoger una especie para filtrar.
- Ver todos los personajes de la especie elegida.
- Ver los personajes con su imagen, nombre, género, edad y color de ojos.
Definición de terminado
- Que exista un botón que filtre por especie dependiendo de la elección de usuario.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se muestren los personajes de la especie escogida y que se oculte el resto.
-
HU7
- Como: Fan de Ghibli
- Quiero: Ordenar los nombres de los personajes de A-Z o viceversa.
- Para: Poder revisar la sección de personajes de forma ordenada.
Criterios de aceptación
- Ver todas las películas de Ghibli al ingresar a la sección "characters".
- Poder ordenar los nombres de los personajes alfabéticamente.
- Ver a los personajes con su imagen, nombre, género, edad y color de ojos.
Definición de terminado
- Que exista un botón que ordene los personajes dependiendo de la elección del usuario.
- Test unitarios.
- Diseño responsive.
- Se muestras los elementos de forma alineada y ordenada.
- Se muestra la informacion relevante del elemento.
- Que se muestren las películas en orden alfabético.
-
HU8
- Como: Fan de Ghibli.
- Quiero: Tomar una trivia interactiva.
- Para: Aprender más sobre Ghibli y divertirme.
Criterios de aceptación
- Debe haber una trivia.
- Al marcar una alternativa, se debe revelar si mi elección estuvo correcta o incorrecta.
- Diseño atractivo e interactivo.
Definición de terminado
- Que exista una sección de trivia.
- Test unitarios.
- Diseño responsive.
- Se muestran los porcentajes que justifican la respuesta correcta.
- Se marca la alternativa correcta de color verde y la incorrecta de color rojo.
El prototipo de baja fidelidad se creó pensando en una sola pantalla que mostrara todos los filtros y los resultados de estos.
-
Prototipo de baja fidelidad
-
Prototipo de alta fidelidad versión 1
El prototipo de alta fidelidad se diseñó a partir del prototipo de baja fidelidad con una sola pantalla que mostrara todos los filtros y los resultados; con colores frios/sobrios y serios, sin tomar en cuenta la temática de la data.
Luego, al diseño de alta fidelidad se le agregó un elemento extra para mostrar la información de la película o personaje a través de un efecto hover.
.png)
Luego de terminar casi toda la funcionalidad y el diseño del sitio se decidió volver al proceso de diseño debido al feedback que recibimos. Al terminar el sprint 3 se rediseñó el sitio por completo, para darle colores llamativos y acordes a la temática para que el usuario tuviera una mejor experiencia. También se agregaron más secciones como un home, about, more y trivia, para hacer el sitio más interactivo.
Se escogieron distintos headers para cada sección con imagenes de las películas y de los personajes. Se agregó un footer con una imagen relacionada a la temática, se suavizaron los bordes de los elementos para darles una apariencia más acogedora.
Luego de tener el diseño del sitio web terminado, se realizó el diseño responsive para celular. Se reemplazo el nav con los botones por un menú hamburguesa. También se ajustaron los tamaños de todos los elementos (letra,imagenes, header, botones,etc) para que se ajustaran a pantallas de diferentes tamaños.
Gracias al feedback recibido durante una demo, se descubrió un problema de diseño, por el cual se decidió cambiar el diseño de sitio. Durante un test de usabilidad se detectó un elemento que no era util para el usuario, ya que entorpecía el flujo. Por ende se decidió quitarlo. También se detectó un problema con el tamaño de la letra en ciertas areas de sitio, por lo que se cambiaron los tamaños de las mismas.
- Filter
- Sort
- Cálculo agregado (trivia)
Alison León y Vanessa López