Portfolio Project: Washington DC Bus Mobile App

Joe Flynn
7 min readSep 14, 2016

--

Washington DC’s WMATA Metrobus operates 325 different routes across the metro area. Finding the right one for where you need to go can be a major challenge, especially to someone unfamiliar with the system. In this project, I set out to design a simple and effective solution to viewing and riding on the Metrobus system. (Note: Right around the time I completed this project, Google started rolling out similar public transportation features via Google Maps navigation. However, I feel my solution offers a few more options that makes navigation even easier.)

Identifying the Problem with DC Metro Bus

I’ve navigated DC’s Metrorail system of trains to get all over the city with ease countless number of times. I’ve even had out-of-town guests comment on how easy the Metrorail system was to figure out. On the other hand, I’ve only ever ridden the Metrobus once despite it offering far more routes to many more areas of the city, mainly out of fear of getting on the wrong bus and ending up halfway across the city in the wrong direction.

So I decided to get the opinions of others by asking about their experiences using DC’s public transportation. The interviews all went fairly smoothly, that is, until I asked about their experience using Metrobus. Every person I talked to had some noticeable reaction to that question. People groaned, rolled their eyes, laughed, and even stated outright that they avoid using it. So why does it seems people have negative reactions to Metrobus while some praise Metrorail?

DC’s Metro Bus system map versus Metro Rail system map

The simple answer is the number of options. There are so many bus numbers, routes, and stations that trying to decipher it all can be an overwhelming task. I even found in my interviews that people who take the bus every day for work are wary of trying to navigate a new route they are not already familiar with. The stark visual difference between the two system maps shows the disparity — the Metrorail map is clean, clear, and can be read by almost anyone with a basic understanding of the city’s layout, while the Metrobus map is so overcrowded with information that it fails to be helpful for most people.

The problem that needs to be solved here is how to present such a complex and overwhelming system in a way that is intuitive and clear to all users, especially first time riders.

Competitive Analysis

So if the official system map will not help someone navigate Metrobus, I decided to look for a third-party app that could simplify the task . Despite the large number of great apps dedicated to the Rail, there were only a handful for the Bus, and none of them were particularly intuitive or helpful for a non-expert user. The screenshots below show the steps for finding a bus using an app that was typical of the rest.

Step 1 — select the bus route

The very first screen of this app shows an extremely long list of all the bus routes available by bus number and terminal stop. If the user does not know which bus route they are looking for, or which stops each route services, then the information on this screen is useless.

Step 2 — select the bus stop

The next screen allows the user to select from the list of stops their chosen route services. Here the user must know the cross street of the stop they want to use. If, for example, the user only knows the stop they want as “the one across from the McDonald’s in Gallery Place”, then the information on this screen is useless.

The final screen displays the departure time of the next bus from that stop. It in no way tells the user what stops are along the route or helps them get to a destination other than the terminal stop. If the user does not already know exactly where they are going and how to get there before opening this app, the information on this screen is, again, useless.

Nothing about this app guided the user in navigating the city. It did not make the already complex system any simpler. The last screen even shows information for all buses at the selected stop despite the first screen requiring the user to pick only one bus. All this app did was provide the departure time of the next bus, which, after scrolling through the gigantic list of routes, you will probably have missed anyway.

Establishing Goals for a Solution

The overwhelming nature of the Metrobus brought to mind a design principle established by Don Norman in his book The Design of Everyday Things. He states, “Knowledge in the mind is ephemeral: here now, gone later”, however “Knowledge in the world is accessible. It is self- reminding. It is always there, waiting to be seen, waiting to be used”.

A practical application of this principle is the address book. 20 years ago, most people had the phone numbers of a few close friends and family members memorized (knowledge in the mind). Today, thanks to cell phones, people have the phone numbers of hundreds, even thousands of people stored in their phones (knowledge in the world). So now, they can contact someone they haven’t spoken to in years as quickly and easily as someone they speak to every day.

So my goal was to take all the knowledge that people need in order to navigate the Metro Bus system (bus numbers, routes, street names, etc.) out of their minds and put it into the world for them to access. To do that, I would just need to help them answer the following basic questions:

1. Where am I leaving from?

2. Where am I going?

3. How am I getting there?

Once those questions are answered, my solution should make navigating the Metrobus system as easy and accessible as the Metrorail.

The Solution

After drawing out a few ideas, borrowing a few concepts from apps like Uber, and getting feedback from friends, the following are screenshots (some omitted for brevity) of the clickable prototype for a DC Metrobus app created using Sketch.

The first question this design helps the user answer is “Where am I leaving from?” On the screen above, the user is presented with a map that displays icons for each bus stop in the area. The app uses GPS to show the user’s current location and help navigate the user to the correct stop.

The user can select their departure stop by simply tapping the icon of the stop they want, or, as shown above, by typing in an address to the search bar. A list of the nearest stops from the location entered will appear and can be selected.

Now that the departure stop has been selected, the second of the three questions can be addressed, “Where am I going?”

Instead of typing the exact address, if one is not known, then a business or landmark can be typed instead to display that area of the map. In this case, the user searched for Lincoln Theater and can now select the stop outside the theater, or any in the area they prefer as their destination.

Now that the destination stop has been selected, the final question can be addressed, “How am I getting there?” With the start and end point displayed on the map, the best route is shown along with which buses the user can take to reach their destination. In this case, the 90, 92, 93, and X3 bus will all do the job.

The user can view further information about the buses including the upcoming times, a full schedule, or the bus’ entire route.

While the rider is en route, they can view their progress on the map thanks to GPS. This helps remove confusion over when the rider has reached their intended destination, which was an issue some had mentioned during the interview process.

And for further clarity during the trip, the user can display a full list of each stop along the route.

This is all still just an idea in prototype form at this point. I may one day look into mobile development to get a working version of this app up and running, but until then you will likely only find me riding around on the train.

--

--

Joe Flynn

Business Analyst in the DMV area with a strong interest in User Experience Design.