💻 Visita la página en el siguiente link.
- 1. Definición del Producto
- 2. Historias de usuario
- 3. Diseño de la interfaz de usuario
- 4. Testeos de usabilidad
- 5. Referencias
Studio Ghibli es un estudio japonés de animación y es considerado como uno de los mejores estudios de animación del mundo. Nuestro producto es una interfaz que satisface las necesidades específicas de usuarias que desean conocer más información sobre este estudio, clasificando la misma en películas, personajes, ubicaciones y vehículos.
Tuvimos en cuenta la información proporcionada en la investigación breve de las necesidades de nuestras usuarias.
Establecimos los criterios de aceptación para cada historia, buscando una concordancia entre el producto y las necesidades, creando una plataforma responsive que, a partir de las siguientes historias de usuario:
-
Muestra cuántas y cuales son las animaciones de Studio Ghibli.
-
Permite filtrar las películas por director y conocer en una ficha técnica su poster, año de lanzamiento, productor, entre otros.
-
Cuenta con una sección de personajes que además de imágenes tiene información sobre su género, especie y edad.
-
Muestra información sobre las locaciones y los vehículos de las animaciones.
-
Ordena la información mostrada en cada categoría de la A a la Z.
Para el desarrollo de nuestra interfaz procuramos sostener ambos prototipos y replicarlos en la plataforma, teniendo un producto final muy similar al planteado.
Este primer prototipo muestra la estructura planteada para la página web en vista de escritorio.
A través de la herramienta figma, creamos un prototipo de alta fidelidad para móvil donde se muestra el menú responsive.
El diseño de la interfaz se fue refinando de acuerdo con el feedback recibido por nuestras compañeras y la interacción de otros usuarios con la página web. Recibimos feedback sobre la estética de la interfaz e hicimos ajustes en la imagen del banner principal, el menú de navegación y el despliegue de la data.
- La interfaz tiene un diseño responsive que muestra un menú hamburguesa para dispositivos más pequeños. La página principal muestra una barra de encabezado fija con el título Studio Ghibli y el menú, después de esto, sigue un banner principal y un mensaje de bienvenida. La información se muestra a través de tarjetas y estas contienen la información que es de relevancia para nuestras usuarias.
- En el proceso de creación agregamos un filtro por director para las películas y un botón que puede ordenar de la A a la Z cada una de las secciones de la página.
- Se muestran los personajes con la información requerida
- Se muestran los vehículos ordenados con la información requerida por nuestras usuarias.
- Finalmente incluimos un dato curioso, con el cálculo de un promedio que se puede conocer al dar click en el botón "dato curioso".
¡Te invitamos a visitar!🎦