Ui Design, Software, Animation

Interactive Video Kiosk

For the construction of the new Admissions Reception Center at BU I designed and built a multi-screen interactive video kiosk application that allows students waiting for an event to explore around 100 previously created videos. The video selection spanned the range of student and campus topics from dining to academics and would play at any one of three identical multi-screen stations mounted to the walls of the waiting area.

Leveraging HTML, CSS, Javascript, and Node-Webkit I created an HTML based web app that had an innovative & animated video grid. Upon selecting a video from the grid the user is shown a summary of the video and can opt to play it on the large video screen above the kiosk.

The entire web app runs inside a custom built Node-Webkit desktop application that also uses web technologies and runs automatically when the computer boots. It loads the web app, and creates two browser windows fullscreen on each display. The lower browser window with the video grid then communicated via Javascript to the browser window open on the top screen so that content can be passed up to it. The animations built into the app reinforce and integrate with the physical environment... when played videos "fling" themselves upward past the top edge of the lower screen and begin playing on the upper screen to merge the digital and physical worlds.