Ghibli Lovers es una aplicación web para explorar las películas y personajes del Estudio de animación Ghibli, además de que permite ordenar y filtrar las películas por orden alfabético, directores, y los personajes por edad y género.
Definimos cuatro historias de usuaria que guiaron el diseño de nuestra aplicación:
-
HU1: Yo como usuarix que hace mucho dejé de ver Ghibli quiero ponerme al dia de todas las peliculas nuevas que hay para saber cuántas películas me faltan ver.
-
HU2: Yo como fanática del cine quiero filtrar las películas Ghibli por directores y productores para saber cuántas y cuáles son las animaciones a las que dieron vida.
-
HU3: Yo como dibujante quiero poder ver a los personajes femeninos para inspirarme a dibujar como Ghibli.
-
HU4: Yo como investigadora en estudios de género quiero saber el porcentaje de personajes mujeres hay en las películas de Ghibli para mi investigación de tesis sobre películas animadas.
Estas historias están basadas en la siguiente investigación de usuarias:
- Studio Ghibli tiene varias animaciones, para nuestras usuarias es importante saber cuántas y cuáles son.
- Las animaciones tienen directorxs y productorxs. Estxs son las mentes detrás de una gran animación. En Studio Ghibli hay directorxs y productorxs que han colaborado en la creación de más de una animación. Por ello, es importante para nuestra usuaria poder conocerlos y saber cuántas y cuáles son las animaciones a las que dieron "vida".
- Las animaciones tienen información relevante para nuestras usuarias, como descripción, fecha de lanzamiento, peso, director, productor y personajes.
- Cada animación tiene sus personajes, para nuestras usuarias es importante saber cuántos y cuáles son
- Los personajes tienen características únicas que la usuaria quiere saber, como nombre, edad, género, especie, etc.
Realizamos el prototipo de baja fidelidad para celular, tablet y desktop.
Para nuestro prototipo de alta fidelidad, consideramos los siguientes aspectos:
- Los pósters como punto focal: una de las características más relevante de Estudio Ghibli es su paleta de colores, por lo que el centro de atención deben ser estos.
- Suavidad en los elementos: la tipografía, menú y botones transmiten comodidad.
- Una página para aficionadas de Ghibli: el carrusel de bienvenida muestra imágenes y collages realizados por seguidores del estudio.
Realizamos seis tests de usabilidad: tres para nuestros prototipos de baja y tres para nuestros prototipos de alta fidelidad, donde la retroalimentación fue la siguiente:
-
Pantalla de bienvenida: que no sea necesario tener que cerrar para visualizar la data.
-
Los botones de ordenado y filtrado podrían ser mas pequeños.
-
La barra de filtrado y ordenado es sencilla e intuitiva.
-
Mantener textos cortos y concisos.
-
El botón de menú en el escritorio fue efectivo para todas.
-
Centrar el nombre de las películas.
-
El campo de fecha en su propia área (un renglón aparte del título).
-
Incluir footer con redes sociales.
-
Hacer los botones un poco más grandes.
-
Buena combinación de colores.
-
La tipografía es fácil de leer y entender.
-
Buena distribución del contenido.
-
Excelente tamaño de los posters.
Ghibli Lovers is a web application for exploring the movies and characters of the animation studio Ghibli. It allows users to sort and filter movies alphabetically and by directors, and to filter characters by age and gender.
We defined four user stories that guided the design of our application:
-
US1: As a user who hasn't watched Ghibli movies in a long time, I want to catch up on all the new movies so that I can know how many movies I still need to watch.
-
US2: As a cinema fanatic, I want to filter Ghibli movies by directors and producers so that I can know how many and which animations they brought to life.
-
US3: As an artist, I want to be able to see the female characters so that I can get inspired to draw like Ghibli.
-
US4: As a researcher in gender studies, I want to know the percentage of female characters in Ghibli movies so that I can use it for my animated movie thesis research.
These stories are based on the following user research:
- Studio Ghibli has several animations, and it's important for our users to know how many and which ones there are.
- The animations have directors and producers who are the minds behind a great animation. In Studio Ghibli, there are directors and producers who have collaborated in creating more than one animation. Therefore, it's important for our users to know them and to know how many and which animations they brought to life.
- The animations have relevant information for our users, such as description, release date, weight, director, producer, and characters.
- Each animation has its characters, and it's important for our users to know how many and which ones there are.
- The characters have unique characteristics that the user wants to know, such as name, age, gender, species, etc.
We created a low-fidelity prototype for mobile, tablet, and desktop.
For our high-fidelity prototype, we considered the following aspects:
- Posters as the focal point: one of the most relevant features of Studio Ghibli is its color palette, so the center of attention should be on the posters.
- Smoothness in the elements: typography, menu, and buttons convey comfort.
- A page for Ghibli enthusiasts: the welcome carousel shows images and collages made by studio fans.
We conducted six usability tests: three for our low-fidelity prototypes and three for our high-fidelity prototypes, and the feedback was as follows:
-
Welcome screen: it should not be necessary to close it to view the data.
-
Sorting and filtering buttons could be smaller.
-
The sorting and filtering bar is simple and intuitive.
-
Keep texts short and concise.
-
The menu button on the desktop was effective for everyone.
-
Center the movie titles.
-
Place the date field in its own area (a line separate from the title).
-
Include a footer with social media links.
-
Make the buttons slightly larger.
-
Good color combination.
-
The typography is easy to read and understand.
-
Good distribution of content.
-
Excellent poster size.