I work in the Communications and Public Affairs department at the University of Guelph as the Web and Graphic Designer. Our campus map was in need of an overhaul last summer and I was tasked with creating the new one. This was very exciting!

First step, research

I knew about Google maps, creating your own ‘my maps‘ using their markers and bubbles. This level of Google map, didn’t allow for custom design capabilities. I wanted something that I could efficiently display and create an enriching user experience. I researched and read many blog posts and Google’s support pages for developers, and came across Google maps API and the ability to create a unique map with the ability to customize it the way I wanted.

In the year we’ve launched the campus map, Google API has grown exponentially. Not being a web developer, I was learning as I was creating, bug testing, problem solving, creating code, and populating a new campus map.
I started with brainstorming and sketching out the layers and flow, looking at how people were interacting with the map, how Google map’s base tools will aid in this, and how I want the locations to look.


Second step, planning


Layers – After researching what information we had on campus, the different departments etc, I put together a list:

Layer 1 – Buildings – Dividing this layer into three types of markers and building types.

The Academic and Administration buildings on campus feature the main Google red markers, they are the majority of the campus buildings. The Ancillary and Recreation Buildings or landmarks are featured as purple markers. The Residence buildings use yellow markers.
Layer 2 – Parking – Keep the same structure that parking services uses for their permit types.

It is important to keep and correspond with how our campus experiences parking and designing that into the map. I created ‘V’ green icons for visitor parking; orange circles with a ‘P’ icon for the black/orange permit parking; ‘P’ yellow icons for student parking, to keep the UX consistent with the residence building markers.
Layer 3 – Police Services Emergency Pole stations.

I wanted to include these on the maps, not only for campus safety and awareness but also as a chance to promote the SAFEGRYPHON app. I chose a custom icon that was different from any of the other icons to make them stand out.

After planning out the layers and types, I started sketching out what the actual bubbles would look like, what they would contain, and how they would interact with our other map information web pages, keeping in mind UI and UX designs and flow.


Third step, design mockups

You can see in the images above and below, I wanted to display as much information as I could with very little room, that would work not only in browser but mobile as well. I chose to display the building names, numbers and physical address, the building hours if available, icons that display if there are accessible entrances, food, wifi, and public washrooms. I also wanted to make sure there was a link to the campus map page that corresponds to the building, and also an image of the main entrance. On these information webpages we have more in-depth information on building accessibility, departments that are in the buildings etc.

For the parking bubbles, I wanted to link to the parking pay-as-you-go website, and have the booth and visitor parking rates, right there on the map bubble for users to access right away, not having to click through and creating an optimal UX.
For the police poles, it was important to have the emergency numbers as hierarchy in the design, as well as a direct link to their SAFEGRYPHON app.


Fourth step, coding, design and creation

As I finalized the look and coded the info boxes using some JavaScript and css, I was able to create icons and the boxes exactly the way I designed.
Then came populating the information.

Physical resources provided me with a list that had all the information I needed, and I populated each and every bubble on campus. I also wanted to add a directions panel to go from building to building, much like the directions on a normal Google map. I was successful at implementing the directions panel but the directions would go from “university center” here to some place in the USA, etc.


The last step, testing and finalizing

My boss and I realized we needed to hire an advanced developer to tackle some of the more advanced coding. We worked with Barking Dog Studios in downtown Guelph to help us with the directions panel, building the search function, and adding the toggles to turn the layers on and off.
The campus map project was a fun and innovative project to work on. It was challenging but also exciting to build, design and implement.
Here is the final launched and live campus map;

Leave a Reply