Harboured Reality

An interactive Web Augmented Reality heritage experience for mobile browsers.

The Challenge

Historically, stories that have been told about a space have been revealed through plaques or monuments.

With the prominence of mobile devices, the ability to access more information about almost any topic within these spaces has increased. Which raises the question: how can media elements affect our perception of spaces?

The Approach

This project uses Web Augmented Reality (WebAR) as a means to explore space in an interesting way, without the need to download a native-app. The aim is to reveal something new to the user through a specifically designed website that augments 3D objects, curated content and mixed media right in the browser.

Referred to as ‘locative media’ or ‘virtual heritage’; this tailored experience aims to contextualise the space around Bristol’s floating harbour. By following a heritage trail, the user can interact with printed markers that trigger AR to overlay the urban space with audio-visual media.

Video detailing the final prototype.
Map showing the heritage trail along Bristol’s floating harbour and points of interest (POI) within Underfall Boatyard. Each POI has an AR marker that triggers augmented content within Harboured Reality.

Project Overview

The project followed an iterative process of refinement known as The Deming Cycle. Harboured Reality is broad in scope and therefore ambitious. By exploring multiple disciplines of digital media and the relatively new area of WebAR, the high-fidelity prototype successfully serves the needs of the Underfall Boatyard Trust.

Project Schedule

Gantt Chart detailing Harboured Reality project schedule.

UX Research Methods

Research for this project was conducted in various areas and include field research, ethnographic research, technical research and initial desk research to provide context to the space. Below are some of the methods used.

  • Semi-structured interviews
  • Longer expert interviews
  • Rapid Prototyping
  • Competitor Analysis
  • Observations
  • Field Sketches
  • Desk Research


The process of Thematic Refinement was used to analyse the short interviews and to identify patterns or overlaps in participant responses. It became clear that by adding another layer of information to the space brought a sense of context and appreciation to the immediate environment that would often go overlooked. Understanding of AR was limited among the subjects interviewed and demographics did play a role in this which informed design decisions later by utilizing onboarding and UX principles to constantly guide and provide the user with system feedback.

AR by its nature is user-centric.

Post it notes on a wall of thematic analysis.
Thematic Analysis.

As a result, the following themes emerged:

  1. Space – how the experience is seen to mix with the physical location.
  2. User – participants understanding of the technology involved.
  3. Media – preferences of media types that could be used.
  4. Content – what people may learn, do or experience.


AR by its nature is user-centric and throughout this project users have been consulted at various stages to inform on design decisions. The prototyping work flow consisted of low-fi paper prototypes and later hi-fi scenario based testing.

Prototyping workflow diagram.
Diagram of prototyping workflow.
Wireflow with linear navigation.
Wireflow showing global navigation
Wireflow with global navigation.


User Experience

Video showcasing custom map feature that details marker positions.

Media and Content




Dr. D Meckin – Project Supervisor
Andrew Blayney – Underfall Boat Yard Community Learning Manager

Underfall Boatyard with mobile phone in the foreground augmenting a 3D cartoon ship.
Harboured Reality at Underfall Boatyard, Bristol.

Tags: AR, Full-Stack, Interaction Design, UX