We’ve launched our new campus map and I thought it would be a good opportunity to discuss some of the new features it delivers and why we’ve made the change.

We had a campus map, why did we need a new one?

The campus map is often the forgotten child of a university website. Seen by many as “just a list of buildings on a map”. For many first time visitors to campus (such as prospective students and freshers) it’s one of the first ports of call in finding their way around. That makes the campus map a valuable tool for conversion and for helping our new students feel more at home.

Our old map was very much comparable to what you’ll find on many other university websites today. Over the last five to six years it had undergone some re-branding, schools and colleges have moved around, but at its core the map hadn’t changed much. Five years is a long time on the web and the way we consume content, and the devices we use to do so, have changed in that time.

At the end of May we hosted a weekend long celebration across campus for our 50th anniversary. The alumni weekend had many different events across campus and many visitors who needed to know what was happening when and how to get there. This gave us a fantastic opportunity to re-visit the campus map.

A campus map fit for Scotland’s top university

Developing our requirements for the new map with the team working on the alumni weekend allowed us widen our scope. The map did need to provide the core functionality of the old one but it also needed to work for events. As a visitor to campus I need to be able to see where I am and how to get where I want to go, not just see a marker on a map I’m not familiar with.

The new map:

  • is searchable across locations and events
  • provides event information tied to locations on the map
  • provides a location and directions service
  • is usable on any device with a responsive mobile friendly design
  • pulls information from golden copy sources wherever possible
Image of the old campus map vs the new campus map

Old map vs new map

Behind the scenes

We’ve used the latest version of the Google Maps JavaScript API as the platform for our new map. This allows us to use many of the more advanced features which weren’t available to us on our old map such as Geolocation and the Direction Service.

Our design team put together a great looking interface with the map itself taking centre stage providing a much improved user experience. The look and feel of the new map aligns with our new brand using Zurb’s Foundation framework as a base. The design is responsive and works well on wide array of devices.

We pull event information from our content management system ensuring one source of the truth for events. This gets linked to events on the map so we can show what’s going on at each location or where events are happening.

To help with performance we’ve used build tools like npm/Bower/Gulp to combine and minify CSS and JS. We’ve also implemented lazy loading of images in our search results to save bandwidth and decrease load times.

Making good use of the map

The new map lives at https://www.dundee.ac.uk/campusmap but you can also use the short-link uod.ac.uk/campusmap.

If you see something on the map that you don’t think is right or you don’t see something you expect to be there log a call with Help4U and we’ll look into it.

Finding your way around campus

If you ever need to know where you are on campus open up the map and it should place a marker at your current location (assuming you’ve granted location access to the map and you’re using WiFi or have a mobile phone signal).

You can find out how to get from where you are to any of the locations on the map by (or from one to the other) by clicking on a location in the search results and using the directions service.

Linking to the map for events

If you’re hosting an event you can link directly to a location on the map:

  1. Find the location your event is using.
  2. Open the location details by clicking the location in the results tab (or by clicking on the map marker).
  3. Click the “Click to copy a link to this location” link, this will copy a direct link to the location to your clipboard.
  4. This link can be used in event details for listings in Eventbrite, email campaigns, and when submitting the event for listing on the website.

Listing your event on the map

When submitting your event via the events form on the University website you will see a new field called “Campus Map Location”, select the location(s) where your event is taking place and it will be listed against those locations on the map once the event has been published.

Where do we go from here?

The map we have now has met the ambitions we had when starting the project but as I said at the start of this post, the way we consume content is ever changing. We’re looking at the way people are interacting with the new map, tools like Hotjar and user testing are helping us develop new requirements:

  • making it easier to find information about schools and colleges
  • adding bounding boxes for locations like car parking

We’re already working on providing better content for locations, and information on accessible spaces for parking.

Combined with other forms of user testing and feedback we’ll continue to enhance the campus map to better serve our users.