Case Study: MTS Pronto App Redesign
Duration: June 2022 - Sep 2022
Role: UX/UI Designer, UX Researcher
Tools: Figma, Adobe XD, Photoshop, Google Sheets
From Frustration to Flow.
In Southern California, especially San Diego, residents face a significant transportation challenge. High car ownership costs and environmental concerns drive the search for alternatives. Despite this, public transit usage lags.

My project aimed to boost public transit usage in San Diego by enhancing the local transit authority's app for a better user experience. By addressing issues experienced by users we can create a more intuitive & seamless user experience, & in turn encourage San Diegans to opt for public transit more often.
Jump to the Full Prototype
View Prototype in Figma

Design Process

Empathize

  • User Reviews
  • User Survey

Define

  • User Personas
  • Empathy Maps

Ideate

  • Opportunities
  • Wireframes

Prototype

  • Updated Style Guide
  • Hi-Fi Mockups

Initially, I wanted to get a feel for the curent app and see what issues were causing the users the most trouble. To do this, I conducted an analysis of the application and interacted with users to try and pinpoint areas of concern. These findings directed my initiatives to improve the application, guaranteeing its alignment with user requirements and choices.

The App

The app itself has three main features rider interact with:
Use
The app's main hub. Used to activate a fare, check balances, and view transfer window. Initial page Users see.
Manage
This is where users will load money into their account to purchase fares, or purchase monthly passes.
Manage
  • This is where users will load money into their account to purchase fares, or purchase monthly passes.
Trip Planner
Users can check real time transit info, locate stops and plan routes.

Qulalitative Research

Next, I wanted to get an idea of common issues users experienced when using that app. For that, I started by analyzing reviews on the Google Play Store. The following reviews highlight the most frequently reported issues by app users.
"There was one time that my connection just dropped literally right before the bus pulled up to the curb and the QR code wouldn't even load"
"You can't purchase day passes. You have to purchase one way. Its more expensive to use than using Compass."
"For new people to this app it is confusing as it can get"

Quantitative Research

To further my understandiong, I put together a breif survey and shared it to the r/SanDiego subreddit, asking users to share their experience using the app. The goal of the survey was to assess overall satisfaction, pinpoint areas for improvement, and reveal factors impacting app usage. I recieved 34 responses.

Which specific features or functionalities of MTS' Pronto app do you find the most useful? (Select all that apply)?
23.5%
23.5%
73.5%
2.9%
5.8%
11.6%
Other
Other
Adding Money to My Pronto Card
Service Alerts & Notifications
Fare Purchasing & Mobile  Ticketing
Trip Planning
Real Time Transit Info
Other
23.5%
23.5%
73.5%
2.9%
5.8%
11.6%
What is the most significant factor preventing you from using public transit more frequently? (Select one)
Inadequate route coverage - 64.7%
Cost considerations 5.9%
Lack of convenience 23.6%
Safety concerns 2.9%
Other 2.9%
I also included some open ended questions. The following represent some of the most common responses to each question.
Have you encountered any specific issues or challenges when using MTS' Pronto app? If yes, please describe briefly.
"It is difficult to scan the QR code in the app on trolley platforms."
"Yes, unclear about purchasing ticket then having to scan at the trolley stop."
"The map could use a little improvement."
Are there any particular areas or aspects of the app’s user interface that you find confusing or difficult to navigate?
"Navigating to the 'Managing Card' section seems to take longer than it should."
"The sign up process is long and complex compared to the Uber or Lyft sign up process."
"Trip planning and arrivial times."
Which specific improvements or new features would enhance your experience with MTS' Pronto app?
"Tap to pay."
"Being able to purchase a single day transit pass without having to scan at the trolley stop"
"Allow us to pick how much money to put in instead of choosing 5 (dollars) as minimum"

Empathize

  • User Reviews
  • User Survey

Define

  • User Personas
  • Empathy Maps

Ideate

  • Opportunities
  • Wireframes

Prototype

  • Hi-Fi, Interactive Prototype

User Personas

