Briefing:

We are designing a smartphone app meant to be used as a reference to find information, approximate arrival/departure times, distances between stops, and other related information about Boston’s MBTA, specifically the subway. The idea is to keep the app as simple as possible, allowing users to glance at information already familiar to them during their commute/trip to find what they need quickly and efficiently. The system can give some granular information if observed closely, but it can also only be used as a simple, quick reference.

We are conducting a study to discover how people interact with the system. Your personal information (i.e. your name) will not be recorded or published; this study is meant only to discover how our potential demographic will be able to use the system.

The system should be straight-forward to navigate through, especially if you have any working knowledge of the MBTA. The purpose of this study is for us to confirm or deny how user-friendly the interface is. Instead of using an actual smartphone, we have created paper versions of what we want our interface to look like. I will act as your “smartphone,” moving the pages around to simulate what the system would do when actually implemented. Other members of the team will act as observers, taking notes on how you interact with the system.

This is not meant to be a test of your abilities. This is a test of our system. Since you are imitating what a user would do in real life, our team will keep explanations as minimal as possible. If you find any problems or cannot proceed, that is a problem with the system that needs to be fixed. Upon completion, please tell us what makes sense, what’s confusing, any questions you may think of, and what did or did not work as you expected.

Tasks:

(1) Turn on the GPS setting.

(2) Find Roxbury Crossing station.

(3) Navigate from Roxbury Crossing to the Blue Line.

Report:

Regarding our first task of simply turning the GPS feature on, none of the users seemed to have any issues being able to figure that out, which is most likely due to our use of a gear for Settings, as is commonly used.  No problems to fix there.

Again, when it came to navigating to a station page, the users had no issues.  Since the users had already seen the main page of “Station” or “Line” choices, they were shown straight away how they could navigate to a station.  While this is not available on the Settings page, there is a pretty obvious Home button (it’s a picture of a house) on every page.  Users easily figured they could click Home to get back to the choices between Line and Station dropdowns, where they found Roxbury Crossing.

Our last task was the most “complicated.”  That is, it put up a bigger wall for the users than our other tasks.  A couple users almost seemed to stumble across the solution by accident.  They hit the “Orange Line” button and then State Street, which is shown to have a connection to the Blue Line.  While they found the solution and the interface seems to eventually explain itself, they stumbled around the system a bit before even trying to do anything.  Another user navigated back to the Home Page, as they would have for navigating to a Station from the Settings page.  While this wasn’t the task we wanted to accomplish, it was the correct solution.

Our biggest issue was with users was them not knowing they could navigate to maps from pages other than the Home Page.  One issue this could be is just their unfamiliarity with the MBTA.  There is only one Blue Line connection from the Orange Line and we have not currently implemented a feature to jump directly between them. Right now, the user had to go from a station to the Orange Line to one specific station to the Blue Line.  A feature we could implement to solve this problem would be to give the user the ability to jump from the Orange Line to the Blue Line directly (along with all the other lines, of course).

Beyond that, we didn’t seem to have issues with users navigating around the system and finding the information they need.

After receiving feedback from the first rounds of heuristic evaluations we went through and looked at various things in our prototype. The new version can be found at http://share.axure.com/P2JMHY/ One major issue that we found was there were no train symbols as we had said there would be and there were no times. To rectify this we placed rectangles with a point indicating direction differing between black and white and indicating which was which on the times located below the map. One other concerned that we took care of was the redundancy of a search box that we couldn’t quite get to work the first time around. In order to fix this we removed the search option on every page and replaced it with a logo on the preliminary page. We removed the “Select a” before Station and Line respectively on the home page and moved it above to also reduce redundancy. In order to allow people to get a better feel of how the Google Maps option would look on a small screen we replaced the map on Roxbury Crossing with a working Google Map of the area. However it should be noted that the colored line is removed to provide for this functionality and the ‘trains’ are static and will NOT move. Time has been added below the maps to reflect the next inbound and outbound train on each line and time of arrival. The Red Line map has been split to be more similar to the Green Line maps resulting in a Braintree map and an Ashmont map. Another change is the option to turn on GPS in the Settings menu which results in a notification(It does not stay checked yet and there are more settings to come). Finally we split up how the stations were listed providing lines followed by stations in that line. Overall the evaluations were helpful in finding issues with some of our designs and redundancies. Although there is still much work to be done we look forward to hearing what people have to say about the difference between Google Maps and a static map. Overall the times and placing the ‘trains’ on the maps were the most severe issues we had that were mostly easily rectified. The redundant search bar was not as severe and was extremely easy to remove.  The adding of an interactive Google Map was simple once looked up but may cause issues with not showing the colored line anymore and needing to find a way to rescale the trains everytime there is a zoom in or out. Everything else is purely aesthetic or meant to be more user friendly and is being tooled around with.

