Techniques used:

  • Machine learning (Open Frameworks)
  • Front-end web development (Javascript, CSS, HTML5)
  • Wireframing
  • User interviews
  • User testing 

Independent project. Duration: 3 months.

Project Conception with Client

Tagging Teenie is a tool to help the Carnegie Museum of Art organize their database of images taken by historic Pittsburgh photographer Teenie Harris. The database contains over 60,000 digital images and serves as one of the most detailed records of the African American urban experience during the 20th century. 

The interface displays up to 1,000 photos in a grid format that allows users to zoom in and scroll around. The grid was created using the OFxTSNE program, an Open Frameworks addon featuring a computer vision algorithm that sorts the images by similar features. When you give the program a large enough set of images, it will display a grid with clusters of similar images. This lends itself to interface design because it allows users to quickly scan a large amount of visual data points without clicking through to another page. 

Defining a Design and Use Case

I interviewed curators at CMOA to understand the greatest issues with organizing such a large database. We settled on a design that used the image grid as a way of collecting a specific metadata tag on multiple photos in just one click. The following screens show the prompt and feedback of this interaction. 


I then drafted a scenario for the screens pictured above that outline how the museum could use to recruit more volunteers to interact with the Teenie Harris archival project.

Step 1: Visit Teenie Harris exhibit at CMOA, view touchscreen display with Tagging Teenie interface (shown in this documentation).

Step 2: Spend a few minutes tagging photos for the database.

Step 3: Submit tags and view message asking for your email to get information about volunteering for database archiving workshops. Submit email address.

Step 4: Get email about day-long workshop (on a Saturday, with lunch provided!) at the museum that will teach you how to operate a more advanced version of the interface and provide behind-the-scenes interaction with the Teenie Harris database. Sign up for workshop.

Step 5: Attend workshop. Learn how to create your own tags and scroll through larger grids (up to 1000 photos each).

You can follow this scenario along in click-through below. 

Key Takeaways: 

  • User Testing: I user-tested my scenario at an interactive art exhibit and found that most users wanted direct feedback on top of the photos when they clicked them instead of or in addition to the feedback on the side panel. 
  • Client Feedback: When I presented this design to my clients at CMOA they were most interested in the ability to gather contact information from users. In addition to collecting more metadata on the images, the museum has trouble reaching out to members of the Pittsburgh African American population who have connections to the photographs. My clients pointed out that this design could be part on their website and used as a tool to reach out and find those community members. 
  • Moving Forward: I am looking into using Leaflet to add pop-ups over the images to give better feedback when users click them. I am also re-drafting my scenario to act more as a tool for community members to survey photos to see if they have information about them to share, as opposed to just adding metadata tags.