Chen Zhang Design Portfolio

Redesign SF Muni Ticket Kiosk

Design a web-based interface replicating optimal functionality for a new Muni terminal

Problem Definition & Assumptions 

I assume the target users for SF Muni terminal are the general public, which typically include two groups: 

  • Local residents in Bay Area
  • Tourists from all over the world

Target Users

User Needs / Product Values

First Priority

  • Buy tickets (single/round trip)
  • Buy Clipper card
  • Refill and add value to a ticket or a Clipper card
  • View Balance

Second Priority

  • View Muni map and search a station
  • Localization 
  • View next train station status 
  • Modern payment technology with mobile devices (Apple Pay, Android Pay, PayPal etc) 


  • Ticket kiosk station hardware remains the same (touch screen, card lot, kiosk size, screen size, kiosk location)
  • User context is at the SF Bart station platform
  • For local residents, the primary user goal is to buy/refill tickets quickly and catch up with the upcoming trains. For tourists, the primary user goal is to have a clear and intuitive workflow to buy/refill tickets. 

Workflow Analysis 


Refine & Design Detailed Wireframes


Ideal WOrkflow: Buy Tickets

MVP Workflow: Buy Tickets


The MVP workflow here only provides the core functionalities for the buy tickets use case by removing a few nice-to-have features, such as the language selection, select station in map & list, multiple payment methods and showing next train status.




If this is a real project and we have a cross-functional team and release deadline, I would figure out some open questions in my design proposals and feature priorities based on a few criteria below: 

  • Who is our primary target users, local residents or tourists? 
  • How frequent is a feature being used by our target users? 
  • How important is a feature to our target users? Can they find another alternative to meet their needs? 
  • How many engineering resources would it require for a feature? 
  • Can we leverage the work on this feature and apply it to other similar problems? 


If we go beyond the design challenge assumptions, we can have a few out-of-box solutions for this redesign: 

  • Provide a mobile app to enable users buy/refill tickets from mobile phone and scan mobile tickets to take BART; (There will be no need for paper BART tickets and reduces the usage for the kiosk hardware)
  • Can users buy tickets from any station, not limited to the current station?