The next step involved utilizing this information to develop user personas for the app. While I had insights as a current user, I aimed to encompass the diverse needs of all potential users, not just my own. Therefore, I crafted the following user personas to showcase the range of experiences users might encounter. This approach enabled me to customize the solutions to effectively meet the genuine needs of the users.
“I use the Pronto app occasionally for specific destinations and events, but I wish it was a more convenient .”
Goals
  • Sally enjoys exploring new places and attending events around San Diego.
  • She prefers using public transit when it aligns with her plans and to reduce her carbon footprint.
  • Discover cost-effective and efficient transportation options for her weekend getaways and social outings.
Needs
  • User-friendly fare purchasing and ticket activation process for easy access to public transit.
  • Real-time transit information to plan her trips efficiently and avoid wait times.
  • Seamless integration with event schedules and local attractions to align her travel plans with upcoming activities.
“I use the Pronto app frequently to plan my daily commutes, but I would like to see improvements that streamline my experience.”
Goals
  • Alex commutes to work dailyand seeks cost-effective transportation options..
  • He relies on the Pronto app forreliable transit information during his daily commute.
  • Enhance his overall commuting experience by finding convenient routes that allow him to relax and enjoy his journey.
Needs
  • Reliable and accurate real-timetracking to know when the next bus or trolley will arrive.
  • Seamless integration with payment options, ensuring a quick and convenient fare purchase process.
  • Access to personalized commute recommendations and alternative routes to avoid delays and optimize travel time.
“I'm in town for work and I would like to use the trolley to get arround However, I'm finding the app quite difficult to navigate.”
Goals
  • Ryan's primary concern is having reliable transportation to navigate an unfamiliar city.
  • He appreciates a smooth and hassle-free journey during his commutes.
  • Effectively plan trips to the convention center for work and explore the city during his free time.
Needs
  • Simple onboarding process.
  • Seamless integration with payment options, ensuring a quick and convenient fare purchase process.
  • Access to route information and optimized travel options to minimize time spent commuting and maximize time at the convention center or exploring the city.

Empathy Maps

Additionally, I created the following empathy maps for each of the personas above to gain further understanding of users needs, thoughts, feelings & behaviors.

Says

“I love exploring new places & attending events around town.”
“I appreciate that public transit helps reduce my carbon footprint.”
“I wish the scanners & QR code were more reliable.”

Thinks

This should be more intuitive.
Which stop am I getting off at?
What Time is the last trolley?
How much is a Lyft?

Does

Checks transit schedules.
Loads money onto account.
Activates fares using QR code& station scanners.
Checks transit maps.

Feels

Confused trying to navigate the app.
Frustrated with scanner.
Excited to explore San Diego.
Proud for choosing more sustainable travel option.

Says

“I rely on the transit schedule for my daily commute.”
“I like that using the app helps me save money.”
“The scanner is really bad.”

Thinks

How much money is loaded on my card?
Are there any delays?
Instructions in the app could be clearer.

Does

Checks transit schedules for delays.
Checks account ballance.
Loads money onto account.
Activates fares using QR code & station scanners.

Feels

Relieved to avoid traffic.
Frustrated with scanner.
Proud for choosing more sustainable travel option.

Says

“I'm not sure what the best route to my destination is.”
“I don't like that I can't purchase single fares.”
“The scanner is really bad.”

Thinks

The trip planner could be more organized.
The process to purchase a fare is confusing.
Sign up instructions in the app could be clearer.

Does

Checks transit schedules to plan trips.
Checks transit map to plan routes.
Loads money onto account.
Activates fares using QR code & station scanners.

Feels

Frustrated with trip planner map.
Confused with pass purchase process.
Irritated with QR code & scanner.

Empathize

  • User Reviews
  • User Survey

Define

  • User Personas
  • Empathy Maps

Ideate

  • Opportunities
  • Wireframes

Prototype

  • Hi-Fi, Interactive Prototype

Opportunities

Using this info, as well as info obtained from user research, the following opportunities for improvement were identified & will be the focus of the redesign.
Activating Fares
Navigating the Map
Purchasing Fares vs Loading Money

Activating Fares

"The QR code takes a while to scan unless you get lucky. On average I'd say it takes me 10 seconds."
- Anonymous User
The most common issue users reported was that the QR code for fare activation rarely works on the first try, leading to missed rides or abandonment of the app in favor of physical RFID cards.

This issue is critical because it occurs at the final stage of the user journey—where a poor experience can overshadow an otherwise functional app.
To address this issue, the redesign eliminates the QR code entirely and replaced it with a tap-to-scan solution using existing NFC capabilities.

