Project cover image

Gothenburg Underground Tour

Using AR to tell the hidden stories of Gothenburg

Project Overview

The goal of the project was to create an engaging interaction between the physical and virtual worlds through AR.

Context

10 weeks execution time
Interaction Design Project
Chalmers University of Technology

Teammates

Amy Boulton - Artist/Concept

Skills

Interaction Design
UI Design
AR.js/Three.js

Gothenburg Underground Tour is a web-based mobile experience that gives tourists a peak into the hidden stories of the city.

For many people, traveling is about experiencing the locale as a local would, understanding the lived experience of the city. Gothenburg Underground Tour is a guided tour of the hidden stories of the city mediated through a web app. The web app uses AR and audio to present travelers with different realities at each of the four sites of the tour. Gothenburg Underground Tour is a collaboration with visual artist Amy Boulton whose work takes the form of site-specific installations.

Exploring the hidden underground

  • Augmented reality gamifies the urban landscape with AR markers placed at four specific sites around Gothenburg
  • Explore the installation site through a guided audio tour initiated by the augmented reality
  • Browse other 'hidden undergrounds' shared by other users on social media
  • Inclusive web app does not exclude users by platform

Animated gif of Gothenburg Underground Tour demo

Discovering the hidden stories

At each site of the installation, tourists can use their web browser to activate the AR content and listen an audio guide for the site.

Views of the AR content available at each site of the installation

Views of the AR content available at each site of the installation.

Live Demo

AR fiducial marker for demo

Try a preview of Gothenburg Underground Tour by opening this link on your phone and pointing your camera at the marker.

The full Gothenburg Underground Tour will officially debut later this spring as part of Valand Akademin's MFA Fri Konst exhibition.

Design Process

Our design process focused on creating an interaction between the user and four different sites around Gothenburg through AR. As this project was also an exploration of working with AR as medium, our process was very prototyping heavy, using an incremental approach to arrive at our solution.

User Persona
Smiling woman with hat

Greta W., 23

Education: Pursuing a Bachelors in Anthropology after taking a gap year

Quote: "I'm a traveler, not a tourist."

Familiarity with Technology
  • Her smartphone is the only technology she brings when travelling
  • Uses her smartphone to handle all of information needs while travelling: taking pictures, social media, hostel bookings, etc.
Goals and Motivations
  • Wants to explore the authentic city and travel like a local
Frustrations and Pain Points
  • Having limited Wi-Fi when traveling
  • Feeling crowded by other tourists when visiting iconic landmarks

We created a persona to reflect Gothenburg Underground Tour users and to understand what their goals and frustrations are.

Research

We researched other AR projects and apps to get some inspiration for potential interactions. We also wanted to understand the different limitations of different AR implementations.

Challenge
Deciding which framework to use was our first hurdle, since it would determine the limitations of the interactions. Our main considerations were which platform the experience would be available on and whether or not to use a marker or markerless approach.

Solution
We decided to use AR.js to create a web app instead of on a native iOS or Android app. Our persona Greta could be travelling with any mobile device so tying the expereince to a specific platform didn't make sense to us. A web application was also a more appealing option, since it doesn't exclude users from a certain platform or users who have limited storage space the way a downloaded app would. However, a limitation of using AR.js is having to use a marker to show the AR content.

Sketching

Based on the types of features and interactions we found in previous AR projects, we imagined how our persona Greta would interact with the urban landscape and the AR content. At this stage, we determined a general flow of how Greta would use the app.

Hand drawn sketches of the interaction flow of the installation

Some later sketches of the interaction flow for the app and how the virtual content would present itself.

Design & Prototyping

Throughout the design process, I built small, incremental prototypes that explored how the AR content would be presented. Some of the presentations we considered were orbiting and bobbing AR objects.

animated gif of orbiting AR objects
animated gif of bobbing AR object

Early prototypes of different presentations of the AR content.

Challenge
One issue we encountered is that the AR content would disappear if the marker disappeared from the user's field of view while trying to get a look of the AR content from different angles. This is because the AR content in the early prototypes appeared floating above the marker.

Solution
We solved the issue of the vanishing AR content by directly tying the AR content to the marker through a hole-in-the-wall effect. Coupling the AR and marker positions together linked where the user should point their camera and where content would appear. Moreover, the hole-in-the-wall effect fit in with the theme of telling hidden or underground stories.

Image of four different AR hole-in-the-wall presentations.

The hole-in-the-wall effects specific to each site. Left to right: A white house; Boxy tunnel; Underground river; Round tunnel.

Reflections

Designing and implementing Gothenburg Underground Tour was an incredible learning experience for me. I was able to do interdisciplinary work, balancing my goals as a designer with the goals of the artist I worked with. I also got to work directly with designing AR, which was a new experience for me and I am looking forward to exploring other use cases for AR.

While the experience of working on the project allowed me to step outside my comfort zone and work with a medium I wasn't familiar with, I did feel a sort of push and pull between my identities as a designer and developer. At times it felt like being a developer was at odds with my goals as a designer, but ultimately I am glad that my efforts in a complete app that people will interact with.

View related work

StageAR project cover image

View project

StageAR

Imagining how designers of the future design AR effects for live performances