Color Exploration at Cooper Hewitt Museum

mockup-mac-01.jpg

My Role

UX Design

Data Visualization

Developers

Brian Shi

Mariko Wakabayashi

Bert Zhang

Date

09 - 10. 2016

 

The Challenge

Many people, especially artists and designers, go to Cooper Hewitt Museum's website to explore artworks and do research. One of the biggest feature of this website is they have open datasets for color information. However, the current website doesn't provide a convenient way to research color, such as compare colors from a certain period in a specific country. We aim to provide many options to let users discover artworks and juxtapose specific data points among a large number of combinations

Users can only choose one category among all the options to explore

 

Solution

result.png

Research

Interviews

We interviewed 5 Art & Design students who are interested in exploring colors. We asked their motivations, needs and habits during the interviews. We found that most of them usually reference color combinations online, and they are interested in reference colors from classic artworks. Art history students had more specific needs in terms of color exploration. They questioned:

  1. What colors are often paired together in certain groups of artwork?

  2. Are there significant shifts in these pairings when you change artists, locations, media, subjects, periods, etc.?

Ideation

User Persona

We created three personas reflecting the three main groups of users we targeted at: designers, teachers who wants to keep their students interested through self-exploration, and non-art or design-workers who just starts to learn art.

User Flow

After knowing what target user might use this tool for and how they are going to use it, I created a user flow that lead the tour from beginning to the end. This flow will help serve users with different goals, who have a clear goal of their research and who want to wander around first.

Screen Shot 2018-08-03 at 5.07.52 PM.png
 

Explore Artworks & Filters

I started with showing varies artworks on the page, which lead users to find artworks they are interested in further exploration. For users who have goals of searching for specific subjects, countries, periods, media and year range, they can simply filter artworks on the top. I tried two different layouts: filters on the left column with artworks on the right and a filter bar on the top with artworks on the bottom. I went with the second option because it saves more space on the main frame for further actions, when showing color visualization. The filter bar on the top collapses when scrolling can keep user focus on the artworks or color visualization.

Iterations from sketch, low-fi to high-fi

 

Visualization of Filtered Result & My Collections

On the main canvas, there are several base circles as measurement of the frequency of paired colors, depending on how many colors are paired together from the set of query. Once users select a set of works from the filter section, the webpage will start to show the paired colors on the canvas, with some base circles on the background. All the colors are presented as color dots, and the size of the dots represent how often certain colors are paired with other colors.

  • Colors with most frequently paired with other colors in the center;

  • Both dot size and the distance from center represents frequency;

  • Angles mimic the color wheel (red, orange, yellow, green, blue and purple);

  • Click on one color to see the the color code and frequency of other colors pairing with this color;

Iterations from sketch, low-fi to high-fi

 

Implementation

Dataset

Collection Data for Cooper Hewitt, Smithsonian Design Museum

https://github.com/cooperhewitt/collection

JSON format

198,000 objects

Includes data such as artist, location, period, medium, color palette, dimensions, and more

 

 

Tools:

Cooper Hewitt Collection API

(To gather data about paintings and colors)

Python

(To clean up the gathered data)

D3.js

(To allow us to take the data and generate a visualization)

In this example, the thumbnails of all Austria artworks are listed on the bottom of the webpage, and the use of colors is showing up as color dots. You can easily find that there is a large area of dark blue and some orange colors.
 

 

Learnings

1. Plan the project and ensure the time for implementation

2. Involve engineers into the design process so they understand the design decisions

We got rid of many important features because of the short time for only 1/4 part of the course. So only filters and results were built up. In the future, for given enough time, I would communicate more with engineers in the early stage -- make them involve early in the design process, so they understand reasons behind design decisions and why each small feature is important to the whole product.