Matt played designer by reworked most of the system and interactions  with input from Mark about scope of project and what we were aiming for compared to the evaluations. Mark and Matt both played managers by providing input and guidance to the other whenever one was concerned or had questions. For the evaluations and severity ratings Mark presented Matt with a list of issues and which were most common with Matt marking which ones were the most severe and practical to fix. Mark was the web designer by putting the prototype up online and performing the final writeup on the site.

Link to prototype:

In order to access the prototype just click on the following link http://share.axure.com/ZFPVAE

There is no login required and it has been tested and worked on IE and Chrome. Ignore the box to the left as it shows the infrastructure. This can be removed by clicking the – sign in the top right of the box. There are no special startup instructions. The only thing to note is that the only stations that work in the station selector are Roxbury Crossing and State Street. Also to perform a search type into the search box and click outside of the box.

Briefing:

We are designing a smartphone app meant to be used as a reference to find information, approximate arrival/departure times, distances between stops, and other related information about Boston’s MBTA, specifically the subway. The idea is to keep the app as simple as possible, allowing users to glance at information already familiar to them during their commute/trip to find what they need quickly and efficiently. The system can give some granular information if observed closely, but it can also only be used as a simple, quick reference.

We are conducting a study to discover how people interact with the system. Your personal information (i.e. your name) will not be recorded or published; this study is meant only to discover how our potential demographic will be able to use the system.

The system should be straight-forward to navigate through, especially if you have any working knowledge of the MBTA. The purpose of this study is for us to confirm or deny how user-friendly the interface is. Instead of using an actual smartphone, we have created paper versions of what we want our interface to look like. I will act as your “smartphone,” moving the pages around to simulate what the system would do when actually implemented. Other members of the team will act as observers, taking notes on how you interact with the system.

This is not meant to be a test of your abilities. This is a test of our system. Since you are imitating what a user would do in real life, our team will keep explanations as minimal as possible. If you find any problems or cannot proceed, that is a problem with the system that needs to be fixed. Upon completion, please tell us what makes sense, what’s confusing, any questions you may think of, and what did or did not work as you expected.

User Analysis:

Potential users and their hypothetical personalities are labeled as a “persona.”  A persona is a hypothetical user that the designers create in order for them to design toward.  Personas of users who could potentially use “Is The T Close?” could be along the following:

Persona 1: Jack White is a third-year Northeastern student living off-campus.  Although he worked part-time during high school and now during college, he is making a very minimal amount of money.  He is probably living with help from his parents and/or his savings.  Since he is living a decent distance from campus, and especially considering how cold it can get in the winter/autumn months, Jack uses public transportation often.  To help estimate locations and times the train will take, Jack uses “Is The T Close?” to make an educated guess as to where the train is while he is on his way to class.

Persona 2: Alex Turner is an accountant working in the financial district in downtown Boston.  While he usually drives to work, his car is currently in the shop due to mechanical problems.  Being one who typically drives, Alex is not used to how the MBTA is laid out.  Since Alex is so dedicated to his job, he wants to get there are soon as close to his regular time as possible.  He uses “Is The T Close?” to figure out routes, times, and locations to take on his way into downtown Boston.

Persona 3: Albert Hammond is a college-bound high school student.  Being somebody who loves urban life, he visits major cities on the East Coast to visit potential colleges/universities.  Albert goes to Boston to visit some of the many colleges and universities in the area.  Since he is not used to how the (confusing) city of Boston is laid out, he downloads “Is The T Close?” so he can help find his way around the city and between all the colleges and universities he wants to visit in the area.

