screencapture-collection-cooperhewitt-org-users-bnoon-visits-j3jt-stats-1475765515382 copy.png

The Visit Statistics Page

The Visit Statistics Page

The Problem

User engagement with Cooper Hewitt's online collection is low.

The Solution

As a summer intern in 2016 in the Digital and Emerging Media department at Cooper Hewitt, I created the “visit statistics page” which identifies and displays trends in a museum visitor's saved objects.

Methods

User Observation, User Interviews, Sketching, User Flow, HTML, CSS, JavaScript, PHP

Read an in depth blog post about my process here, or scroll through this page to get the basics.


At Cooper Hewitt, visitors receive a special stylus, called the Pen, which allows them to “collect” gallery objects to be viewed later online. The Pen gives both visitors and museum staff an abundance of information about how people interact with the collections.The visit statistics page gives users the opportunity to discover trends and interests and encourage further exploration of the museum's collection website.

User Flow Sketches

I began my process with lots of sketches to figure out page layout, user flow, and content.

First Iterations

After learning PHP, Emacs, and Cooper Hewitt's existing codebase, I created a simple HTML page with some simple statistics using Smarty, a PHP templating language. From there, I added links to as many preexisting collections website pages I could find.

PHP from the first iteration that calculates the country from which most objects in a user's visit are collected.

Conditionals to create grammatically correct messages in the initial iteration.

Data Visualization

After more code tweaking and linking, I wanted to add some type of visual representation of a user's visit. I added a graph that illustrates a visitor's use of the Pen throughout the galleries using Chart.js, a handy JavaScript library. The x-axis shows time, while the y-axis shows objects collected with the Pen per time interval. This code essentially works like a histogram, splitting the length of a visit into equal bins and sorting the number of objects collected per time interval into the correct bin. This creates a visual of Pen activity throughout a user's visit.

JavaScript implementing the chart with Chart.js

Snippet of backend PHP to calculate necessary values for the graph.

Final (Current) Iterations

In the final stages of the page, I added links to pages which show all of the countries, people, types, colors, or tags that a visitor collected. I also randomized the order which collected colors appeared to make the colors more inviting, since shades of gray were the most common.

To read an in-depth blog post about the project which discusses some of my technical and design challenges and successes, click here.

A separate colors page to show most collected colors

A page to show most collected countries

A page to show most collected designers

Thanks!