Product designs and research conducted for Research + Design class in Master’s program at UC Irvine
SFMTA Muni App
Research & Redesign
I conducted research and redesigned an existing app for San Francisco Muni bus services with a new concept app centered around improving usability.
Project Duration: 2.5 months, Fall 2024
Roles: UX Researcher, UX Designer
Introduction/Project Overview
Problem Area
How might we leverage IoT technology to provide passengers with clear, real-time fare information and ensure confidence in payment processes, creating a seamless and accountable experience on board?
UX Strategy
Research Phase
Observations
Field Notes
Semi-structured Interviews
Interview Transcript Annotation
Affinity Diagrams
Model Diagrams
Empathy Maps
Design Phase
Sketches
Wireframes
Higher-Fidelity Prototypes
Introduction/Project Overview
METHOD 1 - Observations
3 different scenarios/time slots of observations where I sat discreetly on bus for 30 minutes at at time and focused on jotting down notes from an assortment of categories. Some were noticing the physical spaces people were interacting with, the ways they entered and exited the bus, behaviors and speech patterns people used when talking to friends, strangers, SF Muni employees, etc.
METHOD 2 - Field notes
Directly after completing an observation, I went to a nearby coffee shop and from fresh memory, recalled 3 situations from a particularly eventful 30 minute period. I used vivid detail and imagery conjuring all senses from various perspectives to reveal the following 3 themes:
Observing Paying Bus Fare, MTA Fare Enforcement Officers
Observing Directions/Maps Signage, Local Knowledge in Navigating
Observing Entering/Exiting Bus, Determining Seat, Activities while Riding
METHOD 3 - Interviews
3 semi-structured 30 minute interviews with different people, all of whom were ultimately commuters, one being a student. We created peer-reviewed interview guides that explored a few topics pertaining to our project focus while allotting places to encourage expansion on ideas.
METHOD 4 - Annotating Interview Transcripts
Reading through transcripts and coding them to pull most interesting, substantial notes from the interviews, refining them - using thinking topics as lenses to group and better understand our data. We start to identify recurring themes - one that came to me “organizations as a unit influence our environments and how people interact with those units whether they’re aware of it or not” - “in some cases, direct quotes from people might clearly speak to a particular unit as a result of their roles, identities or ideologies,etc.”
METHOD 5 - Affinity Diagrams
Using Mural, I gathered quotes and notes from coding my transcripts and first sorted by Interviewee and their respective sticky note color, followed by a clustering approach where I began to identify similarities and contradictions alike. From here, Insights (shown in pink) quickly started to form .
Data Synthesis
The Physical Model
I used a physical model to visualize how riders move and interact on the SF Muni bus. It helped me see how the bus layout and entry points shape fare checks, social dynamics, and access to information, all insights that directly impact usability.
Illustrated below: Muni Bus - Line 5 from Ocean Beach to Downtown Financial District
The Relationship Model
This Relationship Model shows how riders connect to others in the bus ecosystem, whether that’s friends, strangers, or drivers and fare enforcement officers. It reveals how these connections influence how people confirm information, move around the bus, and navigate payment systems, often leaving riders with inconsistent experiences and expectations.Illustrated below: Muni Bus - Line 5 from Ocean Beach to Downtown Financial District
Empathy Maps
Empathy mapping is a great visual tool to understand what users see, hear, say, think, feel, and do. Grounded in data, it helps focus on real user needs and guide better design decisions.
RESEARCH INSIGHTS
Insight 1 - Riders have inconsistent knowledge of payment rules and procedures, leading to confusion and delays
Insight 2 - Bus drivers have competing priorities and are often unable to assist passengers with payment informations
Insight 3 - Fare checks and officer presence significantly alter the bus environment, creating discomfort for riders
Design Process
Conceptualization - Sketches
Sketching is a simple, effective tool that designers use early in the design phase to quickly iterate on ideas. Ultimately, this approach saves stakeholders time and resources.
Wireframes - Low-fidelity mockups
Once the most promising and practical ideas are identified from initial sketches, I created quick wireframes to increase the fidelity of these concepts. These wireframes are valuable because they allow me to visualize the design structure early on, identify potential issues, and gather feedback efficiently before investing in high-fidelity prototypes.
Final Designs
Next Steps
RESEARCH AND DESIGN
Conduct further research on app prototype with SF Muni bus riders
Explore App integration with in-phone payment (ie. apply pay, google pay, etc.)
What I learned
This project pushed me to deeply explore the design flaws in my home city of San Francisco. I tackled the product from the ground up, building my designs on solid data from my en vivo research. I also saw firsthand how early research and design methods like coding and annotating transcripts, sketching, and wireframing can save time and resources.