Ghibli GO
Role: UX/UI Designer
Duration: 8 Weeks
Tools: InDesign & Figma
Research Method: Goal-Directed Design
Introduction
Ghibli GO is a mobile app prototype made for a famous Japanese animation studio called Studio Ghibli. This final project's research method was Goal-Directed Design process (GDD). Goal-Directed Design is a detailed process of how to produce an effective human-centered design created by Alan Cooper. Our professor put our class into six teams. The team I was a part of was team Lee which consists of 4 members including myself. On the team, we had one team leader with me being one of the team members. Our app idea was for a Japanese animation studio called Studio Ghibli. The goal was to create an app that gives studio Ghibli fans a way to interact with the studio's content. The app we created is called Ghibli Go. The project's duration was a total of 8 weeks and strictly online due to the Covid-19 restrictions. Since our class was all online, we used an app called Discord for all our communication. We used Miro and Figma to create and hold our collaborative work. In this project, there were a lot of challenges like being online, establishing Business Goals and Needs, Understanding the Domain, Understanding User Behaviors, and Goals. As a team, we were able to create Ghibli Go. If you want to view our Research report, you can click the link here. If you want to view our prototype click the link here.
Goal-Directed Design process
Behind the studio
When I was growing up my favorite and only movie, I watched from Studio Ghibli was Ponyo. I never got a chance to watch the over again until recent years when Netflix had Ponyo available on their platform. Netflix has been through changes and has removed most of the Studio Ghibli films they once had available. Recently, it's been a boom of movie studios creating an app for their studio movies/tv-shows that exists only for the streaming of movies/tv-shows. When creating this project there wasn't an app that is strictly made for all of Studio Ghibli's content. This prompted us to create Ghibli Go. Ghibli Go is an interactive and informative app on Studio Ghibli's movies where fans can also go to stream all movies from Studio Ghibli. Our app addresses this gap in the streaming market. Ghibli Go is intended for IOS and Android, but we made our prototype IOS. Ghibli Go does this by combining aspects of quiz/trivia questionnaires, movie streaming apps, and background context for each movie to create a content-rich application. Our team did this through a series of phrases in the Goal-Directed Design process.
Screenshot of Ghibli GO’s home page
Challenges:
Understanding the Domain
Establishing Business Goals and Needs
Understanding User Behaviors and Goals
The Research
The research phase is the first phase of GDD. This phase is significantly important in the GDD process because it's where we gather all our key information needed to create the app. In this stage, our team was looking for user assumptions, relevant context, rival products in the streaming industry, and potential user behaviors.
Kick-off meeting
Our assumptions
Ages 15-25
Have free time
Fans of Studio Ghibli
Interest in the context of the movies
Interest in playing trivia/games.
We considered the design of the overall app to be an immersive experience by adding Studio Ghibli movies with movie characters or scenes from the Studio Ghibli movies.
Literature Review:
Next, we moved on to the literature review. The is where designers look at contexts dealing with the product's topic to get a solid understanding of the full scope of the product. The team gathered context on the history of media streaming in America, the history and evolution of Japanese animation, and the history of trivia. We discovered YouTube was the first-ever platform that allowed users to upload videos to the internet. Also, we learned anime was influence by French and American short films. Animation's popularity increased in the 1990s with the broadcast of Cardcaptor Sakura, Sailor Moon, One Piece, Dragon Ball, and Neon Genesis. Trivia made its first appearance on television in the 1950s where people started to associate trivia with random facts. This knowledge helped us get a better understanding of and mold for Ghibli Go.
Competitive audit
The competitive audit is where the designers examine existing products/primary competitors for a sense of range to educate themselves for questions during interviews. We collected data from our competitors' apps like Disney+, Hulu, Crunchyroll, etc. We found Disney+ to be a close idea to our app. We gathered popular trivia apps and trivia games played by movie fans. We did a total of 4 charts. 2 charts were for comparing negatives/positives of competitors streaming apps and trivia games. The additional 2 charts were comparison charts of competitors streaming apps and trivia games. We used the data to create an ideal user experience and incorporate the positives while creating solutions for the negatives. This data also helped us gather key questions we could ask users in the user interviews to get necessary feedback.
Screenshot of Ghibli GO’s home page
Interviews
Usually, before the user interviews, we would hold stakeholder and subject matter experts (SME) Interviews according to the GDD process. The stakeholder interviews didn't occur because this is a class assignment with no stakeholders. The user interviews are done through an ethnographic interview also known as contextual inquiry. Users are people that use the product/service and not always the customers. For this project, we also didn't have any SME to interview. The worksheet we did for our kick-off meeting gave us a chance to view assume the answers to the questions we would have for stakeholders and SMEs. In order to get a better understanding of potential users, we created a persona hypothesis to predict users’ behaviors and needs, what type of users would use our app, who would use our app, and the environment this app would be explored.
User interview via discord with Makayla as moderator.
User interview via discord with Angie as moderator.
User interviews are conducted to gain more insight into a potential user for our app. This insight will help us form common behaviors and goals to attach to potential users when creating Ghibli Go. For our user interviews, they were conducted via video chat on the platform called Discord. Due to Covid-19 and time constraints, we had an issue with our school's IBM program's new rules. Due to not having permission to use outside sources as interviewees. We were restricted to only using our classmates as interviewees. Our Team leader set up interviews for the team to attend. We had a moderator and facilitators taking notes during the interviews. I took recordings of the interviews and took notes in 4 out of 5 interviews. For one of the interviews, I moderated while the team took notes. For one of the interviews, I moderated while the team took notes. Each interview lasted between 15 minutes to 45 minutes. As a team, we came up with interview questions and improved the questions as each interview was conducted. Our interview questions ranged from general questions about movies to specific memories with studio Ghibli movies.
Sample of interview questions:
Do you like watching movies?
Do you know what Studio Ghibli is?
How did you get introduced to the studio or movies?
What drew you to the movies? What is something special to Studio Ghibli?
Do you have a special memory with the movies?
Discoveries from interviews:
2 interviewees discovered the movies through relatives/family friend.
The interviewees enjoy looking up actors, history, and the purpose of movies.
Hulu, Netflix, and Disney+ are top favorite streaming apps because of their interfaces.
Once we gathered enough information about users, we documented our data and moved on to the next phase in GDD.
To get a better understanding of potential users, we created a persona hypothesis to predict users’ behaviors and needs, what type of users would use our app, who would use our app, and the environment this app would be explored. This is where we determined we only have 2 types of users for our app. The first type being a person that wants to learn more context of the studio. The second user is predicted to be just streaming the movies for entertainment. The user interviews and persona hypothesis lead us into the final portion of the research.
Goals
This stage of the project is solely to create a persona for our potential users. We observe patterns in our interviewee's behaviors, goals, and attitudes.
Affinity mapping
After each interview, our team conducted a meeting to do a technique called affinity mapping. Affinity mapping is a method of taking large amounts of data and putting that data into small groups based on relationships with each other. For GDD this step helped us categorize ideas and observations to create our personas.
Completed affinity mapping
Primary persona-April Kim
Personas
There are many personas types like primary, secondary, supplemental, customer, served, and negative which all depend on the complexity of the persona. Personas are meant to be. In our case, we only have 2 personas which are primary and secondary. The first persona was April Kim who is 22 years old female that is a Studio Ghibli fan looking for entertainment through our app. Our secondary persona was Theodore Sanders who is 16 years old male that is exploring more content and context the app has to offer.
User Focus
Requirements Definition process stage is where context scenarios are built out of user requirements from the data collected in our research phase. We completed this stage by creating a problem and vision statements, brainstorming ideas, identity persona expectations, construct context scenarios, and identifying design requirements to meet the user's goals.
Visual Statement
"The creation of the Studio Ghibli mobile application will incorporate features from streaming platforms and trivia games allowing users to gain a more informative, interactive movie experience without the inconsistent movie availability and incomplete movie context other streaming platforms users currently experience."
Personas
Context scenarios are written narrative of the usage of a product/service that leads to a list of requirements which is made from our primary persona. The goals we got from this scenario is:
Coming home from a busy day
Wanting to unwind after class/work
Feels like revisiting her childhood and watching a movie
recalls Studio Ghibli and wants to find somewhere to watch the movies
Sample Key-Path scenario
Home page/landing page
Loading page
List of movies/ movie options/ browse
Movie search results
Movie filtering option
Sample of Validation scenario
Forgot password / create an account
Setting/profile (status, payment, etc.)
Soundtrack
Watch later/favorites
Sample of requirements
Ability to stream (and access all content - subscription) Studio Ghibli movies
High speed and high quality streaming with no technical issues
Movie controls (play, pause, landscape, etc.)
Available on Apple and Android stores
Trivia games for each individual movie
Prototype
This phase of the is putting all our research into our app Ghibli GO. We started this phase by creating a wireframe off of our requirements list. We asked ourselves what is the first thing users do when getting into an app? A wireframe is the general construction of our app. We did all of this wireframing on the collaborative tool called Miro. This platform allowed Witty and I to do quick memos, set up page layouts, and connected frames. Once we created our wireframe we got approval from our team to continue to the prototype. Witty and I created the basic skeleton of the app's look and feel. Our skeleton made it through user testing where we got feedback on our interactions with the app and suggestions for change. We conducted 3 user testing interviews. The feedback we received turned to lead us into creating our final prototype of Ghibli GO.
Section of Ghibli GO wireframe
Screen grab of login from Ghibli Go
Screen grabs of home page from Ghibli GO
Screen grabs of movie profile from Ghibli GO
Screen grab of games from Ghibli GO
Screen grab of user profile from Ghibli GO
Conclusion
This project had it’s challenges due to Covid-19 restrictions and being strictly online. Our team of 4 was a solid team that helped each other out in each stage of this project, We used different tools like Discord, Miro, and Figma to collaborate online. We used the Goal-Directed Design process to complete the project to learn it's more than a pretty design. We compared our competitors to each other in a competitive audit. We created April Kim and Theodore Sanders are the primary and secondary personas for our app. We found out useful data from our interviews and our user testing which created a better-streamlined experience for our users. We used techniques like affinity mapping to help reduce our data into smaller groups of data. Overall, Ghibli GO is a prototype that would exceed stakeholder's expectations.