A MUNI navigation app optimized for sight seeing in San Francisco.


ROLE: Usability Testing, Wireframing, User Interviews, Data Synthesis, Rapid Paper Prototyping, Visual Design, Brainstorming, Survey Creation

TOOLS: Sketch 3, InVision, Google Drive, Keynote, Adobe Illustrator, Adobe Photoshop, Marvel (prototyping app)

TEAM: 3 Designers

DURATION: 2 Weeks     CONTEXT: Class Project



Design a digital product that would increase the ridership of MUNI services during off peak hours.




Our design decisions were driven by our research which consisted of surveys, interviews, contextual inquiries combined, a competitive analysis, and secondary data. Our key findings were:

  • There is a higher potential for increasing MUNI ridership among the tourist population compared to other populations.
  • There are not many digital resources catered to new visitors who want to use the MUNI as a mode of transportation to go sight seeing.



The Design Process



We created a large concept map to frame the context of possible users.

We named several user groups, but we needed to know which group had the highest potential in increasing their ridership during off peak hours.



Once we named our groups of possible target audiences, we gathered quantitative and qualitative data regarding their usage of the MUNI.

Primary Research


81 Responses

  • 88% use a smart phone to navigate during travel.
  • All of our SF resident respondents have used the MUNI

User Interviews

8 Tourists and 5 Locals

  • Insufficient ease of access for first time users
  • Directions can be unclear
  • Public transportation is useful for sight seeing


2 Contextual Inquires

  • The multitude of payment options for the different types of public transit can be overwhelming

Secondary Research

(The San Francisco Travel Association, 2011)

  • 15.92 million visitors to SF
  • 75.4% visits was for leisure
  • 44.6% on vacation

Competitive Analysis

We compared SFMTA's current digital offerings to other public transportation systems, Uber, and the travel app Trip Advisor to identify the differences and the shortcomings in SFMTA's current digital services.

We learned that the SFMTA website's major disadvantage is that it does not cater to new visitors.


Target Audience: Tourists


  • Tourists are a large economic market force
  • SF residents have established existing habits and attitudes with MUNI's service which may be more difficult to alter
  • We identified pain points that may be solved by a digital product


We grouped and prioritized the information we gathered from our research on an affinity diagram, arranging a list of tourists' pain points. The two main themes were:

  • Difficulty in navigating the MUNI
  • A desire to visit the popular locations in San Francisco.



We collated the details of users gathered from our interviews to construct 3 personas that represented our target audience.

Empathy Map for our user

We honed in on one persona (Lin) to narrow our focus down to one scenario.


Iterative Design

Balancing User and Business Needs

We asked ourselves, "How could our digital product meet the user's and client's goals?" After tossing around ideas through conversation, we settled on one. Our persona wants to go sight seeing and our app would help her use the MUNI to do just that.


Design Studio and Collaborative Sketching

We underwent a design studio, sketching individually, then reconvening to collate our ideas. After collecting our ideas, we sketched together on a white board. Once our collective sketches were done, I quickly created a low fidelity paper prototype using a mobile prototyping app, Marvel.


Prototype Usability Testing

I tested a paper prototype with 3 users and gained these insights:

  • Restructuring of navigation was needed
  • We needed to distinguish different features within our app

Iteration and Usability Tests

Informed by the insights from the paper prototype, I created screens in Sketch 3 to make a digital prototype.

I conducted 5 usability tests with the digital prototype and gathered that:

  • The unique usefulness of the app was not immediately apparent until later in the flow
  • The flow was somewhat disorienting, especially at one feature transition
  • Adding key content would have made certain parts of the flow more useful

User Flow Chart

I created a user flow chart of our persona's tasks using our app in order to chart the logistical and logical steps of the user process.


Iterated Prototype

All three of us used Sketch 3 to work on different aspects of the design and combined our efforts to create the third iteration. We delegated interaction design and visual design efforts to quickly output our final deliverables as a team.


Visual Design

Once the teamwork was done, I added higher fidelity visual design to certain deliverables in order to facilitate easier understanding of the functionality of the app.


A single image of the walk through at the top of this page



The user research and iterative aspects of the design process are key to creating a product that precisely addresses users' pain points. This project has allowed me to further refine my abilities to glean key insights from research and to translate those into product design decisions.

Team Work Strategy

This work would not have been possible without these collaborative components:

  • Open Communication
  • Shared problem solving and decision making
  • Task Delegation

Team members: Devika Dwardakas, Karolina Dadej