Data Visualization Through Gamification

A mockup of a 6-foot tall kiosk with a touchscreen, showing a starting screen and the question, 'How well do you know the movies?'

A silhouette of a person standing next to the kiosk for scale.

Overview

The Academy Trivia Kiosk is a touchscreen kiosk designed to encourage movie-going audiences to engage with movie data. Conceptually, the experience is meant to take data relevant to movies, such as budget, box office, ratings, and more, and visualize it via gamification. The kiosk can be placed in movie theaters where audiences can interact with it freely.

Although the kiosk is meant to be a simple trivia-based quiz game to pique curiosity-based interaction, it could also be tied to rewards. When tied to a reward like discounted admission to the new Academy of Motion Picture Arts & Sciences Museum, for instance, the Academy could drive audiences to engage with both cinema in general as well as their specific revenue generating services.

Disclaimer: Logo is property of the Academy of Motion Picture Arts and Sciences; this is a school project and is in no way affiliated with the Academy of Motion Picture Arts and Sciences.

Details

Touchscreen Kiosk Design Data Visualization 2023 7 Weeks Solo Project

Background

I started this project in January while the global hit, "Everything Everywhere All at Once", was still smashing records and had just been re-released in theaters for a second time about 10 months after it had premiered. With a couple months until the 95th Academy Awards, and with a swirling Oscars debate, I started collecting data around Best Picture Nominees. This was partly for my own curiosity, to see if I could glean any kind of discernible patterns, but also with the intention of coming up with a way to visualize the data, making it easy to approach and understand.

A spreadsheet of data about Best Picture nominees.

The Data

I started by collecting data about the nominees for Best Picture for the 95th Academy Awards (the event happening in 2023) since they're supposed to be the best movies of the year. I started with baseline information in case it was relevant later, like the duration, budget, genre, and director. Then I got into the really tedious part: collecting the various ratings from different ratings services: IMDB, Rotten Tomatoes, and Metacritic. Each one uses a different rating system so I felt like I needed to aggregate them all. (A little ironic, I know, since Metacritic claims to be a rating aggregator.)

Once I had the data for the 2023 nominees I started to move back in time. You can't find patterns if you only have one, incomplete dataset. Before I knew it, I had 10 years-worth of data for Best Picture nominees and winners and started to notice some interesting factoids, even if I couldn't discern a pattern. For instance, it's rare for movies heavily preferred by general audiences, compared to critics, to even be nominated but the most notable such discrepancy, "Bohemian Rhapsody" (which was preferred by general audiences to critics with a difference of 25.33 out of 100 points), happened to be nominated in the same year that a similarly general audience-preferred film, "Green Book" (which was preferred by general audiences by 13 points), happened to win Best Picture. "Bohemian Rhapsody", in fact, has such a low overall aggregated rating that the only movie with a lower aggregated rating over the last 10 years, "Don't Look Up", only scores 4 points (out of 100) lower.

description

A rough sketch showing how transparent cards containing data could be stacked.

An ideation of a way to visualize move data, by using a line graph on transparent cards that can be stacked to compare the data.

Ideating Visualization

To start getting familiar with the data I just started to sketch a variety of different ideas of ways to visualize it. This included simple charts or Instagram slides but I also came up with ideas for collectible cards that the Academy could sell each year to eager cinephiles. All of these sketches started to give me a much better appreciation for the data and how easy/difficult it could be to understand.

With a bunch of ideas for charts and multi-level interactions, I took some time to just think about ways to display one movie's numbers. For instance, using a line graph across different categories, or displaying one movie as atomic data, like a unique shape where the different sides/size/color could represent different categories.

description

A rough sketch of a Best Picture nominee's ratings shown on a radar chart.

A rough sketch of a radar chart, showing how ratings would look, up close.

Atomic Visualization of Data

When talking about data visualization, an "atom" is the smallest possible piece of data. In context, one cell of a spreadsheet (one data point) would be an atom.

Multiple atoms can come together to form a singular visual. In context, one row of a spreadsheet would be represented by the atoms in that row.

In this way, a single graphic, like a polygon, can come to identify 4 or more data points without having to involve anything other than size, shape, and color.

Atomic representations of data can make it faster to digest complex data because it's easier for an audience to see the differences between the representations.

