Visualizing Cultural Collections:
Slide in Time

Visualizing a cultural collections containing 13,000 dias to create a comprehensive and explorative interface for curious and scientific users.
Header Screen der Seite, Darstellung eines Dia-Haufens, der erkundet werden kann
The Scope
In his early days as a lecturer at HU Berlin, Peter Feist traveled to many different countries to document important artwork there, as well as exhibits.

In his time, slide films were the most common method to show students personal teaching material.

After his passing in July 2015, as a passionate art historian, he thus left behind a collection of about 30,000 slides.

In the course "Visualizing Cultural Collections" we had the task to find a suitable form of visualization for this cultural collection.
The Team
Maryna Honcharenko is also an interface design student and has been at the UAS two semesters longer than I have. Together with me, she is responsible for the design work, as well as the project's implementation into a click prototype.

Myriam Hofmaier studies cultural work at department 2 and is therefore involved a lot in moral questions, as well as conceptual discussions. She also contributed significantly to our scientific article.

Giacomo Marinsalta is a Master student in European Media Studies and also supports the project from a conceptual point of view. Moreover, together with Myriam, he wrote most of the scientific article that we were allowed to publish at the HU afterwards.

I supported our team with ideas, as well as visually implemented many concepts with Maryna, so that we could decide together as a group which variant we prefer. I also wrote the code for our Python scripts that enabled our final visualization.
Design Process
Initially, we spent a lot of time thinking about what our visualization of the slides should look like, which led to many suggestions being collected.

Over the course of the project and after discussions with our collection partner Dr. Schelbert from the HU Berlin, we realized that there has to be more than one view as visualization.

We combined many of the possible arrangements and divided them into screens that are dynamically adaptable through filters.

As soon as we were able to present our first prototype, we held a workshop with everyone involved in the project from the HU to explore further options and gather initial feedback.
Mosaik-artige Anordnung von drei Dias
One idea was to arrange the images like a giant mosaic. The further out you scroll, the more slides appear that can be clicked on.
Weltkarte mit kleinen Punkten, die einzelne Dias mit deren Herkunft verbinden soll
The obvious thing to do was to locate the slides geographically and show historical connections. The data would be available for this, but unfortunately the locations were mainly in Germany and thus too close together.
Tagebuchartige Darstellung von einzelnen Dias auf einem Papierhintergrund
From a narrative perspective, we considered arranging the images in a digital diary and grouping them thematically. However, the data set was too large for this.
Dias in einer Box, aneinandergereiht
Emulating the actual store reoom, we wanted to put the slides in a digital box that could be scrolled through. With one click, you could have called up a single slide.
Finally, we were excited by the idea of examining the image data for its dominant color and thus encoding the image itself.

Since the slides have been stored for a long time, aging processes have repeatedly become visible on them, giving the respective photo a tint or even small stains.
Dia mit Beschriftung und Farbflecken
A dia with visible stains.
Dia mit Beschriftung und Farbstich
Example for possible tints in a dia.
In order to implement this project, I dealt with the necessary code and wrote a small tool that calculates the dominant color from all 13,000 images and stores it as a single image.
Screenshot eines Dias mit den daraus extrahierten Farben (dunkle Violetttöne)
The output of the algorithm can be seen on the right with different settings.
Through a tolerance parameter we could set the accuracy of the algorithm.
User Interface
In the style of an explorative museum visit, our interface offers room for playful interaction in the first view. Curious users can then click on any slide to learn more about it and get the corresponding image data.

In a gallery, the slides can then be browsed through just like in the past, preserving the feeling of sitting in front of a real slide projector.

Our work shows both sides and demands there are on the visualization: On one hand people want to explore the unknown collection and have fun doing so, on the other hand there are employees at HU Berlin who maintain this data set and want to enter specific search requests.
Prototype
The prototype is a click-through visualization of our different views, which we fed with real data from the collection.

The images are actual slides from Peter Feist and the individual colors in some filters, come from calculations done with the images.

Due to the fact that we used about 500 of these images in the prototype, some visualizations may take some time, as Figma does not seem to be designed for such amounts of data so far.
Sadly, the prototype doesn't work on smartphones
Sometimes the prototype needs some time to load all images. With a click in the loaded prototype and the key "F" the fullscreen mode can be activated.
Outcome
After our final presentation, the HU was very pleased with our result, as we were able to realize the desired duality between a tool and an explorable visualization.

From a narrative perspective, there may still be potential to guide the users more, in the sense of a guided museum visit.

Overall, however, we as a team are very happy to have mastered this complex project and to be able to celebrate our first publication ›.
TimeSpan

4/2020 – 10/2020

Team

Myriam Hofmaier
Maryna Honcharenko
Giacomo Marinsalta
Leon Wolff

Programs

Figma
Sketch
Python 3.8

Supervision

Mark-Jan Bludau
Viktoria Brüggemann

More Projects
Phone Mockup with example Content
UI/UX Design
Mashup: Socy

Our App helps users to get back their social life and fortify relations after the pandemic.

Screenshot of the improved amazon website
Typography
Digital Typography: Amazon

My careful redesign for an Amazon shop view with special attention to typography.

Menu