Persona 4: Peter Doherty is a recent grad of Boston University working in the IT field.  He finds great housing in Quincy works off the Green line.  Since Pete tries to be privy to current technology, he tries to be as up to date as possible when it comes to smartphones and the relevant applications.  Pete downloads “Is The T Close?” so he can track where trains are during his commute one his way from the Red line to the Green line and back.

Task Analysis:

The users have numerous tasks they will have to and want to accomplish when using “Is The T Close?”  A task any user may want to accomplish can be any of the following:

1) A user, upon opening the application, will be presented with a “main screen” of sorts, prompting them to select from two drop-down menus: one for the specific line and another for the specific stations.  Selecting a specific line will filter out respective stations from other lines.  Each station will have some sort of indication as to what line it is on (e.g., appropriately colored words or a block of color for the appropriate line near the station name).  This can take the user to one of two possible options:

a) Selecting only a train line will take the user to a bird’s-eye-view map of that line.  It shows the user each stop, current locations of the trains, and any forks in the line.

b) Selecting a station (whether or not a line has been selected to filter out stations) will take the user to a more detailed close-up of that station.  This is where Google maps comes more into play.  It will display a the route the train is taking around a specific radius of the station.  It will display any crossover between lines that station may have (e.g. a green and orange line at Haymarket).

2) Much of the time, more than the train is necessary for a user to get where they are going.  The train only reaches a certain radius.  Users need to go far out of the immediate Boston area a lot of the time.  The user may need to get to or from an area further than the train reaches, such as Watertown or Waltham.  When a user is on a page displaying a line map, a user will want to see any existing bus connections.  Touching any of the station names will display any close-by bus connections to that station.

3) Beyond just bus connections, a lot of the time a user’s trip will take them across multiple train lines.  Displayed on the line maps next to each station will be a symbol to represent any other train connections.  For example, next to Downtown Crossing station on a Red line will two squares, a silver one and green one, that allow the user select that respectively colored line and go to that line-colored map.  Hitting that green square will take the user to a Green line map.

4) Users don’t necessarily always want to see an overarching view of the train line.  For practical purposes, the user could be at a specific station and want more detailed information for that station.  If the user is currently at Downtown Crossing, for example, they may want to see close-up information of Downtown Crossing.  Selecting Downtown Crossing from the main screen or from a line map will take the user to a detailed map of Downtown Crossing.  It will show data pulled from Google maps (for the map around the station) and tracking information of all incoming/outgoing trains to/from Downtown Crossing (i.e., it will show all close-by trains on the Green, Silver, and Red lines and where they cross each other).

5) If a user is on the detailed map of a station, they could very possibly want to go back to the over-arching line map.  Maybe there are no trains are not anywhere near that station and the user wants to see where the trains are actually currently located in other parts of that line.  Or maybe the user wants to see where they are going, how long it will take to get to where they are going, or how far away (distance) their destination is from their current location.  On any detailed station map is a link or links to the lines the station is located on.  Selecting these links will take the user to that line map.

6) The user may not always want to have to select where they are every time they open the application.  There is some way to turn on GPS tracking (if possible based on the phone or tablet the user is using).  If turned on, simply opening the application will send the user directly to where they are located.  This could be either the line the user is on or the station the user is at, based on settings the user may want to change.  For example, if the user is close to a stop on the Green line, tracking based on line, it would open up a map of the entire Green line, displaying tracking information for the line.  Or it could simple show the nearest stop to the user, showing how close incoming/outgoing trains are to that station.

Scenarios:

1) Jack White overslept for his 8am class.  He is running late.  Since it is the end of January, it is below freezing this early in the morning.  Not only is there no time to walk to class, it is just too cold and uncomfortable to do so anyway.  He pulls out his iPhone and checks his “Is The T Close?” app, selecting his closest station (Longwood) to see where the train is relative to him.

2) Jack is approaching graduation and currently searching for a job.  There a bunch of jobs opening in Watertown, far away from the NEU area in Watertown.  He needs access to a bus.  Looking up the stop location for Harvard Square, he sees there is a connection to the 66 bus at Harvard Square, which can take him right to Watertown.