A sketch showing the different steps through interacting with a touchscreen kiosk and how the data is displayed on different screens.

Designing a Physical Interaction

Up to this point, the majority of my visualizations were meant to be experienced via digital means, such as through social media or on a website. However, I'd realized that the Academy had a new museum and maybe I should think about a data display that could be used for or in the museum. I ideated a concept for a simple, interactive exhibit for the museum with some basic gamification as a way to encourage visitors to engage with the exhibit and the data.

Thinking of that concept for a physical display turned out to be the breakthrough I needed. Once I had the idea for a physical interaction, I realized that I could use a digital kiosk as a way to to both. A touchscreen kiosk would allow a physical interaction while still being able to visualize complex data. From here, it was a pretty simple iteration to be able to pull from a combination of my previous sketches to create a simple, linear flow to create a trivia experience for visitors to engage with multiple data points.

description

A layout of prototype screens showing every frame/screen made for the animatic.

Reflections

I would imagine that a lot of interaction designers would find respite in data visualization. It can be easy to get lost in interaction design because, not only do you have to design the experience, you have to tell a story while you do it and sculpt the feelings around it. Data visualization has a kind of purity where you're just figuring out how to tell the story of the data. Designers also have a kind of obsession with simplicity and minimalism that can be a little aggravating, at times. However, data visualization is like a perfect balance of simplicity: you need enough data to tell the story but if you go a little too far it can easily become overwhelming.

After finishing the animatic of the flow, I realized that the first part for trivia worked great, but the data visualizations afterward were a little extra and maybe pushing beyond usefulness. Even though it's interesting information, it would be better served if I found a way to incorporate the information into the trivia instead of relegating it after the fact.

description

More Work

A preview image showing an iPhone app mockup next to the coded website.

Next Project

FontFacing

A preview image showing 2 different stages of an app working on a physical, touch screen kiosk.

The Data

To be fair, I actually started by almost obsessively looking up data visualizations. I don't recall having worked on a project specifically for data visualization, so I needed to understand the dos and don'ts, the good and bad, and get a feel for how other people deal with their data, and also look at the context in which people might interact with that data. Here you can see a remarkably poor visualization I found in my searches. It apparently tries to make the claim that there's a relationship between smoking and drinking, a dubious claim at best, while also making it extremely difficult to decipher the chart.

A dot chart with the axes labeled as 'Smoking' and 'Drinking' which has dozens of countries charted and is basically unreadable because of the density of information.

When I started collecting data for the 95th Academy Awards, the winner hadn't been decided yet, which made the collection of data for previous years so interesting. The 10 Best Picture nominees for 2023 are as follows:

All Quiet on the Western Front
Avatar: The Way of Water
The Banshees of Inisherin
Elvis
Everything Everywhere All at Once
The Fabelmans
Tár
Top Gun: Maverick
Triangle of Sadness
Women Talking

A spreadsheet with 10 rows showing the aforementioned movies and some of the basic statistics about them, including genre, budget, runtime, director(s), etc.

I wasn't expecting to get so sucked into the data, but there's a kind of peace in the numbers. Once the data's there, you can start trying to find meaning. Now that the award's been given I know who's won, but at the time I was collecting this data it was new and exciting to try and figure out a pattern and guess who'd win. While collecting the data, I was struck by how differently each platform portrays their ratings.

IMDB uses a score out of 10.0
Rotten Tomatoes' verified critics are rated as a percentage, plus an average out of 10.0
Rotten Tomatoes' users are rated as a percentage as well, plus an average star rating out of 5.0
Metacritic aggregates critics' reviews into a score out of 100
Metacritic user scores are averaged out of 10.0

A continuation of the previous spreadsheet, now showing 7 different ratings for each movie.

With all of these scores, there's 7 numbers to keep an eye one. That makes it confusing, so I realized I'd need to make it simpler. The easiest way to normalize all of these systems is to get them all to a score out of 100. Therefore, a 7.6/10 on IMDB becomes a 76/100, a Rotten Tomatoes critic percentage of 84% with an average score of 7.9/10 becomes an 84/100 and a 79/100, respectively, etc.

