With a seamless and intuitive interface, Triton Nav is a kiosk application designed to help first-time visitors and students alike navigate around UCSD’s Price Center.
ROLE
UI/UX Researcher and Designer – User Testing, Wireframing, Prototyping, Visual Design
TEAM
Sarah Ando
Mariam Bachar
Sandy Nguyenphuoc
Kacie Takata
TIMELINE
Nov 2022 - Dec 2022
OVERVIEW
UCSD is full of buildings that are hard to traverse, and its a common story for first years to get lost trying to find their classrooms.
I collaborated with a team of UX researchers and designers to create a kiosk application to target that very problem. We had around two months to finish our user research and get a prototype out.
By December 2022, we were able to launch our prototype successfully and were met with positive reviews and feedback.
00 | FEATURES
Look around Price Center
See the layout of Price Center, check out your current location, and browse the different floors.
Select a location
Browse through the directory, search for a specific location, or tap on any location on the map to pull up information about the room – like hours of operation and any events taking place at the time.
View or print route
Once you select a location, click get route to see an animated route to your location. Scan the QR code on your phone to view the route on your phone or print a physical copy of the map.
01 | BACKGROUND
Google Maps exists. But why do students still struggle with getting to their classrooms?
Located down two skinny flights of stairs in the middle of UCSD’s Mandeville courtyard, is room MANDE B-210, or also “lovingly” known to most students as the Mandeville Basement.
The Mandeville Auditorium - what shows up if you look up Mandeville on Google Maps
To get to MANDE B-210, you have to go down the stairs through the door pictured above.
Every single person I know who had class in this room struggled to find it the first time.
The Basement is only one example of the numerous classrooms on campus that are hard to navigate to. Wayfinding apps like Google Maps are popular for good reason, but what about finding specific classrooms?
02 | FIELD SURVEYS + INTERVIEWS
No one even knows about the kiosks on campus.
Like Google Maps, the kiosks have an entire map of campus meant for users to interact with. The locations of the kiosks themselves are also in areas with greater foot traffic, so theoretically, students would already be aware of these kiosks and use them regularly.
Big surprise - they don’t. Out of all the interviews and survey responses, not a single student knew we already had navigation kiosks. So clearly, there was a problem with the existing kiosk design.
03| IDEATION + BRAINSTORMING
Rather than try to make a better Google Maps, focus on Triton Nav’s niche use.
So now we know that the main struggle students have with getting lost on campus has more to do with finding specific classrooms rather than a building in general.
With four floors, Price Center, the central student hub of campus, seemed like the perfect choice to prototype our first version of Triton Nav.
It was important to us to allow the users freedom to navigate how they wanted. We knew from our previous user testing that users have different ways of interacting with the app. Some prefer to use the search function but others prefer to just look around the map. The best way of dealing with this was to have multiple methods of selecting a location.
Task flow showing different methods of choosing a location
Wireframe sketches of task flow above
04 | VISUAL DESIGN
We wanted Triton Nav to be clearly associated with UCSD, but still unique enough to be its own product.
Since Triton Nav is designed to be used specifically on the UCSD campus, we decided to use the existing colors as a guideline. For typography we decided on the Poppins font as we agreed that it fit the "clean and minimalist" approach that we were going for.
The app design should be simple and there should be enough space between components so that users were clear on what they could interact with.
A logo was created by taking the existing Triton Logo and adding a wayfinder icon on top to resemble a path.
05 | ITERATION + DESIGN CHANGES
Adding Signifiers and Giving Users More Information
Between our lo-fi and hi-fi prototypes we identified a couple of issues users had with our visual design.
LO-FI PROTOTYPE DROP DOWN MENU
HI-FI PROTOTYPE DROP DOWN MENU
LO-FI to HI-FI RESTAURANT INFORMATION
Removed drop down elements to simplify interaction for user
Zoomed in on map to show location better
Included a get directions button as well as a return to menu button to allow users to either move forward or backward in interaction
"The kiosk is visually impressive and gives users a smooth UX. Solid implementation and professional. Amazing job!"
— Stephen
"Wow! I like how the route is animated. It makes it much easier to visualize how to get there than before."
— Cassandra
"Yeah the application definitely feels smoother than the original one! I think it could be really helpful to find small study rooms or whatever."
— Jessica
07 | KEY TAKEAWAYS
It's clear that the needs that we address with TritonNav are needs that other apps have tried to solve already. Google Maps is an easy alternative, but even UCSD itself has its own UCSD map app as well as the on campus kiosks that exist already.
The idea for TritonNav really started because we as a team have all struggled as students to find our own classrooms. What was most critical to this case study was our initial user interviews to see what specifically the problem was.
Our initial approach to TritonNav was to create a kiosk similar to mall kiosks where you could navigate between buildings. However, like our responses indicated, that wasn't the problem that students were struggling with. Instead, it's a bigger issue finding where a room is inside a building.
Although we did spend a significant amount of time updating the visuals and fixing the functionality of the original kiosk, the success of TritonNav is largely due to its niche use. We aren't trying to make another Google Maps, we just focused on the specific goal of helping students find classrooms, and that's what makes TritonNav stand out.
If we hadn't done extensive research and spent so much time with our initial user interviews, we would likely have missed this whole point and spent time designing an app that wouldn't get much use in the first place.