3) Another of the jobs Jack is interviewing for is in Cambridge, off the Red line.  Since he lives on the Green line, he has to find a place to transfer from Green to Red.  Looking at the Green line map, he sees a Red line connection at Park Street and clicks it, opening a map of the Red line to him.

4) Alex Turner is unsure of where he is, exactly, in the subway.  He opens his “Is The T Close?” app, which locates him at Park Street, using GPS to find his location.  But since the settings send him right to a train line, it takes him to a map of the Green line.  Alex wants detailed information for the station he is at.  Knowing he is at Park Street, he simply hits the words “Park Street,” taking him to a detailed map of that stop.

5) Now Alex wants to see a map of the Red line, since there are no trains close by to the Park Street stop.  He simply looks at the detailed information map of Park Street, sees the links to the Green and Red line maps, and hits the “Red line” link.  This takes him to an overarching map of the entire Red line, displaying relative locations of the trains.

6) Albert Hammond is very unfamiliar with the area.  He knows he has to get to somewhere on the Green line, but isn’t sure exactly where he is on the Green line.  He opens his “Is The T Close?” app, which uses a GPS to find exactly where he is in the city of Boston and show him the closest station on the Green line.

Team Roles:

Matt and Mark were both designers in coming up with potential designs and settling on one that we felt would work the best. Matt designed most of the system and the interactions between pages with input from Mark on varying layouts after seeing some limitations. Mark and Matt both played managers by providing input and guidance to the other whenever one was concerned or had questions. Mark was the Web Designer by putting the prototype up online and performing the overall writeup.

Briefing:

We are designing a smartphone app meant to be used as a reference to find information, approximate arrival/departure times, distances between stops, and other related information about Boston’s MBTA, specifically the subway. The idea is to keep the app as simple as possible, allowing users to glance at information already familiar to them during their commute/trip to find what they need quickly and efficiently. The system can give some granular information if observed closely, but it can also only be used as a simple, quick reference.

We are conducting a study to discover how people interact with the system. Your personal information (i.e. your name) will not be recorded or published; this study is meant only to discover how our potential demographic will be able to use the system.

The system should be straight-forward to navigate through, especially if you have any working knowledge of the MBTA. The purpose of this study is for us to confirm or deny how user-friendly the interface is. Instead of using an actual smartphone, we have created paper versions of what we want our interface to look like. I will act as your “smartphone,” moving the pages around to simulate what the system would do when actually implemented. Other members of the team will act as observers, taking notes on how you interact with the system.

This is not meant to be a test of your abilities. This is a test of our system. Since you are imitating what a user would do in real life, our team will keep explanations as minimal as possible. If you find any problems or cannot proceed, that is a problem with the system that needs to be fixed. Upon completion, please tell us what makes sense, what’s confusing, any questions you may think of, and what did or did not work as you expected.

Scenario Tasks:

(1) Use the search to find Roxbury Crossing Station information.

(2) Find information for the Orange Line and then navigate to a map of the Blue Line.

(3) Find bus connections for Roxbury Crossing.

Demographics:

Seeing as Boston is known for being a “college-town” (that is, it is a city with lots and lots of colleges and universities that people come from anywhere and everywhere to attend), it is filled with lots of young adults and even teenagers.  We figure a major demographic and who we really have in mind when designing the system is college students and other young adults.

Keeping this in mind, we tested a handful of college students (with no prior knowledge of the system other than the briefing above) on how well they could complete the above tasks.  These students ranged from ages 19-22 of varying racial/ethnic backgrounds.  The users were tested on a college campus and in apartments.  The users were given all the time they needed to complete the tasks, which ended up being pretty quick.  Beyond the paper prototypes, no other equipment was necessary to complete the tasks.

Observations & Results from Interviews:

Task One:  We had included a search box in the top right corner of the interface, which was what we had intended the users to use the type in a station name to jump right to that station’s page.  However, we had a user who completely missed the search box and physically and literally “searched” for the station with our more obvious drop-down menus.  While it technically worked to get to the result we wanted, it completely missed how we wanted to get there.  After talking to the user, he mentioned not seeing the search box at all.  Between noticing that we made the drop-down menus much larger and the user’s comments, it would probably be best for us to modify the search box somehow.  Perhaps we should move it to top left corner, following the “Z” a person’s eyes follow when looking at something.  Maybe it needs to simply be bigger.  Or a different color to stand out.  Or some combination of the three.

