Proposing a new search experience for movies of women
Discovher - Prototyping Digital Systems 2022
For the final project in the Design for Digital Systems, we were tasked to build a prototype for a digital system using the skills we earned in this course. We built a movie discovery website for films and tv shows based on identity for people who look for women-led stories. Through testing this prototype, we aim to gain insights on how might we engage identity into media search process in a belief that identity and media content are reciprocal.
AWARDS
PROJECT LINK
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Jamie SunJae Choi, Julianna Bolivar,
Advised by Andrew Twigg
ROLE
COLLABORATORS
TIMELINE
HTML, CSS, Javascript, jQuery, Wordpress, Codeanywhere
TOOLS
5 weeks (Fall 2022)
How might we engage identity into media search process?
Through testing this prototype, we aim to gain insights on how might we engage identity (specifically of women of colors) into media search process in a belief that identity and media content are reciprocal.
Try Discovher here ↗
P R O C E S S
5 weeks from ideation to hosting
R E S E A R C H
What is the current movie search experience like?
Current movie browsing websites system
First, we reviewed movie search platforms with unique search/ filtering parameters
People don't find current recommendation system too helpful.
Survey with 46 responses showed that 48% of people thought recommendation system was not that helpful. For more than 57% of participants, it took more than 10 minutes to discover what they want to watch using current systems.
People feel 'search fatigue.'
We also found that people feel fatigue when searching for something to watch, which is a phenomenon called search fatigue.
I D E A T I O N
What is the problem we see in movies?
Representation in movies
Then we started investigating on representation in movies from our own pain point. As women of color, we talked a lot about how difficult it is to find female protagonists of our own ethnicity and culture, and searched data showing this quantitively.
According to Women and Hollywood, in 2021’s top films, women made up only 34% of all speaking roles. 60% of the 34% were white women, 19.3% black women, then Latinas at 9.5%, Asian women at 8.4%, Indigenous women at 0.3%, MENA (Middle Eastern and North African) women at 0.5%; and Mixed-race women, 1.4%.
The report, It’s a Man’s (Celluloid) World, notes that if Latino- and Asian-centered movies like Encanto, In the Heights, Shang-Chi and the Legend of the Ten Rings, and Minari are excluded from the analysis, then share of Latinas and Asian women as major characters fall to 5.3% and 6.7%, respectively.
Read It's a Man's (Celluloid) World here ↗
Visit SDSU Center for the Study of Women in Television and Film website ↗
We passionately agreed that enabling women like us to find women characters in movies they can relate to will bring value to our society by raising accessibility to such movies, revealing the current situation of representation in movies.
R E S E A R C H
How might we amplify women of color by movie search process?
Hearing from people, reading articles, and discussing our own experiences, we decided to move forward with a movie recommendation generator based on click and filter interaction types.
Three guiding questions drawing attention to identity
To make the filtering system closely related to one's identity, we ideated identity-related categories that people might consider when choosing movies.
Frameworks for movies of women
We decided to use existing frameworks for establishing our data set. For the prototype, we created our own database in Airtable by manually adding movies that passed either of those two tests ultimately it would be efficient to use API and update as many movies automatically. (Whether to refine the list with our own criteria or by users is another question.)
Bechdel test
Visit the Bechdel Test website ↗
Mako mori test
Read about the Mako Mori test ↗
P R O T O T Y P I N G
Building a website for women-led movie discovery
Sketching
We sketched layouts and discussed the narrative structure and indexical structure. We figured out the pages we need-main landing page, about page, and exploration page. Inside the exploration page, we wanted users to filter movies one category at once.
Building & Iterating
Then Jamie led developing UI and visual design and created an UI spec document. Based on the spec document, I started writing HTML, CSS, and JavaScript codes. In the meantime, Jamie and Julianna created an Airtable database of movies and imported it to Wordpress, creating posts with categories and sub categories corresponding to each movie with categories and tags. Then I implemented my code to Wordpress theme files using PHP, connecting parts into interactive experience.
Key interactions
Using CSS and JavaScript, I created interactions.
Filtering logic and category switch
While writing Javascript code for filtering interaction, we got to think about how it should work. We thought that inside one category, users should be able to choose multiple tags and the result should show all movies with one of the selected tags(compound). But we also wanted to narrow down the result as well. So we decided to show movies in the intersection of all three categories. For example, when you choose I1, I2 tags in the first category, then the result shows movies with I1 or I2 tags along with many other tags from other categories.
Also, we changed our original plan of moving from one page to the next one without knowing what comes next to staying in the same page that show all three categories and move back and forth with minimum changes.
Try Discover ↗
R E F L E C T I O N
Working prototype is powerful.
Building a working prototype was rewarding. Interacting with it and seeing people interacting with it convinced me that testing concept with working prototype could deliver our concept as we intended minimizing the gaps of imaginations.
I earned coding skills - in addition to HTML/CSS and JavaScript, I could see how PHP works.
Narrowing down the target audiences and narrowing down scopes of project according to the goals and timeline was a great decision and taught us how to proceed step by step toward the end goal.
Feedback and comments
I’m very interested in actually using
This is closest project for a working prototype
It would be great to include UI elements that are more explicitly connected to the framework that this project is based off of.
Next steps
Hopefully continue developing the website -
Personalization
Allow users to create an account
Add a feature for people to save/bookmark movies that they are interested in
Add a review feature.
Social aspect
Add a sharing function to send movies to friends
Add a “like” function, and allow for user interest to be shown on each movie
User convenience
Organize the movies by Alphabetical, Well-Rated, Most Relevant instead of random organization
Responsive design for mobile view
Data
Possibly also highlight female directors and producers
Add a UI component that shows where the data comes from - the bechdel test and Mako Mori test.
Add a feature for people to suggest a certain movie to include our database
Proposing a new search experience for movies of women
Discovher - Prototyping Digital Systems 2022
For the final project in the Design for Digital Systems, we were tasked to build a prototype for a digital system using the skills we earned in this course. We built a movie discovery website for films and tv shows based on identity for people who look for women-led stories. Through testing this prototype, we aim to gain insights on how might we engage identity into media search process in a belief that identity and media content are reciprocal.
In charge of Front-end coding.
Contributed to Concept Development, UX Design.
Jamie SunJae Choi, Julianna Bolivar,
Advised by Andrew Twigg
ROLE
COLLABORATORS
TIMELINE
HTML, CSS, Javascript, jQuery, Wordpress, Codeanywhere
TOOLS
5 weeks (Fall 2022)