With normalized scores, I can easily aggregate them all. Adding them together and dividing by 7 gives a nominee a single, aggregated score which makes it easier to compare. Additionally, if I aggregate the critic scores and the general audience scores separately I can check for the difference between them, to see if the movie was preferred by critics or general audiences and how heavily it was preferred.

A continuation of the previous spreadsheet, now showing a series of normalized ratings for each movie followed by an aggregated/averaged rating for each movie and the difference in score between critics and general audiences.

To round out my data I got the total number of Oscar nominations, including the Best Picture nomination, and the number they'd won. I also got the number of accolade nominations, in total, and the number of wins. After looking at all of this data, in the process of collecting it, I started to see some interesting patterns about the movies, but nothing like an idea of how to guess a winner.

The end of the previous spreadsheet, now showing the number of award nominations and wins for each movie.

Ideating Visualization

I started sketching visualizations just as a way to better understand the data. At the beginning, I wasn't necessarily thinking about how the graphics would be used or the context in which they would be seen. I just wanted to start displaying the data and trying to make it digestible.

A rough sketch of bar graphs showing movie award nomination wins.

A rough sketch of bar graphs showing movie box office returns.

A rough sketch showing the total Oscar nominations and wins of best picture nominations.

Since I was sketching on square canvases, I pretty quickly realized that this could be a good opportunity for the Academy to present data in an engaging way via their Instagram account by using posts with 10 slides.

A rough sketch showing a way to visualize data across multiple slides.

Once I got to thinking about how to actually engage with the information, and more interesting depictions than simple graphics, I also thought about physical media, like trading cards. The world is still going crazy for collectible trading cards, so why don't they exist for movies? Well, they could.

A rough sketch of an idea for a collectible trading card showing movie ratings.

A rough sketch of an idea for a collectible trading card showing Oscar award winners.

After thinking of different ways to display data, I wanted to think of more ways to encapsulate complex data with simpler graphics. Atomic representations of data can allow complex data with multiple points to be represented in a single visual element. Below, you can see that I'm exploring different ways to use a single graphic to represent multiple data points: a donut chart/percentage bar wrapped around a data point, a polygon where the number of sides and the color can mean different things, etc.

A rough sketch of bar graphs showing an atomic data representation of multiple data points in one element.

Finally, I iterated on all of these sketches to think of ways to use different atomic representations of data in combination with some of my other directions to display even more complex relationships between the movies and their data. I also tried to think about the design reaching to multiple cognitive levels for the different users who may need to see data in a reflexive, experiential, or learned way and the progressive disclosure that makes these different levels possible.

An example of a complex visualization that can reach to multiple cognitive levels and features atomic representations of data.

Designing a Physical Interaction

My first idea for a physical experience was to simply create a Best Picture-focused exhibit. The Academy could update the exhibit each year; following the Oscars they could update the exhibit to show who won, or add to the interactive experience by only showing the winner at the end of the exhibit; each year when the new nominees are announced they could also update the exhibit to reflect the new nominations and the updated exhibit could be a good draw for return visits. These updating exhibits could also be a fun way to display the relevant data with new and interesting visuals.

A rough sketch of a conceptual, interactive museum exhibit and how the movie data would be displayed.

A simpler and more achievable solution would be to create an interactive, digital kiosk. This would mean that, not only can you update for new nominees, but you wouldn't be limited to current nominees at all. The dataset could continuously update and include previous years and the interactions could be just as visually interesting as a physical display.

A rough sketch of the different steps of an interactive kiosk screen and how the data would be displayed through multiple steps.

That first iteration is a little too stiff. Some feedback I got was that I should consider doing some animations or include visuals during the hints, rather than only showing visuals after guessing the movie title. There's a Wordle copycat called Framed where you guess the movie based on a series of 6 frames. I briefly thought about playing off that idea by incorporating a movie poster or movie still into the background, but blurred out, and after each successive hint it would become more clear. I realized, however, that could just be more confusing, especially since you're usually standing just a couple feet from the screen and the poster/still would be completely distorted, regardless. I decided to simply focus on a few data points to use as hints, animate them, and lead into additional data afterwards.

The starting screen of the interaction with a large button asking the audience how much they know about films.

The completed hints of the interaction with a keyboard so that the user can make their guess of which movie the hints are referencing.

The first data screen showing various ratings of the selected movie.