“Einsteigen, bitte!” — An interactive museum dedicated to Berlin U-Bahn typography 

Background

Berlin U-Bahn is a unique place where a lot of exceptional old typography has been preserved. It’s an underground museum that is almost impossible to explore, because travelling between stations is very much time consuming, and also plain difficult because of the scale.

I want to put this physical museum into a digital space, improving its availability to general public — to people who are interested in public transport, history, typography.

Idea

Create a website — an online interactive museum — that would feature all the photos of every U-Bahn station, and put that in context of 1) maps, 2) typography, 3) history.

But wait, everything is on Wiki Commons already (or elsewhere)

There are at least two projects with very similar ideas in mind:
They’ve done a fantastic job in collecting all these materials together. There’s one thing missing, though: narrative. This information needs to be presented in a more appealing way (both in terms of interaction and in terms of provided content), so that visitors are encouraged to explore and learn.

Location. Specifically, I suggest that connecting the photographs of stations with their physical location — putting them on the map — improves understanding of what’s going on.
Time and history. All the 170 stations that are active now didn’t all happen simultaneously. What are the first 6 lines that were opened in 1902? Initially the lines didn’t have numbers (U1, U2, etc.) like they have now but instead were just referred to by their colours. What happened to the subway during the isolation of West Berlin? Looking at the old maps provides breathtaking insights.
Typography. Finally, the sheer variety of styles and the reasons why Siemensstadt (U7) station is set in Gotham opens room for lengthy explorations and interesting discoveries.

To sum up

These would be the cornerstones of the narrative: location, time and history, and typography.

Goals

  • Enable looking through Berlin subway stations in an easy way
  • Explore typography
  • Have fun

Core concept

  • The map is the main object of the website
  • The interface is largely based on hover interactions, and somewhat uses scrolling when appropriate
  • There are no pages per se — rather, the website becomes an environment for exploring the content, and feels much more like an app, or, even better, a physical room
  • (See the gif in the very beginning of the doc)

Design drafts

Website main screen

Signs study

Note the variety of typefaces and styles

Research

Photos of stations (that’s all one line btw, U7, note how different the station interiors are)

Time travelling

Exploring how subway changed and evolved over time
(Time slider on the bottom, highlighted stations of the current map + old map of that time if exists)

Mother, look how organized we are

Links

Major

BVG map (PDF)