This approach not only simplifies the process but also leverages hardware already available at every Pronto kiosk, making it a low-effort, high-impact change.

Wireframes

Onboarding Instructions: Clear guidance is provided upon first use, explaining how to activate a fare.
Digital Fare Card:
‍The QR code is replaced with a digital card, signaling users to tap their device at the kiosk.
Ready to Scan:
A wireless icon at the top of the screen confirms the app is ready for scanning.
Confirmation:
Once activated, the card slides down, and the wireless icon transforms into a checkmark for clear feedback.

Prototype

This demo shows how the new fare activation process works seamlessly from start to finish.

By replacing the unreliable QR code with a more intuitive solution, users can now activate fares quickly and confidently—ensuring a smoother, stress-free journey.
Jump to the Full Prototype
View Prototype in Figma

Navigating The Map

"The trip planning doesn’t have enough options to filter for specific stops, transportation modes, and is hard to read. It runs clunky and can be hard to navigate."
- Anonymous User
The next phase of the redesign focused on enhancing the app’s Trip Planner feature—Pronto’s map interface for locating stops, checking real-time route information, and saving frequently used stops and routes.

User feedback highlighted that the current map feels difficult to use, outdated, and clunky, prompting a need for a more intuitive and modern design.

Pain Points

To address these issues, I conducted a thorough review of the map and identified the following pain points:
Stop Icons
The stop icons are basic black-and-white designs, differentiated only by small images representing trolley lines, bus routes, and ferry landings. Measuring roughly 32x32px, these icons present two key problems:
Stop Icon
Size: ~ 32x32 PX
Foreground Color
#221F20
Background Color
#FFFFFF
Lack of Visual Distinction: 
The similarity between icons makes trip planning and locating specific stops unnecessarily difficult.
Accessibility Concerns: 
The icons fall short of the WCAG 2.2 recommended size for clickable elements, which is 44x44px, creating usability barriers for many users.
Color Selection
The map itself integrates Google Maps and uses six colors (shown below) to represent streets, highways, city blocks, and other geographical features. While this is not an issue on its own, the combination of the map design and the stop icons creates additional pain points:
Map
Map Colors
#FFFFFF
#FEF7E0
#C1E4CB
#F2F3F4
#A4C2FA
Fill: #FBECC4
Stroke: #EEB84F
Lack of Visual Distinction: 
This issue becomes particularly pronounced in areas with high route density, making it difficult to differentiate between different types of stops, which leads into the next isssue.
Information Overlaod: 
In areas with high route density, the map presents route information in a way that can feel overwhelming to users. This clutter often leads to frustration, prompting some riders to abandon public transit altogether in favor of alternatives like rideshare services.
Accessibility Concerns: 
The contrast ratio between the icons and the map background averages 1.11:1, falling far below the WCAG 2.2 recommended minimum of 3:1 for icons. This low contrast makes the icons hard to see and interact with, especially for users with visual impairments.

Wireframes

Redesigned Stop Icons:
The stop icons have been redesigned with accessibility in mind.

Their size has been increased to 44x44px, aligning with WCAG 2.2 best practices to ensure they are easy to see and interact with for all users.
Redesigned Stop Cards:
Stop cards now feature the new icons and display key info—like departure times and distance—directly on the card, removing the need for extra vagvigation.

Routes are also grouped by direction (e.g., eastbound vs. westbound) for better clarity.
Proximity Notification:
To reduce the time users spend searching for route information, I introduced a proximity notification feature. This banner displays:
  • The distance to the nearest stop
  • Available routes at that stop
  • A link for directions to get there
Users can easily clear the notification if it’s not needed or access it later using the new map pin button in the bottom right corner of the map.
Updated Styling
To further enhance the accessibility of the Trip Planner map, I redesigned the stop icons to incorporate line-specific colors, making them visually distinct from the map and from each other—especially in high-density areas.
Bus
#EE3124
Orange Line
#B26206
UCSD Blue Line
#0071BC
Green Line
#1F6E45

Prototype

This demo showcases the updated styling of the Trip Planner map in action.

The larger, higher contrast iconcs and new proximity notification improve accesibility & usability, helping users plan their trips more efficiently.
Jump to the Full Prototype
View Prototype in Figma

