top of page

MUNI Redesign

A new web-based app that makes purchasing tickets easier by eliminating clicks, simplifying  workflow and providing payment options.






Before settling on design, I explored multiple problem spaces.


I was the researcher and designer owning the end-to-end process. I started the project by framing primary research questions, synthesizing secondary research, ideating concepts and executing design ideas.


There is no easy answer to improving a ticketing system that works for everyone. I framed the problem statement as, how do you design an interface that serves the purpose of efficiency but also addresses other issues?

To inform my understanding of user’s pain points, I mapped current workflow.



At an abstract level, the problem seemed easy to solve but of course that’s never the case. To understand the challenges different users face at a personal level requires extensive interviews. With limited time, I collected MUNI ridership survey and complaint department reports.

After looking through surveys, to further synthesize the research and generate ideas I created created four main personas that help illustrate different opportunities and challenge areas.


I ideated on multiple possible ideas.


In a rush = Eliminate clicks

Not surprisingly, most users complain about having too many clicks to achieve a simple goal to buy a ticket.


Discounted tickets

Although not majority, some people still want to buy discounted tickets even if they need to go through extra steps to scan ID verifications.


Payment options

Users should have diverse ways to pay for their tickets, other than credit/debit cards or cash. Most people have smart phones and can scan QR codes which support multiple international and cryptocurrency payment methods.

Data visualization = future

People care about when the next train is coming and where they are to gain a sense of security of trust of the operating system.


To illustrate the final web app solution, I selected a few key screens to illustrate key concepts.


Starter Screen

By feeding the the live status of train and showing it on screen, the customer is able to know when the next train is coming. To buy a new ticket and to buy a new clipper card are given the equal weight, and to add value to existing ticket or clipper card stands out more - as research shows most users are frequent riders and are more likely to want to add values instead of buy new tickets/cards.

Discounted tickets option is also provided and highlighted in the starter screen to ensure access to edge case users.

Ticket Purchasing and Payment Options

In the scenario where a customer needs to buy new tickets, the customer is given the option to buy either single or round trip tickets. However, what is different in this design is that besides cash, credit and debit card payments, customers can also scan QR codes with their phones which would enable them to pay with WeChat Pay, Alipay, Paypal, Venmo or Bitcoin. As research shows that MUNI receives many international travellers, this design gives user the option to choose the payment methods that work the best for them.

Add Value

Since most people use the machine to add value to their existing cards/tickets, I incorporated keyboard to allow easy input of how much value one wants to add.

Live Data Visualization

To represent train location and their status gives great assurance to customers about the safety and reliability of the system.


Thinking About Edge Cases

To represent train location and their status gives great assurance to customers about the safety and reliability of the system.

bottom of page