My Bus Tracking App

The Project

The project was to create an interface design that would  help solve problems people experience when using the Maryland Bus system. After researching, designing, and prototyping I created an App that will make the average bus rider’s life easier while solving some of the problems of the MTA system from a user prospective.


Field Study and Observations

The first part of my research was to figure out what exactly were the problems and how could I solve them. The first step was to go on a field study and just record all the observations I made while riding the bus.




Data Collection and Affinity Mapping

The next part was to collect the observations and organize them into a Affinity Map of the data from observations. Once that was done I had figured out the main problems to focus on. The main problems for avid bus riders seem to be knowing the actual real time that the bus is running by, for example Google directions may have the bus getting to a certain stop at 12 but because of delays that bus may not actual get to that stop until 12:20 and for novice bus riders, where to find accurate directions involving bus routes,  and where their bus stops are for specific bus routes.

Interviews and Personas

For the next part I had to find real life bus riders to interview for my Personas, that I would be designing the app for.  Luckily for me I knew two people that regularly rode the bus and that was Mike and Ty. After interviewing them I learned their biggest problem was knowing what time the bus would actual arrive at their stop and when it would actual get to their destination. They essentially needed real live tracking for the buses, so they could arrange their schedules appropriately. They also needed an app that would tell them of any delays while they were on their route and give them alternative routes if there were delays.    


My conclusion from this research was that I needed an app that would have real time tracking of the buses as well as any alerts. Plus for any novice bus riders, the app would have to be able to locate exact bus stops and would be able to give directions and information for different bus routes and bus stops. The app should include a trip planner feature so that you could have your travel planned ahead to avoid any problems if necessary. The app also had to use language, actions, and components that the user is familiar with.



Overall, the app should be a one stop shop for all your bus travel needs.



Heuristic Evaluation

To begin the design process I found similar apps from different states that were rated well, since Maryland doesn’t currently have any apps that do this. The apps I found were the Chicago Transit app but after some research I found MyTransit NYC app which had better reviews. So I did a Heuristic evaluation on these apps to find out what worked and what didn’t. This evaluation included user language, control, flexibility, recognizability, and aesthetic design. Once I had this information I was ready to begin designing.

User Flow Map

The next step was to create a user flow Map so I could figure outeach step and how to get to that step in the simplest way possible. This would give me an idea of how many screens I needed to create for the app as well as how to make it flow easily so the user wouldn’t have any problems using it. i wanted to make the app simple for the user while focusing on how to solve the transit problems the app was created to solve.



After I had the initial idea of the user flow map I began to wireframe screens to figure out how I wanted things laid out and to get an overall feel of different components needed for the app. I wanted the information laid out in an easy to use way as not to confuse or frustrate the user.  I tried to place the menu in a spot that would be able to use on a  phone and considered the placement of all content in an easy to access placement if you were using the app one handed like you would use an app on your phone. This way I could figure out where all the information would go in the layout.


Design Components

Then I began working on the color scheme and components such as buttons that I would need to design the app. I needed a bottom menu, as well as multiple different style buttons, and a font that was simple to use but had a slight personality. The font I used was different weights on Bernhard Gothic which I felt had readability while still having a personality. I kept the background colors in white and grays so that it wouldn’t clash or be distracting to the design. But I added a splash of green to keep it interesting as well as the green having a calming effect on people and since people are usually frustrated when using the bus I thought the green would help keep them calm. I wanted the elements to be simple and unassuming so they didn’t distract from the goal of the app solving people’s problems with the MTA transit system

Design Completion

I had to figure out of the best way to lay out this design that kept it simple but focused on solving the problems of the user. After putting all these different components together, figuring out all the user flow, and multiple revisions to the design I finally have a finished design that isn’t confusing or distracting. I kept the design simple for the user to use with the steps straight forward to accomplish their goals with the app. I designed this way because the app user may not have that much experience with technology and I didn’t want them to get frustrated. I also used components and actions in the app that were easily recognizable as to how they functioned in similar app platforms the user may have experienced in the past. This way the app hopefully can take away some of the frustration with using the MTA system in Maryland.


Design the Prototyping

After designing 40 plus screens, I took them all into Invision so I build a prototype. I created hotspots that are clickable and will take you through the user experience of the app. This way I can test the app and look for any places that are as user friendly or flow as well as they should, so I can fix any problems.



Here is a link to experience the prototype:



User Evaluation

After the prototyping, I conducted a user evaluation similar to my heuristic evaluation of the other apps. I found four users from various backgrounds with different levels of tech experience and different levels of bus riding experience to get feedback on the usability of the app. I used both Mike and Ty from my personas as the users with bus experience but somewhat limited tech experience. For my users with limited bus experience I used Jason, who has a lot of tech experience, and Sheila, who has very limited tech experience and is almost scared of using technology. They liked the different features and actions the app can do but Mike and Ty were inclined to feel that some features such as the bus stop locator weren’t that necessary. On the other hand Jason and Sheila thought the bus stop locator was great but they had limited experience with taking the bus so it would be more handy for them. Overall, the functionality, usability, and navigation of the app were successful for all four of them but they all thought it needed some small tweaks.

The feedback was perhaps too many steps for some actions and maybe it needed to be somewhat more straight forward.


Comments are closed.