SF By MUNI
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.
- 88% use a smart phone to navigate during travel.
- All of our SF resident respondents have used the MUNI
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
(The San Francisco Travel Association, 2011)
- 15.92 million visitors to SF
- 75.4% visits was for leisure
- 44.6% on vacation
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.
We honed in on one persona (Lin) to narrow our focus down to one scenario.
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.
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.
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.
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