UX/UI case study: BechdelAI
A desktop app to assess the representativity of women on screens.
⭐ This project was awarded the best Final Project of the UX/UI Design Bootcamp at Ironhack Paris in our cohort in March 2023.
Project Overview
Creating a data visualization website for an association that assesses the representativity of women on screen.
Duration
10 days
Team member
Estelle Chhun and myself
Deliverables
- User Research: Survey, Interviews, User persona, User journey map, Problem statement, Ideation, Prioritization, User flow, Lo-fi wireframes, Concept testing, Mid-fi wireframes, Usability testing.
- Visual Design: Visual identity, Style tile, Accessibility testing, Desirability testing, Hi-fi wireframes, Interactive prototype, Micro-interactions.
Introduction
The episode #56 of the podcast “Les couilles sur la table”, Victoire Tuaillon engages in a discussion with Iris Brey about the Male Gaze, shedding light on the prevalent issue of gender inequality in the film industry. As mentioned in the episode,
female film directors earn 42% less than their male counterparts,
and 80% of French films released in movie theaters between 2011 and 2015 were directed by men.
Additionally, approximately 40% of films worldwide do not pass the Bechdel Test.
🎬 Bechdel Test
It’s an experiment to do when you watch a movie to get an idea about female under-representation and gender stereotypes in works of fiction. Just ask yourself three questions:
Are there two (named) women?
Do they talk to each other?
Do they talk about anything other than a man?”
About the client
To address these issues, a team of engineering volunteers at Data for Good created the BechdelAI project, which uses artificial intelligence algorithms to scan videos, images, and text to analyze additional criteria and deepen the analysis of gender inequality in the media. The project’s main objective is to raise awareness of sexism in the media.
Their technology
For example, it can separate a text into dialogues and analyze them by gender, extract the topics discussed, and determine the relationships between characters and the age of actors/actresses. Similarly, it can retrieve specific audio or images from an image or video, identify the genre, and measure the occupied area. Additionally, it can detect the vocal activity, identify the genre, extract the voices, and separate them into dialogues using voice-to-text technology. Moreover, it can detect the sentiment and stress levels of the speakers. By automating these tasks, an AI algorithm can save time and effort, enabling researchers to focus on higher-level analysis and decision-making.
About the challenge
Our challenge for this 10-day project was to define the targeted users and create the digital interface of the MVP (Minimum Viable Product).
1. Empathize
Beforehand, we created a CDS matrix to organize our research, as we needed to have a thorough understanding of the technology, the product, the behavior of potential users (B2B or B2C), and the market.
1.1 Understand the major actors
- The Observatoire des images, established in 2021, is an association that brings together individuals interested in the role of images in various forms of media, including cinema, television, video games, and online advertisements.
- Arcom is legally mandated to ensure the equitable representation of French society’s diversity in audiovisual media, including television and radio.
- Collectif 50/50, founded in 2018, is an association dedicated to promoting gender equality and diversity in the film and audiovisual industry. Their mission is to fight for equality, parity, and diversity in these fields.
1.2 Understand the B2C
We strongly believe that the product’s appeal may be limited to a niche audience, such as ardent movie enthusiasts, rather than the wider population. To test this hypothesis, we plan to conduct 8 interviews and a survey with 160 respondents. Our specific objectives are as follows:
- Identify the persona that is most interested in the product, which will help us create a screening tool.
- Determine whether the product’s features should be tailored differently for the general public versus industry professionals.
- Identify the most valuable features for the general public, which will help us define the freemium offer.
1.3 Understand the B2B
Our initial objective was to locate audiovisual professionals, mainly through LinkedIn. We approached them and received positive responses from all of them. We then conducted 5 interviews and launched a survey, which yielded 36 responses. Our primary objectives were to determine the following:
- Which types of professionals would be most interested, and from which industries they originate.
- The motivation behind their research and the methods they currently use for it.
- The features that interest them the most.
- Potential obstacles that they may encounter in their research endeavors.
2. Define
At this point, we have gathered user research. Now, we need to synthesize it to turn data into actionable information.
2.1 Affinity diagram
ℹ An Affinity Diagram is a method used to cluster findings so that you can physically see trends and relationships in data.
2.2 Data analysis from the survey
2.3 Users persona
Based on the behavior patterns that we encounter in our research, we created 2 personas.
ℹ Personas provide us with a precise way of thinking and communicating about how groups of users behave, how they think, what they want to accomplish, and why.
2.3 Journey maps
This tool helps us further empathize with the user so that we can find opportunities to make their journey better.
For B2C, journey map, we didn’t identify points in the journey that could be opportunities to help the user achieve their goals.
In relation to B2B, we recognize certain situations as prospects for design enhancement, which include:
- Instances where users have to manually tally the number of women appearing on screens as they require this information at some stage of their analysis.
- Situations where users are searching for an automated solution but are unable to locate one due to reasons such as complexity, high cost, or non-existence.
- Scenarios where users later realize that they need to analyze another variable, and hence must recount everything.
2.4 Problem Statment
We brainstorm using the How-Migh-We-statments methodology.
We were in a divergent phase, as we gathered lots of research and different angles from which to appreciate the problem that came up. So we used the How-Migh-We-statments methodology.
ℹ “How Might We” (HMW) statements are short statements that start with the phrase “How might we…” and end with an opportunity. HMW statements were developed at Proctor & Gamble in the 1970s and are promoted by design agencies and professionals including IDEO as a way to quickly turn problems into opportunities.
This helped us to create the problem statement:
Media producers or Tv broadcasters NEED TO assess the representation of women on screen in their program catalog with automated analysis in order to improve it BECAUSE today they do it by hand and it's tedious.
3. Ideate
During 4 hours, we used pen and paper and used different techniques to ideate:
- Brainstorming session
- Crazy 8’s
- Dot voting
3.1 Prioritization
As we are planning on developing a MVP, we will need to select and prioritize what we want to include in order for the user to understand the purposes of the prototype. We used the MOSCOW methodology.
ℹ Must have’s: These are the mandatory features; Should have’s: These features are not crucial to fulfilling your users’ needs; Could have: Your product doesn’t necessarily need these features; Won’t have: These are features entirely out of scope.
3.2 User flow
In order to maintain our convergence, we are moving forward with the creation of the MVP user flow.
ℹ User flows live at the intersection of Information Architecture and Interaction Design. User flows are similar to sitemaps (another Information Architecture deliverable) in some ways, but unlike sitemaps, user flows display the screens in the order that a user would view them.
4. Prototype & Tests
4.1 The concept
A dashboard for visualizing data that displays a curated list of criteria filtered by a chosen content for analysis.
4.2 Concept Testing
Following the creation of the user flow and the sitemap for the product, we proceeded to test our solution with 3 of our target users using a low-fidelity prototype. The encouraging feedback about the idea and the preliminary layout that we received from the test bolstered our confidence in moving forward to the mid-fidelity prototype stage.
After testing the mid-fidelity with different target users, we were able to identify issues and determine which flow and features needed to be prioritized. Some of the changes we made based on user feedback include:
- using more precise terminology (e.g. “flow” and “stock” for content analysis),
- modifying the “select a period of time” screen to enable users to choose a customized timeframe,
- providing additional information on the “recap” page,
- adding an “i” button for more information on titles in the “new analysis” section,
- displaying the selected criteria on the dashboard page, and adjusting the filters.
4.3 Creating the visual identity
After conducting a competitive analysis and creating a mood board in line with BechdelAI’s values, we developed the Style Tile below.
4.4 High-fidelity Prototype
4.5 Screens state
Here are some examples of state screens that we created.
Loading state
ℹ Show when a user performs an action and there is some delay in the results.
This screen appears when the user clicks on the “Nouvelle Analysis” button:
Progress bar
ℹ Show how the actual progress of the loading state, they are used to determine wait times.
This screen appears when the user is waiting for its analysis to be done:
Confirmation state
ℹ Created to ask if they want to proceed with the action they just took.
This screen appears when the user is about to leave the analysis, it gives you the option to save your inputs into draft:
Skeleton
ℹ Skeletons are created to improve perceived performance over short loading times.
The first screen appears when the user is about to see the homepage and the second one just before the dashboard of an analysis is display:
4.6 Interactions & micro-interactions
ℹ Micro-interactions are really small moments that make a big difference in the way you experience a product. They are not concerned with the user’s workflow but with the behavior of specific components on a context-free level.
Micro-interaction examples from the high-fidelity prototypes:
4.7 Usability Test
ℹ The goal of the Reaction Card method is to measure people’s attitudes toward a user interface by a controlled vocabulary test. We gave to the users a list of product reaction words and we asked them to select those that best describe the design.
These were the words that came out the most which perfectly matched our intention to create an intuitive and easy-to-read data visualization tool.
Interactive prototype
Next steps
Our approach towards BenchdelAI involves developing a Minimum Viable Product that demonstrates the capability to perform analysis on a catalog of films/series. In addition, we have identified two highly beneficial features based on the target user’s feedback
- the ability to compare analysis over time
- and the option to set and track goals.
Learnings
I believe that I have learned a lot from this project. One of the most important things that I have learned is the value of having a user-centric approach in designing products. By prioritizing the needs and preferences of the target users (B2B rather that B2B), we were able to create a design that match the product opportunity with their requirements and expectations.
Another important lesson is the importance of making choices where the design opportunity is the most significant. By focusing on the most critical aspects of (the design the Journey Map helps us in this way), we were able to create a more effective and efficient solution.
Additionally, I have learned about the importance of teamwork and the division of tasks. By delegating tasks to Estelle according to her strengths and expertise, we were able to work more efficiently and produce better results.
Overall, this project has been a valuable learning experience that has equipped me with practical skills and insights that I can apply in future design projects.
More resources
Allociné: Parité et diversité dans le cinéma français : des inégalités toujours persistantes
Le monde : Diversité à l’écran
Yes-we-are: Diversité et Inclusion dans l’industrie cinéma et audiovisuelle
CNC: Parité, égalité et diversité dans le cinéma et l’audiovisuel
Inrock: La diversité devient obligatoire aux Oscars
