Caltrainyear is a data visualization project that imagines Caltrain speed data as a unit of distance measurement. The project included two parts — a poster representing Caltrain data and a translation of this information in an interactive format on Apple Watch.

Poster Design

Brainstorm Divergent Design

I did three versions of posters in total. After brainstormed with some data of Caltrain locomotives, I came up a new direction and coined a new term — Caltrainyear. The idea was from light-year, which means the distance of how long light can go during one year. So, a Caltrainyear means the distance of how long a Caltrain can go during one year.

In order to make the concept more clear and interesting, I used the distance between real places to show how many Caltrainyears they are from one place to another. Following images show the ideation and iteration route I went through.

Move from 2D to 4D

Iterative Design

The challenge of turing the Caltrainyear poster into an interactive version was how to distribute information based on time, especially turning it into an Apple Watch app.

The downside of Apple Watch is it has a limited screen size, but its digital crown is very useful to browse a list. So, the main idea of the interactive version was to show necessary concept and formula of Caltrainyear first, then let users browse a place list, which shared all three parts of the places in the poster.

Besides that, another thing I added was to give users a option to use their own speed to calculate Caltrainyear if they on a running Caltrain, which could add more fun to the app. After all, a Apple Watch app has more context we can utilize than a poster.

The first version of interaction design was quite linear — open the app, choose speed, understand the concept and start to explore. The problem of this version was it took three taps to show the core data. So, in order to bring the core data forward, I moved the speed option into the context menu (use force touch to open it) when browsing data, because choosing speed is not a key touch point on the using route. The following flow chart shows an improved version of interaction design.

Prototyping

Low-fidelity Prototype

I made a low fidelity prototype in Keynote, which was enough to test the interaction design. In terms of using Keynote to make prototype, the most useful features in Keynote are Magic Move, Scale, Disappear and Dissolve.