Make an archive accessible to experts and non-experts alike.

Intro / TDLR;

LetterStori.es is an interactive visualization that relates correspondence (letters, postcards, etc.) between different partners and places them in a historical context. Stories and thematic contexts that hide in the collection across several documents are comprehensibly linked up in curated “Stories“ and thus can be discovered and traced.

LetterStori.es for Raoul Hausmann

We created the first LetterStori.es project for Dada artist Raoul Hausmann in cooperation with the Berlinische Galerie Berlin, which manages and researches his estate. Raoul Hausmann played an important role in the Berlin Dada movement of the 1920s. He was known for his liberal way of life, which stood out in comparison with other contemporaries. Both his private life and his artistic work were marked by emotional correspondence, giving an intimate insight into his volatile relationships. From this, you learn a lot about Hausmann's worldview and the impetus of his creative work.

The challenge

Extensive data sets such as the estate of Raoul Hausmann are often hidden in archives and are difficult to access for the public. Our challenge for LetterStori.es was to show connections and interest in the stories behind the data. As an alternative to traditional solutions that provide access through a search input field and result lists, we used the approach of time-based network visualization to represent the data. This makes it possible to browse through the collection without explicit prior knowledge, to explore freely and discover new things.

The process

The Berlinische Galerie provided us with Hausmann’s correspondence archive. We started to exchange ideas for visualizing the data within the team. To do this in an organized manner we first collected key insights we had found interesting ourselves by looking at the data along with visualization methods and general topics that defined Raoul Hausmann as an artist. Secondly, we “mix-and-match” between these three categories to create new approaches we haven't thought of yet. To communicate ideas within the team and to make sure that all members have a similar picture in mind, we made use of paper sketching. After bringing our sketches to a certain level, we switched to Figma to refine them and to test the different user flows with a first static prototype. After we had finished the static prototype and the visual design we began developing a web application to test our approach with real data.

Discussion in front of a wall with a lot of post-its
Wall with post-its showing the network of Raoul Hausmann
We created a network of Raoul Hausmann’s exchange and collected ideas on how to visualize it

The first version we developed contains two main views: An overview screen where all letters from and to Raoul Hausmann are displayed within a timeline and a detail view screen that shows the transcript and scans of a document with its additional metadata. A core feature of our concept is “Stories”—curated sets of documents that are part of a letter exchange, share a common topic or provide interesting insights into the life of Hausmann. Documents that belong to a “Story” can have annotations to give the user a better understanding of the circumstances in which the writing originated or to guide him/her through the archive. If a letter of a story is selected by the user, the timeline shows only documents that are part of the same story to let him/her navigate easily between them and to give a visual clue on the extent of the curated set.

Screenshot showing the overview screen (Version 1)
First version screens: The overview screen showing the timeline
Screenshot showing the timeline (Version 1)
The timeline showing personal and historic events
Screenshot showing the letter exchange visualization in the overview screen (Version 1)
The “fishes” representing a letter exchange
Screenshot showing the list of correspondence partners in the overview screen (Version 1)
The list of correspondence partners
Screenshot showing the letter exchange visualization in the overview screen (Version 1)
Different colors indicate different storylines
Screenshot showing the detail view (Version 1)
The detail view screen shows a document within a Story
Screenshot showing the timeline of the detail view (Version 1)
The timeline in detail view shows other documents of the Story
Screenshot showing the left sidebar of the detail view (Version 1)
The left sidebar includes the Story’s metadata

In the middle of the semester, we presented our concept at the Massachusetts Institute of Technology in Cambridge, MA. This gave us the opportunity to discuss and evaluate our approach with literature studies experts on site. It also confirmed a central design flaw within our visualization which we already had discovered in our tests with real data before: The visual representation of the documents in the timeline (we called them “fishes” because of their shape) no longer worked satisfactorily after the total number of correspondence partners in the archive had increased with the addition of documents. It could happen that the partners involved in a document were no longer visible together in the viewport at the same time. This meant that the “fishes” went beyond the visible range and the desired clarity was no longer given.

Screenshot showing the default view’s timeline
The main design flaw of our first version: Not all partners are visible at the same time

A new approach (current status)

Back at home, we started working on a solution to the problem. We thought back to the core needs which we had identified for the documents’ visualization at the beginning: How might we give a visual clue about with whom Hausmann corresponded, when the correspondence took place, how many people were involved, how many documents were exchanged on a topic and which personal or historical events may have had an influence on the writings?

In result, we came up with a completely new approach on how to display the documents within the timeline. To test if the new way would succeed we updated our static prototype accordingly. But this time we used real data from the beginning to turn up design flaws earlier in the process. At the same time, we took the chance to eliminate some other UI/UX issues we discovered in the tests before.

Screenshot showing the overview screen with an updated visualization (Version 2)
New version: Overview screen with a different approach to visualizing the data
Screenshot showing the overview screen with a selected document (Version 2)
Select a document to get more information
Screenshot showing the overview screen with an activated search field (Version 2)
Filter data by searching for people, organizations or topics
Screenshot showing the overview screen with active filters (Version 2)
Manage search filters
Screenshot showing the letter exchange visualization in the overview screen (Version 2)
Different colors indicate different storylines
Screenshot showing the detail view with a highlighted quote (Version 2)
Interesting quotes can be highlighted and used in the document’s description
Screenshot showing the detail view with collapsed sidebar (Version 2)
Hide sidebar to have a fullscreen view of the document
Screenshot showing the detail view in transcript mode (Version 2)
View a full transcript of the document

The full concept is accessible in an interactive prototype with static screens.

Open interactive prototype

(Figma needs a while to load screens)

In addition, we created a web application that implements the majority of the concept’s features and uses real data.

Open web application

(Developed and tested exclusively with Google Chrome Version 70)

My learnings

In the process, I mainly learned that visualization concepts have to be evaluated with real data much earlier then we had done it first. Better an iterative process should be established that going back and forth between paper sketches, static prototypes and small live unit tests with the production data. After our mid-term evaluations, we had introduced more of this manner and we noticed the benefits quickly.

We are standing in front of an audience while our presentation at the MIT in Cambridge, MA
We presented our concept at the MIT in Cambridge, MA

The experience to work with cultural collections was new to me and I’m grateful for all the new insights into the museum sector I did not have before. I gained an idea of how much interesting cultural heritage is still hidden in archives’ basements and I had the opportunity to personally develop a better understanding of the value in making archives accessible to the public.

Next steps

Currently, the “Stories” displayed in the prototype are placeholders. We are working together closely with experts from the Berlinische Galerie to curate sets of documents which will be included in the web application then.

Active Archives

LetterStori.es originated in early 2018 as part of the course “Active Archives” at the University of Applied Sciences Potsdam, supervised by Prof. Dr. Frank Heidmann (Professor of Design of Software Interfaces) and Katrin Glinka (Scientific Management museum4punkt0 at the Stiftung Preußischer Kulturbesitz). The course dealt with the development of new formats that make archives explorable and accessible to the public.

Project name
Project timeframe
Apr 2018 – Oct 2018
My services
Information Visualization, Concept & Wireframes, UX Design, Visual Design

Next project

I took a new approach to how autonomous mobility will develop in the future and how vehicles will integrate into our lives.

I’m looking forward to hear from you at mail@casparkirsch.de or on LinkedIn / Twitter.