Task Two: Again, the users completed the task we wanted, but not how we wanted them to get there.  Next to each station on the map is a colored-square showing other connections available to it (e.g. State Street has a touchable blue square next to it that, when touched, will take the user from an Orange Line map to a Blue Line map).  However, without fail, the users would go to an Orange Line map, navigate away from the map to the home page, and then navigate to a Blue Line map.  According to the users, it is not apparent that those colored squares were touchable buttons.  Those obviously need to be made apparent that they are actually buttons and not just for giving information.

Task Three: Yet again, the users missed what we wanted them to do.  We wanted the users to touch the little circle next to a station to display a speech bubble displaying bus connections.  But our station pages also display bus connections.  The users simply navigated to the station pages completely unaware that the button on the Line map even had that capability.  Just as the problem with the second task, the apparentness of the buttons has to actually be made instead of just assumed by us as designers to be buttons.

 

Team Roles:

Since the overarching design of the application had already been worked out and agreed upon, creating paper prototypes needed little more than designers and testers, of which both roles were filled simultaneously by both team members.  Matt and Mark each designed different parts of the system (certain pages or functions of the pages) and tested different users or observed the users instead of “playing computer.”

Design Alternatives/Descriptions:

main design sketch proto 1main page design sketchmain design sketch proto 2

These were possible designs for our main screen.  Initially, the thought was to either pick a line or station from drop-downs.  But then we realized this would be a bit too cumbersome when scrolling through all the possible stations.  After realizing this, we added filters to the stations and lines as to save the users time when finding a station they want.  Then, we realized the users might want to change general settings (e.g., brightness) as in most other systems or simply search right away for what they specifically have in mind, adding the settings and a search menu.

In the final design, this first main screen that users will encounter upon opening the app.  It will allow the users to search the app for either a specific line (i.e., Blue, Green, Orange, Red, or Silver) or a specific station.  Selecting a line from the first drop-down (Green Line in this case) will filter possible station selections to only stations that are on that specific line.  Shown next to each station’s name on the drop-down is colored squares (shown with letters for their respective line names) representing which lines they are on.

red line design sketch

Shown here is a map view of the Red Line.  It displays each station on the actual line (not to scale, just a rough estimate) with brief information about each line (i.e. bus or other train connections) and clickable/touchable links to train connections displayed next to applicable stations.

station design sketch

Shown here is the individual information page for the Downtown Crossing station.  It displays a close-up view of the station (relative to the entire overarching line map) allowing it to show any intersecting train lines that are available to that station (in this case, Red, Orange, and Silver).  Beneath the map are links to line pages that are available to that station.  So for this example of Downtown Crossing, the user is able to click either the Red Line, Orange Line, or Silver Line links that will take them to the respective line pages.

station & main deisgn sketches

Here are rough initial sketches meant to serve as jumping off points for both the individual stations maps (on the top half) and main screen (bottom half).  These were used to bring out ideas as to how the app will work and interact with itself.

Storyboards:

(1) Searching

main pagesearchingsearch resultsscience park page

(2) Going from line to station

main pageselect linegreen line pagescience park page

(3) Going from station to line

main pageselect pagescience park pagegreen line page

Roles and Tasks:

For this part of the project, Matt acted as architect, bring out overarching ideas as to what the system will do between pages and within pages while Mark acted as the designer/web designer, figuring out the small details of how the system/interface will look and feel.  Matt and Mark both acted as business analysts, deciding what users would need and eliciting respective requirements.

content_diagrams

Conceptual_Design

 

 

The possible interaction metaphors we decided upon are a picture of a house to represent the link to the Home page, a gear to represent the link to Settings, a magnifiyng glass to represent Search, train track to represent going to Lines, trains will represent each individual train on the line, and colored square to represent the lines on each map.

For this iteration Matt and Mark both worked as business analysts to determine what tasks needed to be achieved and how to best decide how to accomplish them. Both Mark and Matt also served as web designer/engineer to upload images and write out parts of the process online

Follow

Get every new post delivered to your Inbox.