A One-Stop Web App for Crowdsourced MTA Updates
Final Project for COMS W4170: User Interface Design at Columbia University
P.S. Because the site is no longer being maintained, some functions may not work any more.
Teammates and Primary Roles
Eleanor Murguia: Javascript
Hana Fusman: MyBalsamiq / store.js / User Manual
Lucille Sui: Writing / store.js
Davide Zhang: HTML / CSS
Hana Fusman: MyBalsamiq / store.js / User Manual
Lucille Sui: Writing / store.js
Davide Zhang: HTML / CSS
Problem Statement
Getting back to campus after Thanksgiving break, our team felt the pain of travel and transportation, with the subway system in New York City being particularly unreliable. One of the group members routinely checks Twitter for train delays, as it contains user-generated updates that are more timely than MTA’s own website or app.
Interviews
Because of the time constraint, we conducted quick interviews with our friends and collected more insights on the pain points of traveling via subway and the difficulty in planning ahead in the context of New York City.
We developed the idea of creating a web app that MTA riders could use to check the updates of subway systems based on what tweeters were saying. Based on the interview results, we thought it would be helpful to have the ability to use filters to see what trains you wanted to read updates on, as well as ranking the tweets by time, such as in the past hour or past week.
Personas and Use Scenarios
People in New York City that interact with the MTA system in some way. These are people who care about the status of the MTA subway trains and the delays that are occurring on various train lines. A variety of people are encompassed in this class of users because such a diverse group of people use and rely on the MTA every day.
Persona 1
Megan is a 25 years old Columbia graduate 1 month into her new job writing for Vogue. It’s very important for her to be on time for work as she is still trying to make a good impression on her boss. Megan rides the MTA every day and wants to check the real-time tweets on the train she uses to commute. She knows that the MTA updates on MTA app are often unreliable, so she comes to this web app to check which trains people are currently complaining about. Megan wants updates in the last hour and day to be the most updated on the train she is riding. While Megan will most often want information about her commute to and from work, she uses any and all trains to get around town on the weekend and for afterwork fun. Megan typically will only check the train(s) she is planning on using on the current day.
Use Scenario 1
Goals and Motivations
Megan wants to see the real-time tweets of subway lines that are being complained about so that she knows to give herself enough travel time to arrive to her job at Vogue on time.
Desired Task
On MTweetA, Megan can check both live updates from the MTA Widget displayed on the MTweetA Application regarding delays, planned work, good service, etc., while also reading through live tweets from other MTA users. Megan heavily relies on tweets from other MTA users because she finds their tweets to be more reliable than MTA’s updates.
On MTweetA, Megan can check both live updates from the MTA Widget displayed on the MTweetA Application regarding delays, planned work, good service, etc., while also reading through live tweets from other MTA users. Megan heavily relies on tweets from other MTA users because she finds their tweets to be more reliable than MTA’s updates.
Interactions with the App
Every morning, before Megan goes to work, she uses the MTweetA Application. Megan can either take the 1,2,3 train to work or the A,C,E train if she wants to walk a bit longer. She also checks the MTA Widget to see if any of those lines are delayed or not running. If the lines are in good service, she then searches for those lines and selects the date that day to hear from other MTA users. Megan, also, often checks her past searches since she usually takes the same few subway lines to work.
Every morning, before Megan goes to work, she uses the MTweetA Application. Megan can either take the 1,2,3 train to work or the A,C,E train if she wants to walk a bit longer. She also checks the MTA Widget to see if any of those lines are delayed or not running. If the lines are in good service, she then searches for those lines and selects the date that day to hear from other MTA users. Megan, also, often checks her past searches since she usually takes the same few subway lines to work.
Persona 2
George is a 31 years old customer service manager for the MTA. He is tired of constantly getting harassed by the general population about how unreliable the MTA is. Seeing that a lot of the complaints come from Twitter, the MTA has decided to look at the complaints of real MTA users via Twitter. George wants to look at the nature of the complaints from each line. He wants to understand when these lines are most complained about (what day of the week, what time of the day, etc.) and then present this information his managers at the MTA. He wants to compare if the MTA service notifications are up to date with what MTA riders are feeling.
Use Scenario 2
Goals and Motivation
The goal of this user, George, is to be able to look at a train (or multiple trains), to see if the complaints are generally matching up with the data that the MTA is putting out about the train.
The goal of this user, George, is to be able to look at a train (or multiple trains), to see if the complaints are generally matching up with the data that the MTA is putting out about the train.
Desired Task
George wants to select a line and then analyze the tweets that pop up regarding that line and see if the most recent complaints are up to date with the MTA service. This will help him see if the MTA service needs to do better in terms of updating the MTA service statuses. He wants to go through each line individually, but he also wants the option to look up several trains at once in order to compare the complaints of each of the trains to the other trains. He wants to have the option to select specific dates to see how the complaints vary day to day and if they match up with the service work that was happening on that specific date.
George wants to select a line and then analyze the tweets that pop up regarding that line and see if the most recent complaints are up to date with the MTA service. This will help him see if the MTA service needs to do better in terms of updating the MTA service statuses. He wants to go through each line individually, but he also wants the option to look up several trains at once in order to compare the complaints of each of the trains to the other trains. He wants to have the option to select specific dates to see how the complaints vary day to day and if they match up with the service work that was happening on that specific date.
Interactions with the App
An interaction that George would have would be that he goes to work and visits this app after he rode the L train and was late to work because of delays. He wants to make sure that the L train service status is updated. He comes onto this web app and sees that the L train service status isn’t updated, but lots of Brooklynites are complaining about the L train delays on twitter. He then contacts the IT administrator in charge of service updates to push changes to the MTA page. George uses the past searches functionality when he looks at the same trains every day, as he checks through all the trains every day. He also uses the Clear Past Searches button when he has too many past searches.
An interaction that George would have would be that he goes to work and visits this app after he rode the L train and was late to work because of delays. He wants to make sure that the L train service status is updated. He comes onto this web app and sees that the L train service status isn’t updated, but lots of Brooklynites are complaining about the L train delays on twitter. He then contacts the IT administrator in charge of service updates to push changes to the MTA page. George uses the past searches functionality when he looks at the same trains every day, as he checks through all the trains every day. He also uses the Clear Past Searches button when he has too many past searches.
Wireframes
This is the earliest version of the MyBalsamiq iteration. At the time of this “sketch”, we did not have a full understanding of the functionality of our application just the idea that we wanted Tweets to display and that we wanted users to select which lines and what time.
In our next iteration, we decided to display buttons with colors that correspond to that specific line’s color and to display the times as buttons instead of a drop down menu. This is more user friendly and more aesthetically pleasing we did this because of the Aesthetic and minimalist design heuristic. We also chose this format because of the Consistency and Standard heuristic because we used very similar logos for each line to the MTA, so MTA users will recognize these logos immediately since they are standard.
After conducting user testing with the last iteration, we realized the time selection functionality was redundant and was removed as a result.
Version with On/Off Buttons, Time Dropdown, and Search History
We chose to use on/ off switches to select more than one subway line, because with the buttons the user could not select multiple lines. We decided to put the time back in. We added a widget from the MTA with live updates regarding every MTA line. We added this widget because of the Visibility of system status heuristic which aims to keep users informed about what is going on within reasonable time.There is also a display that shows the users past searches in case the user wants to search again, we did this because of the Recognition rather than recall heuristic, to minimize the user's memory load by making their past searches available. We also put instructions on top of the app, to teach users how to properly use the application. The instructions were added because of the help and documentation heuristic.
Final Version with Calendar
For our final iteration, we implemented a calendar select to choose which day to find relevant tweets from, instead of filtering the tweets by hour. This was a design choice our team made because we did not think it was necessary to choose what hour since the tweets display the hours.
Approach to Visual Design
Although we utilized Bootstrap 4 and third-party CSS libraries, we did not make stylistic decisions haphazardly. Rather, we strived for consistency in our design language, not only considering the heuristics discussed in class, but also following the human interface guidelines outlined by Apple whenever possible given the short project time frame.
For example, elements are centered and symmetric, whether in the context of the entire web page or within their respective CSS container; logical division of components is indicated by visual separation using thin, non-prominent lines; we used the jQuery date picker formatted by a third party CSS library because its style best fits our design language; moreover, every element is shadow-free, retina-screen-ready (except the MTA widget), and provided with sufficient contrast with the backdrop to improve visual accessibility; this flattened style aligns with Apple’s “abstracted metaphors” design philosophy of stripping down elements while keeping their metaphoric nature; the font families are carefully chosen for web-specific display and the custom made logo reflect our design philosophy as well.
Web Development Tools Used
Version Tracking: GitHub
Real-time Collaboration: Atom Teletype
Style: Ajax Bootstrap, Shards CSS library
Backend Javascript: Twitter API and Codebird
Style: Ajax Bootstrap, Shards CSS library
Backend Javascript: Twitter API and Codebird
Other: MTA Service Status Widget
