The Flow Experience

To add an immersive experience to the chapter Spaces of Flows, we decided to give the user the experience of going through the Arnhem Station. We did our research on the best way to achieve this and we stumbled on some interesting solutions: Panorama view, virtual tour/virtual reality (example) and video scroll (example).

To keep the flow of the app (scrolling down) and have a subtle, not a gimmicky element, we decided to go with the solution of the video scroll. In order to make this video scroll, we had to go to the Arnhem Station and film the flow of the station. This immersive experience will be introduced at the beginning of the chapter (Spaces of Flow) which will overflow into the rest of the chapter as the user scrolls to the end of the video.

First draft:

IMG_0017-2

I filmed our first draft video (before the station was done) just to test it and have it as an example in the app. I combined the video scroll frames with a javascript plugin (threesixty.js) which animated the video on scroll. This plugin is, as the name suggests, a way to show a 3D model or an object by having 360 pictures around the picture (which we might still use in some other chapter). So actually this was not the right way to have the immersive experience because it was horizontal scroll and it was looped.

Second draft:

IMG_0017IMG_0017

So after further research, we found a way to scroll through a video vertically. This solution helped us improve the user experience as the user gets to scroll down the chapter. You, the user, expect the page content to move up and down, but it’s kind of surprising to move through the station that way. In its simplest form, all you need is a series of photos (commonly known as video) that show the movement through the station. Combine this with jQuery (change picture on scroll) and you get a immersive experience. It was also possible to have text/hotspots appear on the screen while you scroll through the content, and this made this video scroll even more interesting and nifty.

Third Draft:

 IMG_0016

To grab the most interesting part of the station, we went to film again (after the opening of the station) and tried to get the part of the twist. Unfortunately, we didn’t have the right equipment to film this part smoothly (as you have to go up the stairs and it wil get really shaky). A part of the video was chosen to show to UNStudio what is possible and how it should be integrated in the chapter (see the gif beneath).

video-scroll

Lessons learned from making a video scroll

In order to make such video scroll, you need a really good video recording equipment. We suggest to have a camera that can shoot at least HD in 50fps, but the most important part is to have a good stabiliser. The Glidecam or the Shoulder rig are some nifty stabilisers (needs some practice). Then you can search the web for video scroll tutorials or use this tutorial.

UNStudio requested something interactive and ‘fun’ and they were very pleased with this kind of interaction. This video scroll was made to make the chapter more interesting, as it had been very static content in the beginning. By using this kind of interaction, we made the user think they are part of the station, as they are the one moving through the station.

Share