MuniMobile

Overview
Background

The San Francisco Municipal Railway, known by its nickname "Muni," is the transit division of the San Francisco Municipal Transportation Agency (SFMTA), and an important part of the integrated transportation network in San Francisco.

Role

Muni released their mobile app MuniMobile, wanting to provide their users more convenient services. But realistically the mobile app hasn’t reached to the level of great use as it could. But why should we care to give a further push on improving it, and How?

UX Research, UI/UX Design
Timeline

Feb-May 2020
Research
Heuristic Evaluation
Usability
  • Unable to load tickets offline, causing trouble for users underground with unstable signals
  • Excessive time of landing motion graphic
Functionality
  • Unable to save bus routes
  • Unable to check bus schedule in a timely manner and be notified
  • Fail to include Clipper Card users
Accessibility
  • Lack of map to visualize bus stop locations
  • Tiny texts
Visual Design
  • Weird proportion between tiny texts and big buttons
  • large gaps between ticket title and price to make the “Tickets” page looking unorganzied
  • Faint color of lines
Competitive Analysis
Target Audience
MuniMobile_SimilarWeb.com
Personas & Flows
Profiles
User Flows
Storyboard

"Time to renew my monthly plan!"

Wireframe
A/B Testing
A
  • It’s like a home screen that users would expect to see for a transportation app
  • Likes the fact that it has a map pinning the bus stops to guide users where to go
B
  • It’d be weird for new users who don’t have tickets yet to see an home screen quite empty.
  • This wallet icon in nav bar doesn’t look generic enough to represent “Home”
A
  • Likes that the map navigation is clear
B
  • The bottom navigation conceals the texts behind it
  • It is confusing to see the bottom navigation when the screen is recognized to show an ongoing task.
Screen Comparison
Prototype display
PROJECTS
FoodFlex
MuniMobile
HaveYouEaten
COTD Store Website
Universal Mindfulness
@ 2022 Yuzi Li
GET IN TOUCH