A Slice of MoMA is an interactive data visualization of the Museum of Modern Art’s online collection. It proposes a playful way of visualizing a large amount of artwork data by approaching them from a color analysis perspective. It stimulates visitors to explore and compare artists, reveals the color progression of their artworks, and recommends artworks of similar visual styles based on visitors interests.

Timeframe
2019.4-
2019.5
Team
Qianhui Liang
Jialu Tan
Role
Front-end
Design
Instructor
Professor
Arvind Satyanarayan
Link
Problem Statement
The Museum of Modern Art in NYC houses 200,000 pieces of modern and contemporary art works. Among them, 81,000 works are accessible to the public digitally through a search engine on MoMA’s website.
MoMA's Current Website Screenshot 1 MoMA's Current Website: https://www.moma.org/collection/
MoMA's Current Website Screenshot 2 MoMA's Current Website: https://www.moma.org/collection/
We started the project by looking at MoMA’s current webpage of displaying its digital collection, and identified the following problems:
  • It is mainly designed for professionals who know exactly what they want to search for

  • It does not give a good overview of MoMA’s digital collection
According to a survey conducted by MoMA, visitors of the website report medium to high art knowledge and are likely to be professionally engaged with the subjects. The current website clearly doesn’t fulfill the goal of reaching a wider audience group and promoting discovery.
Design Goals
As a result, we have defined the following design goals for our project:
  • Make MoMA’s online collection more accessible to people who don’t have much background knowledge about modern art

  • Transform the traditional way of displaying artworks online to an inspirational exploration tour
Method & Process
Design Strategies
We approached our design problem with the following strategies:
1. Focus on extracting artworks’ color

Color is something easy to understand and people can associate themselves with. It is also something that grabs people’s attention when during first encountering. Therefore, we’ve explored different methods to extract the color information from the artwork, and use that to direct the whole experience.

2. Progressive revealing layers of information

We were dealing with a large dataset that have 80,000+ entries of artworks and 10000+ entries of artists. In order to show both high-level overview as well as details of each piece, we’ve looked into ways to break down the exploration into a step-by-step process, with each step revealing a bit more information.

3. Exploratory path through association

Last but not least, we want to avoid the traditional way of display artworks in a grid layout, but allow user to have a flexible path of navigation based on their interests. We wish user would be able to explore artworks through association instead of indexing, which led us to build an artwork recommendation system powered by machine learning.

References
We studied a series of inspiring data visualizations for reference.

Bohemian Bookshelf

The Bohemian Bookshelf is a bookshelf visualization that was designed to facilitate open-ended exploration of digital library collections and serendipitous book discoveries.

On Broadway

On Broadway folds Google street view maps and Instagram posts of street segments as slices. Users can click to expand the whole images and see more details.

Front Row to Fashion Week

In this visualization created for 2013 New York Fashion Week, dazzling collections were presented in carousels (one for each designer). All images are really thin, only showing a glimpse of the main colors of the outfit until user mouseover it.

Iterative Process
We went through visual encoding and design iterations. click to read more
On the technical side, we researched 3 different ways to build the artwork recommendation system click to read more
We also iterated on the color analysis algorithm to make our graph more appearing click to read more
Deliverable

Please feel free to play with our live prototype, which we coded from scratch with HTML/CSS, JavaScript, using D3.js and Boothstrap. Please note the prototype only works for desktop.

If you are on mobile, please feel free to check out this demo video

Retrospect

A Slice of MoMA is our first attempt to explore the concept of online museum and displaying artwork datasets in a more exploratory and interactive way. Working on it as the final project of a data-visualization class, we had to prioritize tasks within the limited timeframe. If we had more time and resources to work on this project, I wish we had:

  • send out survey in the beginning to better understand what people want when they browse art museum’s digital collection, and run usability tests after we build our prototype
  • take responsiveness and accessibility into considerations
  • utilize existing JavaScript UI frameworks to build the prototype more efficiently