©2020 Built with love by Nick Howland.

union station interactive timeline

1_home-screen_NickHowland
[blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”]

[union station timeline]

client : kcai narrative class
software : adobe photoshop, keynote
categories : interactive design, motion design

 

 

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.

[blank_spacer height=”130px” width=”1/1″ el_position=”first last”] [divider type=”thin” text=”Go to top” full_width=”no” width=”1/1″ el_position=”first last”] [blank_spacer height=”130px” width=”1/1″ el_position=”first last”] [sf_gallery gallery_id=”1968″ slider_transition=”slide” show_thumbs=”no” autoplay=”no” show_captions=”no” enable_lightbox=”yes” width=”1/1″ el_position=”first last”]

[process]

 

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. 

[blank_spacer height=”130px” width=”1/1″ el_position=”first last”] [divider type=”standard” text=”Go to top” full_width=”no” width=”1/1″ el_position=”first last”] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [portfolio_carousel item_count=”12″ category=”All” show_excerpt=”no” excerpt_length=”20″ alt_background=”none” width=”1/1″ el_position=”first last”] [blank_spacer height=”30px” width=”1/1″ el_position=”first last”] [divider type=”standard” text=”Go to top” full_width=”no” width=”1/1″ el_position=”first last”]