Check out the video above to see the timeline in action.
To celebrate Kansas City Union Station’s 100th anniversary, Monica Roesner and I created an interactive timeline that provided and immersive history of Union Station, Kansas City, and the United States. We focused on the 2000’s era, so the aesthetic of the timeline is rather refined and modern, utilizing flat colors and simplicity to create a successful visual system. The system was also carefully constructed as to not take away from the content presented within the timeline. Gestures were also rigorously thought out as to allow viewers to easily navigate the timeline but also push how most gestures used today are used.
In order to add another layer of depth to the timeline, we decided to implement the timeline on a clear LCD touchscreen, which brought focus to the actual surroundings of Union Station and also called out certain aspects of the building and history. In addition to the linear timeline (the main portion of the timeline), we also created a more immersive narrative that utilized augmented reality to allow people to interact with Union Station through the clear touchscreen by overlaying videos and imagery onto the physical surroundings of the train station.
The interactive timeline started with sketches of the initial UI and then developed into digital wireframes. You can see a glimpse of the process above, but there were many more sketches / wireframes Monica and I did. We paid close attention to accepted gestures that people use on a daily basis and how we could expand on those. We also did iteration after iteration of how the interface looked, where buttons were placed, how the icons would look, how the user would get from section to section and page to page, and how the navigation in the gridded section would actually work. We really tried to leave no stone unturned.