Final Logo PNG.png
Bus Tracker Banner

Bus Tracker

Redesign of the NYC Bus Tracker application to improve its usability and design. By conducting heuristic evaluations and usability studies on current design, the flaws are highlighted and insights are incorporated into a modern version. 

Role: UX Researcher and Designer

Deliverables: Design Requirements, User Stories, Sketches, Personas, Interviews, Heuristic Evaluations, User Flows, Site Map, Wireframes, Design made with Adobe Experience Design (XD) 

Research

According to the New York City MTA, it has 5,748 buses for 2.5 million people to take on an average weekday in 2015 [1]. The MTA has a tremendous amount of passengers and therefore, the demand for this service is high. Currently, the MTA Bus Tracker application has between 100,000 to 500,000 downloads on Google Play [2]. I purpose a redesign of this application that would improve its functionality and usability. 

Sources:

[1] http://web.mta.info/nyct/facts/ffbus.htm

[2] https://play.google.com/store/apps/details?id=com.jmd.busservice&hl=en
[3] http://web.mta.info/nyct/facts/ridership/

Current Design: NYC Bus Tracker

MTA Bus Tracker - Home
MTA Bus Tracker - Home
press to zoom
MTA Bus Tracker - Nearby Route
MTA Bus Tracker - Nearby Route
press to zoom
MTA Bus Tracker -Bus Info
MTA Bus Tracker -Bus Info
press to zoom
MTA Bus Tracker - Route Info
MTA Bus Tracker - Route Info
press to zoom

User Research: Interview and Heuristic Evaluations

Interview Questions:
  • How do you navigate around New York City?

  • Do you use public transportation? If so, what types?

  • Have you ever rode on an MTA bus? 

    • If so, can you describe your experience finding the bus and route to go on?

    • What was your experience on the bus?

  • Have you ever used an application to navigate the MTA system? If so, which ones?

    • On a scale of 1-5, 1 being extremely unsatisfied and 5 being extremely satisfied, how would you rate your experience using those applications?​

    • Did you think something could have been improved with those applications? If so, what aspects?

  • What information would help your traveling with the MTA?

[Show user the NYC Bus Tracker application]

  • Does this application look familiar to you?

  • Have you ever used this particular application?

Usability Test on Current Design:

[Following the Talking Aloud Protocol]

  • What do you want to click on next?

  • What do you expect will happen if you click on that?

  • Does this page match your expectation?

Participants:
  • 5 individuals

  • 2 used this application before

  • 5/5 would use an application like this

Interview Insights:
  • What information would help your traveling with the MTA buses?

    • What buses are nearby

    • Time of arrival of bus

    • Note delays

    • How long it will take to get to destination

 

  • What features would you want in this design?

    • View multiple bus arrivals at same time

    • Automatic refresh of bus information

Heuristic Evaluation Insights:
  • Visibility of system status: poor

    • Lack of error messages

    • Current error messages do not make sense

  • Error prevention: poor

    • Homepage is confusing, users did not understand how to search on the homepage

    • Directions were not clear

  • Match between system and the real world: poor

    • Displays useless information to the user

  • Consistency and standards: poor

    • Certain things are clickable and do not look it

    • Navigation issues

Personas

Amber - Expert Bus User
  • Takes the bus frequently

  • Knows route number

  • Knows which stop to get on and off

  • Wants to know time of arrival

Jason - Intermediate Bus User
  • Knows where he is

  • Knows where he wants to go

  • Want to search for buses by address

Emily - Beginner Bus User
  • Does not know which bus routes are nearby

  • Does not have exact address of where she needs to go

  • Uses nearby stops to look at route options

Functional Design Requirements

Search for a bus:
  • By Bus Number

    • Type in bus, select your stop and know time of arrival​

  • By Address

    • Put address in, where you are (current location) or type in and destination

    • Which buses are best and time of arrival

  • By Nearby Stops

    • See which bus stops are nearby and routes

    • Select the stop to see how far away the buses are

    • Add address and then best route will be highlighted (+)

Other Features:
  • Save your favorite bus stops

    • See how far away the bus is from the stop in minutes

    • View multiple bus routes at one time

  • Get information about delays

User Stories

Home:
  • As a user I would like to view a list of bus routes nearby when I open the application.

  • As a user I would like to see the bus routes nearby on the map so I can see where the bus routes are in relation to where I am. 

  • As a user I would like to see where the bus stop is and an indication of the bus route path. 

  • As a user I would like to know the name of the bus id, its destination, where the stop is located, the stop distance from my current location and its estimated time of arrival.

  • As a user I would like to know if I have favorited this bus route before. 

  • As a user I would like to know if the bus has any current delays. 

