top of page

MUNI

A redesign Project for the Muni App
UX Case Study
My Role

UX Designer

Time Period

Spring 2021

Tools Used

Adobe Illustrator
Adobe photoshop
Figma

MuniMobile App is the official mobile ticketing app from the San Francisco Municipal Transportation Agency. This is a good option if you don’t own a bus pass, forgot your bus pass, don’t have cash, or need to buy tickets for multiple people. However, there are many ways that it could be streamlined, easier to use, and improved so users trust the app.

Problem

  • Simple function but is too limited for the user. 

  • UI design is difficult to navigate. 

  • The home page has repeated information, not useful for the user.

​

Solution

  • Make the Trip tools more user-friendly and build the mapping function into the app, including Maps, Scheduling, Disruption Tracking, Vehicle Tracking, Trip Planning, Mobile Ticketing, and Payments Integration, all functions in one.​

  • Add night mode in the app, which is more comfortable and safer for users during the night.

  • Add more color to the UI design.

My Design Process

1

Heuristic Evaluation

2

Reasarch

​

3

User Interview

​

4

Persona

​

5

User Flows

​

7

Usability Test

​

8

Final Prototype

​

6

Wireframes

Heuristic Evaluation

Usability

Free to download, easy to use. Tiny buttons you can click on, user unlikely to make any mistakes. Convenient for the user who is traveling or doesn’t have a Clipper card. Multiple payment options, email receipt after purchase.

​

Functionality

Allow users to purchase and repurchase the same tickets. Limit functions, buy tickets only. Purchased tickets have a limited time to use exclusively, unlike the regular Clipper card.

​

​

​

Accessibility

The app is an effortless and straightforward design to point out where to buy the tickets. Too many steps to make a purchase require login. Local use only. Not able to access without Internet connectivity. The first page takes too long

to open.

Visual Design

Cute illustration on the opening page, animated illustration on the first page, also current ticket page. Numbers are too small for senior users. page, animated illustration on the first page, also current ticket page. Numbers are too small for senior users.

Quantitative Research

Competitor Analysis

Metro San Francisco- Muni Bart

Muni, BART, and AC Transit together. Get real-time information on both the San Francisco transit systems. No ticketing function.

Routesy

For transit systems: Muni, Bart, Caltrain & AC Transit. Shows user the closest stop or station, with real-time data. No ticket

purchase system.

Muni Watch Transit App

This app is for San Francisco public transit riders. It shows the real-time location of buses, also allows the user to find nearby stops, pin frequently used stops on the map— no ticketing system.

Target Audience Statement &
Research Summary

  • Mobile Ticketing App is trending.

  • More and more mobile users use apps for a different types of purchases. Instead of the traditional type of Clipper card or cash, the Muni app would be much more convenient when users don’t have a credit card or cash.

  • Also, it would be convenient for travelers to take Muni without paying $3 extra for a Clipper card or missing the opportunity to get a $0.50 discount.

  • Users would have a better experience with multiple functions in one app instead of transferring between different Apps. That would help us keep current users and attract new ones.

  • Right now too many users use a different app to check Muni schedules and routes and then use the Muni App for a ticket purchase, or some users are using the additional functions to check maps and bus schedules and have a hard time getting it back or get stuck in a different website.

  • From app reviews and research, I can see most of the people’s frustration is functionality. A good mobile Transportation App needs to have: Maps, Scheduling and Disruption Tracking, Vehicle Tracking, Trip Planning, Mobile Ticketing, and Payments Integration.

Research Summary

  • The use of mobile ticketing apps is on the rise, with an increasing number of mobile users opting for such apps for various purchases. The Muni app offers a more convenient alternative to the traditional Clipper card or cash options, especially for users without access to credit cards or cash. It's also beneficial for travelers who can avoid paying an extra $3 for a Clipper card or missing out on a $0.5 discount when using Muni.

  • A single app with multiple functions is better than switching between apps. This will retain and attract users. Current transportation apps require multiple apps for Muni's schedule, routes, tickets, maps, and schedules. Users are frustrated with the app's functionality. A good transportation app should have maps, scheduling, disruption tracking, vehicle tracking, trip planning, mobile ticketing, and payment integration.cking, trip planning, mobile ticketing, and payment integration.

User Interview

I have conducted three interviews with potential users. I asked them questions regarding what they wish to see in Muni. Here are the quotes that I got from them.

Loraine Thrussell

"It would be better to have one app that includes reloading cards and checking bus times together."

Byron Victor

"The bus location's live time shows where the bus is at, and how far away the bus is would attract the user to download the app."

Harley Sherburn

"A transportation app should be able to find a route toward the destination easily."

User Needs

  • MuniMobile App is easy to navigate.

  • The app takes too many steps to reload tickets.

  • The user likes Nextbus.com because it shows the bus locations and how long it will take from A to B.

  • The downside of the website is the user needs to refresh the website page to check for delays. Sometimes it doesn't show the delays.

  • Keep track of the times for alternative routes.

  • The time it takes to go from point A to point B.

  • It should also show current credit is enough to go on a specific journey.

  • The option is to get the app to funnel money from the user’s account when it is low on credit.

User Persona

After conducting user interviews and user tests referencing the original Muni Mobile app, I collected common situations, pain points, and desires, and distilled them into easy to reference personas to ensure each user need was met.

Frame 427318174.png

User Flows

User Flow 1
User Flow 2
User Flow 3

Wireframes

Usability Test

Usability Test 1 of 2: 5/3/2021

Test 1

  • Trip Tool changed its name to Routes

​

Test 2

  • Add Task details

  • Credit card info review

  • Confirmation message after purchase

Usability Test 2 of 2 : 5/3/2021

Test 1

  • Test 1
    Searching page bottom - setting white 80% transparency.

  • Add time/battery on the top to give a more real feeling.

  • List of all Mister Jiu’s locations.

​

Test 2

  • Page 2 - option add a drop-down arrow.

  • Show bus route details.

  • Add keyboard.

What I learned

Improve trustworthiness by:

  • Using native features.

  • Having a consistent, clean, and recognizable UI.

Improve Usability by:

  • Having linear flows.

  • Reducing how much users need to type.

  • Using clear content writing.

  • Making sure color contrast is accessible.

Next steps

Moving forward with this app, I would like to:

  • Improve color contrast for accessibility.

  • Improve clarity by adjusting the date format & including descriptions of each ticket on the same page instead of an information icon.

  • Explore other flows for trip planning.

Like what you see? 

I'm open to new opportunities and would love to hear from you. 
bottom of page