TransLoc is a real-time transit tracking app used by UC San Diego students to view Triton Transit shuttle routes, stops, and estimated arrival times. It helps riders navigate campus by showing live bus locations and route information in one place. In this project, I redesigned the existing TransLoc mobile experience with a focus on clarity, speed, and usability for students commuting across campus. My goal was to reduce friction in route selection and arrival-time checking while improving clarity through clearer route direction and service status messaging.
Logistics
Date
Role
Timeline
Tools
Type
2026
User Experience (UX) Designer
1 week
Figma
Personal Project
Problem
At UC San Diego, campus shuttles are an essential part of daily student life, especially for students without cars and those commuting between colleges, labs, and central campus locations. TransLoc is the main tool students use to track Triton Transit routes and arrival times.
​
Since most students use the app on the go, even small usability issues can quickly become frustrating. In its current state, TransLoc often makes it difficult to quickly find the right route, understand direction, and confidently judge whether a shuttle is worth waiting for.
Challenge
The challenge of this project was to redesign the TransLoc mobile experience specifically for UCSD students. My goal was to reduce friction in the most common tasks: finding the right route, identifying the nearest stop, and checking whether a shuttle is worth waiting for, while improving communication through clearer service availability, more useful notifications, and an interface that prioritizes what matters most in the moment.
Research & Insights
To better understand where the current TransLoc experience breaks down for students, I conducted a usability-focused review of the existing app. Using a usability testing approach, I observed how UCSD students would navigate the interface while completing common tasks, such as finding a specific route, checking when the next shuttle would arrive, and determining whether a route was currently running. This method helped highlight where users hesitated, became confused, or had to take unnecessary steps to reach basic information.
​
Through this process, I identified several recurring UX pain points: unclear navigation and button labels, a map view that feels visually cluttered, and a lack of helpful feedback when shuttles are paused or arrival times are unreliable. These findings informed the creation of a student persona representing a typical UCSD student who depends on shuttles daily and needs fast, trustworthy information to move across campus efficiently.
Key insights:​
-
Route information should clearly indicate what’s relevant (i.e. next stops, delays, etc.).
-
Loop routes require a clear direction indicator (clockwise vs. counterclockwise) to prevent confusion.
-
The interface should provide clear service status states (ex: Live vs. Service paused) instead of leaving users guessing.
-
Shuttle arrival information must be easy to scan in seconds, especially while walking between classes.
-
Notifications should support real student needs, such as “shuttle arriving soon” and “service ending soon,” not just generic alerts.
Wireframes
Based on my research insights and user persona, I created wireframes to explore a clearer, faster way for UCSD students to navigate shuttle information. These wireframes focused on simplifying route selection, improving arrival-time readability, and introducing key system states such as route direction and service paused messaging while keeping the map as the primary context.
​
I decided to keep the general design structure as the existing TransLoc app to minimize any confusion for users who suddenly have to adjust to a new design. Rather than reimagining the entire application, I focused on making minimal changes that still made a difference. For instance, I included the counter-clockwise and clockwise symbols next to the "(OL) Outside Loop" and "(IL) Inside Loop."
.png)
Prototyping & Iterations
After completing the low-fidelity wireframes, I began refining the layout into mid-fidelity designs to strengthen hierarchy, spacing, and interaction patterns. I then created a clickable prototype to test key flows—such as selecting a route, checking arrival times, and understanding service status in order to identify remaining friction points. These iterations helped ensure the final interface was not only visually cleaner, but also faster and more intuitive for students using the app in real time.
​
After iterating on the mid-fidelity prototype and refining the core user flows, I transitioned into high-fidelity wireframes to finalize the visual design and interaction details. This stage focused on creating a cohesive UI system (e.g. typography, spacing, iconography, and component styling) while ensuring the interface remained minimal, formal, and easy to scan in real-time transit situations.
.jpg)
Below are key examples of improvements made from the original TransLoc experience to the redesigned interface, highlighting how the new design reduces confusion, improves clarity, and supports faster decision-making for UCSD students.​​​
Original
Original
Redesigned
Examples of changes I made include:
-
Shuttle route UI changes to improve hierarchy.
-
Green (Live) and red (Paused) dots to improve clarity, allowing students to know at a glance whether or not the shuttle is active.
-
Removing the "Search" icon at the bottom to reduce redundancy.
-
Adding a "Search" bar at the top to make it easier to access.
-
Inclusion of symbols by OL and IL to indicate route direction.
​
Redesigned
Examples of changes I made include:
-
"(OL) Outside Loop" header moved to tab to give a smoother transition.
-
Removed "Bus" to reduce redundancy.
-
Included directions to improve clarity.
-
Added "!" alert to notify any potential delays.
-
Changed "Close" to "Routes" button.
Conclusion
This redesign explored how the TransLoc experience could better support UCSD students who rely on Triton Transit shuttles to navigate a large campus quickly and efficiently. By prioritizing clarity, scanability, and real-time decision-making, the redesigned interface reduces friction in common tasks like selecting routes, checking arrival times, and understanding service status.
​
If I were to continue this project, I would conduct additional usability testing with a wider range of students, including commuters and late-night riders, to validate the design across different needs and schedules. I would also further refine the notification system and expand accessibility considerations to ensure the experience is reliable and inclusive for all riders.
