FIU Campus Maps is a web application that is intended for students to find buildings, places to eat, and more around campus. The goal of this project was to iterate a new design that would be user friendly, aesthetically pleasing, and responsive within two weeks.
For the second iteration, the project included myself as the lead designer and our lead developer. Also, in order to complete this project in two weeks, we focused on designing an MVP (minimum viable product) by embracing a Lean UX approach.
Research & Discovery
Our team spent the first day of this project researching the initial version of FIU’s Campus Maps. We wanted to find out how the tool was being utilized by the average student and also look over any feedback we had received in the past. The analytics showed that the site was being used quite often, with an average of around 500 people a day; however, the average person only spent about 10 seconds on the site. Also, most of the feedback that we received was about the confusion on the user’s location in relation to the buildings on campus because of the lack of a GPS or location service on the maps. Another common complaint was that Campus Maps was not a very mobile or tablet-friendly tool.
We realized that students would indeed visit the Campus Maps tool but would quickly get confused or frustrated at the lack of mobile support and/or location services. By the end of Day 1, we knew what the main problems were and the journey on how to fix them would begin.
After researching the main issues of FIU’s Campus Maps, our small team started to look at the specific areas we wanted to tackle for the initial launch.
Make a user friendly application that is responsive.
Make it easier to search for and find a specific building.
Add a “Places to Eat” search parameter.
Improve the search experience for parking, bike racks, and other non-building locations.
GPS or network-based user location that actually works.
To show all building locations for all campuses.
To show all locations to eat around the main campuses of Modesto Maidique (MMC) and Biscayne Bay (BBC).
Be fully responsive which includes mobile and tablet devices.
To show all parking lots and location for both MMC and BBC.
Be scalable to build so that future upgrades or features additions can be done with ease.
I spent the third day sketching the functionality of the interfaces. Since we wanted the web application to be responsive, a mobile first approach was ideal.
Also, we wanted to build on top of Google Maps to meet our goals. Two applications that initially helped me visualize how some of the new interfaces could look and function came from Pinterest’s Place Pins project and Slack’s off-canvas multi-level menu.
Lastly, Zurb's Foundation Grid was used for our grid layout system since it has a solid pre-configured off-canvas menu setup for developers and designers to work with.
Design Iteration - Round 1
Feedback was crucial to make certain that the design patterns sketched and prototyped were headed in the right direction. With the complete team at hand to help in this part, an issue arose when someone was looking at buildings and places to eat. Some locations had a long list of places to eat, which we found a bit unfriendly when someone tried to swipe on a mobile or tablet device to find a specific location. Another issue was that power users couldn’t quickly search through the food spots.
Overall, some more work was needed. A new design pattern was needed on searching/viewing buildings and for places to eat. Also, a new design pattern was needed for search so it would improve the experience for power users.
The following is an example of a new pattern of how someone would search for a building and a place to eat.
Design Iteration - Round 2
As the launch date approached, we reviewed everything we had completed so far to make sure it aligned with our research and project goals. Our lead developer had done a great job in setting up the basic interactions.
Once we had the web application close to being fully functional and aesthetically pleasing, we began to test with different platforms and browsers. Here is a list of what we tested Campus Maps on:
By launch day, most of the major issues were resolved. The whole team stepped in and assisted in wrapping up the project. Some minor aesthetic details were changed to fix a few accessibility errors and we made a few minor changes to the interaction details so the opening of the off-canvas menus were smoother.
Post Launch: Using Google Analytics as a UX tool
Google Analytics is a great tool to use to get an idea of how people are using Campus Maps. With Google Analytics, our team was able to analyze if people are understanding the new interface by observing how long users are taking on key interactions. We also were able to get an idea if users are having a hard time in finding things or not. In the future, these results will help us decide what the next steps are needed in order to improve the Campus Maps experience.
Our team noticed 70% of our desktop and mobile users located a building within 0-60 seconds of using Campus Maps. This leaves us with 30% of tablet users taking over a minute to locate a building. These results indicate that the main interface is user friendly but it definitely needs to be improved. We hope that with our next step in doing usability testing with students, we can observe why users may be taking longer to find a building and other tasks.