Relational Mapping is an immersive web-based experience which highlights Glasgow's rich history in the form of an interactive, 3D digital environment.
My role was end-to-end designer, taking the project from research through to a live, publicly accessible website.
The outcome was an experimental interactive presented at exhibition to an estimated 25,000 in-person visitors.
A common point of contention in my home city of Glasgow is the tension between built heritage and new redevelopments, which often overlook the social or historical importance of a given site.
Highlighting issues Given that building plans are sometimes subject to public consultation, I developed an immersive resource for Glasgow residents to reconsider and engage with the significance of the city space.
Developing from scratch The interactive had to be prototyped and delivered completely solo, without prior development experience. At this point in time, agentic coding had not yet become commercially available.
Accessible platform I aimed to develop an experience that would run on all modern browsers, to avoid users experiencing the friction of downloading a standalone app.
Contextual research The tension between heritage and redevelopment is evident in local news reporting and political debates.
Primary research Primary research highlighted the fact that particular materials are key symbols of Glasgow's history.
Given this significance, key materials became the focus for the website's information architecture.
Researching interaction patterns I first explored some of the interaction patterns users would be familiar with from other mapping applications, to make movement around the space intuitive.
Principles for interaction The interactive was required to maintain immersion, for sustained engagement with the content.
Scoping UX/UI The design solution needed to be technically lightweight enough to run on a browser, accessible to a diverse audience.
Sketching architectures Based on research into existing mapping applications, I created initial indicative frames to explore potential approaches to displaying content.
Building in 3D To build the framework for the website and test initial approaches to interaction design, I developed prototypes with placeholder assets.
An initial build used 360° rotation around a single point as a setup to test experiences in 3D space.
User view snapping Further prototyping incorporated 'snapping' the user view to a new location, taking cues from Google Maps' Street View functionality. This prompted users to experience each material as a key focus which offers wider views on the city.
Given development took place before commercially available agentic coding, I relied on forums such as Stack Overflow to source code.
Models were spaced evenly to avoid imposing any hierarchy on the user's movement.
Image portals After issues arose with tracking the user's viewpoint across different programming languages, I incorporated a 'portal' feature, wrapping a 360° image around each camera view.
3D materials on the web Working website iterations up into higher fidelity required creating 3D assets compatible with web render engines, prototyping to identify the correct technical approach to displaying these components.
Graphic language My final approach to visual content developed a design system based on Ordnance Survey mapping, a familiar mapping design language for users in the UK.
Content visual design The design patterns of these maps prompted my approach to information architecture, while its iconographic style was expanded into a broader range of symbol components to represent highly specific contexts.
Assessing legibility Iterations were tested in the website at regular intervals to assess their spherical projection within the 'image portals'.
Testing prototypes Throughout the design process, prototypes were tested with users to gain qualitative feedback, assessing comprehension of content and interaction intuition.
Shown here is a user interacting with a high-fidelity prototype presented at an exhibition.
Publicly accessible live website developed across multiple programming languages and packages (A-Frame, HTML, CSS, JavaScript, THREE.js, jQuery).
Presented at exhibition estimated at ~25,000 in-person visitors.
Prototyping and user testing for experimental interaction models.
Web development with emerging immersive technologies.