Denise NadalProduct & Design

Campus Maps app on iMac screens

Campus Map App

UIUX Design, Summer 2017

Development, Summer 2017


Our campus is always growing, so we needed a campus map that could change as quickly as our campus. Our previous map options were a 3-D interactive map, which was fun and engaging, but impossible to update, or simply displaying a pdf of the print map. I opted to create a customized Google Map application, which is responsive and easy to use on all devices.

DesignDesignDevelopment Process

For the design, I tried to integrate the university’s typography, color schemes and flat design approach with aspects of Google’s Material design in terms of spacing, economy of design and icon usage.

In earlier iterations of the map, the map area was contained in a box, and the legend/navigation was outside the box and part of the normal page flow. I found this to be disengaging for users, because the viewport for the map felt cramped. By making the map full-width and (nearly) full-height, users are able to dive into the map and explore, with the legend floating over the map for when they need it.

Designs for Functionality

The first implementation was simply a iframe embed of a Google MyMaps, but it was impossible to display the “Feature Pane” by default, which makes it difficult for users to know that they can interact with the map. For the first implementation, I focused on developing basic functionality; this included: organizing map features logically, allowing users to show and hide categories and individual map points, and clicking on markers to display more information about the buildings.

Plans for v2

Currently the data for the map is stored in a GeoJSON file which is read in by the Google Maps client. For the next iteration, I plan to have the map client read the data directly from a kml link generated by Google Maps. By using a Google kml file, users can use the regular Google MyMaps website to update the map that appears on our Campus Map page, meaning that it can be updated easily by an authorized user.

Another feature I plan to add to the next version is the ability to receive GET requests with query strings. This is would be used by departments or offices on campus who would like to embed/link to the map with their location pre-selected and highlighted.

A third feature I would like to integrate is to add a link to each marker’s description which would open directions to the location in Google Maps.

The Final DesignDesignProduct