Sprint 3: From Sketch to Code

First Prototype

After weeks of endless conceptualisation, sketching, paper modeling, long conversations and debates, the members of our team is finally able to breath more freely: we started to work on our first working prototype. Together we strongly felt that a next step in development should not be simulating the appearance of the app with the help of Keynote, but rather embarking on a challenging quest of sketching directly with CSS, Javascript and making use of existing frameworks. Our workflow shifted from paper to an actual iPad screen. Meanwhile we welcomed a new team member Lucia, whose remarkable experience in web development helped us realise and materialise most of our ideas in just few weeks.

Group 1 copy 2

Fast vs. Slow

Firstly, taking into consideration the feedback from UNStudio, which was to make the navigation simpler but still intuitive , we completed our proposal for the navigation inside the app. Therefore a sitemap was made to explain the new navigation:

When the user starts the app, he is introduced to the app with a video about Arnhem Central Station, with the option to skip the video. This video gives the user a introduction before he has to purchase the app, but at the same time it might trigger the user to buy the book.

After the video, the user has to enter his code to unlock the app (this screen will only appear on the first time). When the app is unlocked, the user will be presented to the two navigation options, representing ‘fast’ and ‘slow’ modes. The user has also the possibility to access the colophon in this screen.

Depending on our time, there will also be a menu with bookmarks, tools and search function added to the app. In this menu the user can access his bookmarks, read about the knowledge tools (with references to the book) and search inside the app. This menu is accessible throughout both fast and slow options.


Slow Mode

As user chooses the ‘Slow’ mode of navigation, he is being introduced to a selection of different chapters. In attempt to simultaneously create a non-linear way of navigating, make use of color, and show the progress of user inside the app, we propose a circular menu. In this menu, each chapter is color-coded and has its own icon or illustration to help user to distinguish the contents.

Resembling an old dial phone and a fortune wheel at the same time, it offers user freedom to play with rotation and certain aspect of randomness. Keeping in mind the ideas of network, interconnections and flexibility, we believe that we achieve to communicate these values through unconventional interaction with the menu.

Screen Shot 2015-11-16 at 17.21.06

Spaces of Flow

The chapter Spaces of Flow will function as the model for the upcoming chapters. Its structure is divided in three parts: the “opening”, the “main” content and the “closure” of the chapter.

The “opening” of the chapter presents the title together with an introductory sentence followed by some visual highlight that best represents the overall concept of the chapter. For the second part our aim is to interpolate text and visual or sound material, to find a diverse rhythm throughout and until the closure of the chapter. We also have been exploring different options of immersive experiences to integrate and combine with more static elements.


Captura de ecrã 2015-11-10, às 13.48.33


Captura de ecrã 2015-11-10, às 13.49.57
Captura de ecrã 2015-11-10, às 13.49.42


While scrolling down in the chapter, the background colour will smoothly change from lighter to darker, to give the impression of “diving into” the content. This solution was found to give a more sensorial and subtle way of understanding a growth of complexity and a more in-depth approach in the subject matter.

To add an immersive experience in this chapter, a (test) video of Arnhem Central was captured that represents the flow of the station. Using javascript, a video scroll was made where the user can scroll his way through the station. In the next sprint, we will develop this element even further by adding hotspots.


Fast Mode: Timeline

One of the particularly interesting aspects of the content we’ve got from UNStudio is the timeline of the project. The unusual part is, that besides the factual information on the development of the Arnhem station, the timeline contains the historical and intellectual milestones, which have determined the chosen design approach.

Given such a large scope of knowledge in a very compressed form, we’ve decided to use the timeline as a fast mode of navigation. The interface consists of a horizontal scroll, where the user can go forward and back in time by scrolling to the right or to the left. Every image is connected to the dot in the linear menu on top, so the user can also jump from one time period to another.

The image below displays current development of an interface.
The current task is to create the structure which holds very different types of content and at the same time creates a smooth narrative.

Screen Shot 2015-11-17 at 10.20.52


On November 19th UNStudio will open the Station, and considering the event, we developed few ideas of intervention. Our goals were to promote an app and to collect the impressions and opinions. We thought of archiving the moment in the form of curated conversation with a journalist, which shall be later translated into a digital typographic animation. Unfortunately, due to the busy planning of the event we cannot install it during the event, so we are looking for the alternative ways to gather the content such as filming and sound recording.

Screen Shot 2015-11-16 at 10.47.20


Ready to Sprint

On November 5th we presented our progress to UNStudio team and received a positive feedback: the team specifically was amused by our experiments with interactions, that introduced the movement through space of the Arnhem station. In following weeks our goal is to build on the skeleton we created, improving and adding more visual layers. First of all, we aim to transform a flat surface of the chapter into a space of engagement by adding more hidden elements and surprises for a user. We will create a working prototype of a circular menu; we will fill in the content gaps inside the timeline. We also plan to art direct, film and execute the final immersive experience. And yes, the opening of the Arnhem station is ahead — a lot of preparations awaiting!

Although our current to-do list is long, we keep our heads up. After all, once our ideas get a material form, a will to explore and probe new grounds also comes naturally.