shelley huang | design

Movie Diversity Visualization


#OscarsSoBlack: this hashtag becomes trending at the Oscar 2017. "Fences", "Moonlight", and "Hidden Figures" got several nomination and awards. However, does it mean the diversity in hollywood really rise? From the Hollywood Diversity report 2017, the result showing that from 2006 to 2016 the diversity representation almost has not changed. We are eager to dig into the data and present it to the public.

Type: 4 people project,
8 weeks
Skills: Data collection, Prototyping(domo), Interface Design, D3.js
Role: UX Designer



Visualize how minority representation in American film correlates to various measures of success of the film.


Movies to Investigate

Considering out project scope, we chose the top 10 grossing movies within 2016. We collected the box office gross, critical acclaim, and variety of genres represented. 



In order to gather the custom data we needed to tell our story, we combed through the scripts of the 10 movies we chose and counted up the number of words each character spoke. We made note of the character’s gender, race, and sexual orientation, if available.

We also gathered film maker data for each of the movies from IMDb and other sources of information about the film. We looked specifically at the gender, race, and sexual orientation of the films producers, directors, and writers.


Brainstorming Sketches

We brainstormed about possible sketches for our data. Mostly we would love to have filters to show different factors like gender, ethnicity, or sexual orientation. Also, we'd love to dig into info about the movie and crew members, such as the turn over rate and the make up of the crew. 


Low-fi mock up

After discussed about the elements and data gathering, we are leaning toward bubble charts. The above part of squares should be pics of movie posters. Whenever the user hovers over, there would be different bubbles charts. As the user hovers to each bubble, there would be a pop up square showing the detail info, like the character's name, how many words being said, gender, race, and sex orientation. 

We'd also like to share some findings about the movie budget and box office. We do so because we find out the ROI rate relates to the diversity of casts. For instance, "Moonlight" got a great performance among all the other movies in 2016. 




1. ROI chart

We calculated ROI instead of showing the box office in order to appeal to film makers.


2. Filters

By playing with filters, users can compare different demographic groups of the characters and filmmakers


3. Character words spoken

Each named character in the film is a dot plotted on an x-axis for the percent of words that character spoke in the film.