Search:
  • As a user I would like to search for a bus route by address or bus id. 

  • As a user I would like the application to save my previous searches for quick access. 

Saved:
  • As a user I would like to save my favorite bus stops and routes. 

  • As a user I would like to easily access my saved favorites. 

Initial Site Map

Bus Tracker Site Map.png

Initial Wireframes

Home
Home
press to zoom
Nearby Stops
Nearby Stops
press to zoom
Nearby Stops - Route Selected
Nearby Stops - Route Selected
press to zoom
User Feedback:
  • The Homepage contains several options for users, but they cannot retrieve previous search results. If an individual completes a search without saving the particular stop, how can they retrieve that information again? Can a 'Recent Search' be implemented?

  • For Nearby Stops is there a way to place information about buses traveling in both directions in their own row? The direction is confusing since some buses travel in multiple directions, such as north and east 

  • For the selected bus state, can this page be streamlined to contain information in a more concise way? I did not realize I had to click on 'Show Route' to see all of the stops

Insights:
  • Include a 'Recent Search' option

  • Update organization of content for nearby stops to clearly indicate direction of bus route

  • Explore other options for the hierarchy of information on the selected bus detail page

Wireframes Version 2

Home
Home
press to zoom
Nearby Stops
Nearby Stops
press to zoom
Nearby Stops - Selected
Nearby Stops - Selected
press to zoom
User Feedback:
  • Not sure how I should begin using this app. If I already used it before I might go to Saved Stops or Recent Search, but if I never used it before I would probably choose Nearby Stops

  • Sometimes the lighter text is difficult to read

  • I like that there is a notice of delays for the lines

Insights:
  • Homepage contains too many options at the beginning that may be difficult for the user to make a selection. Streamline the homepage by presenting users with information right away

  • Update style guide to adhere to accessibility guidelines in terms of color contrast and interaction design

Initial Interaction Design

Nearby Stops:
  • Use current location

  • Show user bus stops nearby

  • When selected more information about bus route appears

    • start and destination

    • shows all stops

    • service status: good/delays

    • save stop

    • show where buses are along the route

Bus #:
  • User types in Bus #

  • Include bus information

    • start and destination​

    • service status: good/delays

    • list of all stops on route

  • Select particular stop from list

    • indicates how far away the bus is in minutes​

    • save stop

Address:
  • User types in starting and ending address

  • Show possible routes organized based on arrival time to destination

  • User selects route

    • shows distance to stop​​​

    • indicates several buses on route

    • shows bus stops when selected

    • shows distance to destination

Site Map Version 2

Bus Tracker Site Map 2.png
  • From several rounds of user testing, I realized the importance of showing information to the user as quickly as possible. In the initial designs, the user had to select their search method at the beginning of the experience. If the user's goal is to understand bus information as soon as they open up the application, the data should be available on application landing.

  • If the user wishes to search they would have that option available in one search experience, instead of indicating how they wish to search. 

User Flow

Bus Tracker Flow.png

UI Design

Home
Home
press to zoom
Bus Tracker Search
Bus Tracker Search
press to zoom
Search Results
Search Results
press to zoom
  • The goal of this redesign was to improve the navigation and streamline the process of acquiring information. Now on application landing, the user is presented with a map and list of nearby stops and routes, organized by which stops are the closest. Each listing indicates the direction of the bus route, where the stop is located, time of arrival and a notification if there are delays. Saved routes are also shown with a star indication. 

  • The user can search for a particular destination or bus route by selecting the search bar. When the user taps on this area the search view appears modally. On search landing the user is shown a list of nearby routes to access their detail pages quickly. The user is also shown their recent searches. After the user inputs a search they are presented with a list of the stops that are close to that destination. By canceling this view the user is brought back to the home page. 

  • The hamburger menu contains the users settings and a FAQ page. The settings page will include links to notification and location permissions as well as the version number of the application. 

  • On the home page, the user can quickly access their saved routes and filter through the list with several options. 

Interaction Design

Design System

Bus Tracker System
Bus Tracker System
press to zoom

What I learned and the next steps...

  • Although I wanted to redesign this application for my own personal use, there are other kinds of users I had to be aware of when producing a universal design. Through interviews I realized the pain points individuals that do not normally use public transportation face and addressed these issues in my design. 

  • By testing this design several times I was able to learn more about what features users care the most about and focus on the interaction of those elements.

  • In the future I want to continue to user test on this design and iterate based on feedback to enhance this experience. 

More Work

  • LinkedIn - Black Circle
  • Dribbble
  • Medium
  • YouTube - Black Circle
  • Github
  • Codepen

© 2021 by Angela Delise