Purchasing Fares

"The user base includes many out of town visitors using the app for the first time while traveling in a hurry. The workflow needs to be absolutely crystal clear and highly streamlined. Instead it's simply never explained."
- Anonymous User
The third challenge emerged during the fare purchase process, which presented three key pain points:

Confusing Purchase Proccess:
Users, especially those transitioning from the previous “Compass” system or using the app for the first time, found the process unclear due to a lack of explanation about the new system.

Unexpected Page During Purchase:
‍Users attempting to buy individual day passes were redirected to a page promoting monthly passes, causing frustration and delays.

Time-Consuming Tasks:
Tasks like creating virtual passes, adding payment information, and loading funds felt unnecessarily lengthy, detracting from the overall experience.

Wireframes

To address these issues, I developed the following solutions to streamline the process and improve clarity in user interactions:
Clarity In Options:
The “Add Passes” option has been updated to “Buy Monthly Passes” to better communicate its purpose.

Additionally, “Add Funds” (formerly “Load Money”) was moved to the left to guide users to it more effectively.

These changes aim to reduce confusion and make the most commonly sought options more intuitive to find.
Transit agency logos have been added to monthly passes to visually differentiate options and reinforce brand recognition, making it easier for users to identify and select the right pass.
Instructional Clarification:
An instructional tooltip has been added to the “Ride” page to clarify how to activate a fare. The tooltip appears each time users open the app.

Additionally, a tap animation on the digital Pronto card plays whenever users navigate to the “Ride” page, further reinforcing how to activate a fare.
The link to MTS’ FAQ page has been moved to the “Ride” page, making it easier for users to access helpful information.

Previously buried in the “More” section, this change reduces the effort required to find answers, increasing the likelihood of users resolving their issues and perceiving the app experience as positive.
Streamlining Tasks
Users now have the option to load funds to their account using Google Pay or Apple Pay.

Additionally, they can scan credit card information for payments, eliminating the need for manual entry.
The new “Pronto Load” feature enables users to top up their account quickly and easily with just a single tap, streamlining the process and enhancing convenience.

Prototype

This demo highlights key changes designed to create a simpler, more enjoyable, and faster fare purchasing process.

These updates make it easier for both first-time and returning users to navigate the app effectively, enhancing the overall experience of using public transit.
Jump to the Full Prototype
View Prototype in Figma

Empathize

  • User Reviews
  • User Survey

Define

  • User Personas
  • Empathy Maps

Ideate

  • Journey Map
  • Opportunities
  • Wireframes

Prototype

  • Hi-Fi, Interactive Prototype

Reflection

Insights & Opportunities

Users found features such as trip planning, route navigation, and the option to add money to the Pronto card through the app helpful, but not particularly straightforward. Additionally, the transition from the previous Compass Card system and initial difficulties in activating fares have prompted users to report a less favorable experience.

One issue  I was not able to adequately address was the difficulty users reported with the onboarding process. A potential solution to his I would have liked to explore is integrating the digital Pronto card to users' existing digital wallets, like Clipper Card in the Bay Area or Suica in Tokyo. I believe this integration could streamline the process even further, encouraging more regular use of the app & San Diego public transiit.

What I learned

Through this UX case study, I've learned it's crucial to design within the constraints of external factors. Issues like inadequate route coverage, safety concerns, and societal perceptions significantly influence user adoption of the Pronto app, and public transit in general.

A poorly designed app, rather than mitigating these challenges, can inadvertently worsen the user experience by exacerbating these external factors. Thus, effective user experience design must extend beyond creating an intuitive interface; it requires crafting an app that works seamlessly within the constraints of the larger ecosystem. By doing so, we can create a positive and inclusive experience that addresses real-world challenges and empowers users.

Next Steps

Having completed the redesign, the next step would be to conduct user testing to evaluate the effectiveness of the changes. To ensure these changes align with the original goal I set out to achieve, I’ve broken the main goal into two sub-goals and defined the metrics shown here

Following user testing, a phased implementation of these new changes will ensure a smooth transition—without repeating the problems that occurred during the Compass-to-Pronto transition. This, combined with continued iteration based on user feedback, will ensure Pronto delivers a better user experience for years to come.

HomeAbout MeResumeContactMy Work