wesley close

Roots

Engage local citizens and tourist to explore Amsterdam from a different perspective.

Roots guides local citizens and tourist through the city with the use of fictional and non-fictional characters to explore the city from a whole new perspective.

  • Roles
  • Product Design
  • Client
  • School project
questions questions questions
The problem

How can we create an interesting tour through Amsterdam for as well the local people as the tourist?

In the previous design of Roots. The target audience were the local people of Amsterdam. That needed to change. The idea was to also add the tourists that are visiting Amsterdam.

The idea was to let users see Amsterdam through someone else his eyes. We wanted to accomplish this by the use of fictional and non-fictional characters that tell a unique story about their city.

wireflow
id feed
  • Step
  • 01

Pick a character

Go on a journey by picking one of the characters visualised in the starting feed.

id startpoint
  • step
  • 02

Navigate to startpoint

The tour starts at a central point in the city. Roots takes with the navigation to the starting point of the tour.

id startscreen
  • step
  • 03

Enjoy the story

Arrived at one of the checkpoints, their is a story waiting that one of our characters will tell through text and also audio.

id startscreen
  • step
  • 04

Navigate to next checkpoint

The navigation takes you to the next checkpoint. A screen with a new story will pop up when you arrive at the new checkpoint.

A flawless tour

The biggest challenge was to design an engaging tour experience. Our biggest focus was to get this right. Questions like, how do we combine the audio and text tour? Which interaction is needed to tell the system the user wants to go to the new checkpoint? How do we give the user throughout the whole tour an overview about the whole tour?

blocks point

Placing of the elements

Keeping the audio player always in sight, sticky at the bottom, makes it easy for the user to control the audio and discover its existing.

questions questions

Navigating between waypoints

With the navigation bar located above the map, it gives a strong signifier that the user can switch between route points with this functionality. A button laying on top of the map makes it also possible to tell the system you want to go to the next stop

blocks point

Eagle view

It's key to give the user an overview about the checkpoints that are still left. A simple feature located on top of the screen slides out on click with the complete route.

A style that suits Amsterdam

The whole experience takes place in Amsterdam. So it was kind of obvious to give the app a style that is an extension of Amsterdam. In an older version of Roots we used black and white. In the new version we picked a new soft red color. To represent the well known red color of Amsterdam.

The soft red color is combined with a white and grey color that gives a clear and peaceful contrast inside the application.

  • #ED4C65
  • #C9C9C9
  • #FFFFFF
blocks point

One beautiful font

We were really looking for a font that gives a the user a friendly feeling. Graphik gave us that feeling. A friendly modern font with some beautiful curves.

Created with Sketch.
blocks point

Playful forms

Keeping the forms round and playful throughout the app to keep in line with the typography. And to give a overall friendly feeling.

Evaluation

After all, we have to admit that Roots is still a concept. Roots could be a cool way to explore a city as Amsterdam from a new perspective. Of course there are a couple of flaws in the design and concept like the interaction the user goes through during their tour, and the way the text based story is visualised. Also we think the application needs a lot more testing with the target audience in the real environment.

  • feed
  • point
  • detailpage

Next project