A Twist At Every Turn

A twist at every turn is a browser based experience highlighting the vast range of experiences on offer in Melbourne. The experience accompanies a film where each scene transforms in tone, the viewer is encouraged to twist and turn their smart phone to navigate their way through each of the scenes. In landscape mode the film plays as normal, then when the phone is twisted to portrait mode vertically scrolling content is shown relating to that precise moment in the film. Content can be favourited along the way revealing a personalised itinerary at the end of the experience.

View the experience here

Accompanying the 12 uniquely styled scenes in the film I created a style for each of them. To speed up development, rather than creating 12 uniquely styled pages simple rules were setup. Each theme had it’s own colour palette, headline font and cover image assigned.

Again, reducing the amount of development work involved, the content was templated. I created four different layouts to display the entries. Each content block used one of the four templates at random. This allowed for simple implementation but still made the page feel somewhat unpredictable—which was the goal. Each of the elements in the template moves into the screen from different directions, creating a very unique effect as the user scrolls the page.

While the experience was mobile first, the desktop experience wasn’t neglected. The website was fully responsive. Obviously it was not possible for the user to twist their desktop to navigate, so another solution was implemented. A ‘Twist’ button sat at the bottom of the screen, when hovered the button would break into two imitating a twist acton. Once clicked the screen would transition to the discovery content.
Horizontal scrolling was used to further the ‘unexpected turns’ narrative. The content would enter and exit the screen from different angles as the user scrolled.