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.
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.