Exploring Timelines Through Cause & Effect Relationships

Currently In Progress


Information Design, Systems Design

User Interface Design, User Experience Design


Project Statement: To create a mobile platform that allows high school students to explore history through timelines that are based on cause and effects relationships.




ADAA 2017 Semifinalist



Adobe Design Achievement Awards - AdobeAwards.com


Issue Date





I was looking over the original NASA Apollo 11 Mission Log and I noticed that it was full of timelines that were presented in ways I had never seen before. There were timelines presented on vertical systems, circular systems, and a multitude of different graphs. This led me to ask the question, Why are all timelines in the education system presented all in the same way?

Research Cont.

When comparing timelines used in schools across the country in all levels of education, I found that they were all similar in a few different ways. They were all long horizontal lines or digital data bases (such as the examples below), that were a majority text with limited to no use of image or interaction. This presentation of history seems outdated and does not take advantage of the technological affordances that schools have. As younger generations enter the classroom we see that students are much more engaged with the material when they are presented with hands on visual-technology. If we want young students in todays classrooms to become fully immersed in the subject matter they are being taught, schools must adapt with their need for an interactive learning experience.

System Ideation

To fill this void in classrooms, I created a system of timelines that lives on a mobile surface. This database takes the timelines presented in today’s high school classrooms, and allows students to explore these different periods of time through cause and effect relationships. For example, you can see the moving parts of World War II. The Allied vs the Axis Powers are represented as two opposing timelines below a collection of historical artifacts. As students explore and interact with the different images, videos, and historical artifacts in a range of time they start to make connections on how certain events caused the opposing powers to react. These reactions are then mapped on the timelines below and students receive a visual that shows what actions caused what reactions, and how these relationships played a role in the overall period of time. I started by paper prototyping and creating multiple ways to represent this information, how to show the relationships clearly, and how to allow for exploration of a period of time.

Creating the System

I came up with a system where students are led throughout a period of time through a number of different elements. The major element being the artifacts that are held within the rectangles above the timelines. These rectangles then react to different events in a number of ways. The rectangle’s size coordinates with the importance of the event. For example, events such as The Treaty of Versailles hold much greater importance than images showing soldiers returning home from war, therefore the rectangle is larger. The rectangle's color coordinates with the opposing sides of the event.


As students scroll through time and explore the artifacts above they will start to notice the timeline graph below change. Students can switch on a number of different filters that allow them to compare and contrast how each side of the war reacted to certain events. Such as, when Hitler invades Poland you will notice a spike in Allied troop count around September 1939. There is also a map in the lower left hand corner that allows students to track who controlled what, creating landmarks around certain events. All of these moments are important because it will create mental and visual notes for students to recall while they are taking test. Below are the current screens in progress.



Next Steps

From here I want to continue tightening up the screens themselves and put them through more user testing. I also want to start mapping out the motion and transitions of each screen and how each element reacts on a tap. I also want to expand the screens and allow for a preview of how the app scrolls and how the timelines will react to scrolling. As well as Implement a map system to show how Europe and Eastern Asia changed throughout the way. Also add a "major players" section to allow students to recognize major names for memorization and testing purposes.