Static to interactive: QAGOMA map 2016

Queensland Art Gallery / Gallery of Modern Art needed an interactive solution for wayfinding that showcased both of the gallery’s buildings. Previously, static images of each floor were provided on the website and up-to-date maps including exhibition information could only be found in brochures.

An interactive map would gather data from the website calendar to automatically provide up-do date information on exhibitions.

map in use on an iPad Map in use on an iPad

User needs

The primary users would be current or future visitors to the gallery. The gallery is spread across two buildings, 5 minutes walk apart. Users commonly didn't know which of the two buildings was holding the exhibition they had come to see before arriving at the gallery.

Other frequent users would be gallery services staff who could assist wayfinding in person by showing the maps to visitors on tablet devices.

The map needed to show:



  1. Requirement gathering
  2. Technical investigation
  3. Mockups
  4. Stakeholder feedback
  5. Interactive mockups
  6. Further feedback and approval
  7. CMS integration
  8. Publishing to live site

Requirement gathering

I spoke with various stakeholders to get the initial requirements for the interactive map.

initial sketch Initial sketch

Technical investigation

I selected Leaflet.js as a library for the map.

I created custom map tiles from PDFs, mapping out the coordinates of each building feature and converting them to JSON to show each feature as a pin with an informational toolip.

The website JSON was drawn in to populate the exhibition information and images into the tooltips.

Interactive mockups

I produced interactive mockups for final approval and testing. Many tweaks were made to optimise the user experience, especially on mobile.

Interactive mockup Interactive mockup

Lessons learnt

Performance: the interactive mockup was not a good indication of performance, retrieving assets through the CMS added to load time, especially the first load of the map.

JSON configuration: this format worked really well with the existing site information and also to store the map data. It should be easy to modify if and when the layout of either gallery changes.

Designing for re-use: The same map engine was subsequently used for an internal app for fire safety training. A more detailed version of the maps were used with pins to show the locations of all fire safety equipment and fire exits.

The map is still in use on the QAGOMA website.