Cap Metro

I love my job as an in-house designer, but I'm always looking for side projects to keep me fresh, as it allows me to get outside of my normal zone.

For this project I focused mainly on the trip planner workflow within the Metro app, which I found troubling as a frequent user. I entered my current location and a common destination near a Metro station, but was perplexed to find that if you choose a location outside the service area, the experience leads to what seems like a dead-end with little guidance to the user as far as how to rectify the situation.

There are some basic issues that, if addressed properly, would have a huge impact on the UX. The current screen doesn't let you know WHICH location is problematic, nor does it give you any guidance as to how to get to the System Map.

There were also some icons that at first seemed to do nothing, but after some digging I realized they DO serve a purpose, but only in the event you've chosen "acceptable" locations for both departure and destination.

Even though I'm focusing on the Trip Planner, I do some Home concepts as well, since it's the point of entry. As I usually do, I started by doing some sketches with pen and paper to work out some basic ideas and then narrowed it down for a few approaches I felt were the strongest. Then, I take those and do some basic wires to get a feel for the layout and whether it still works in pixel land.

Normally, I’d try to see if there is existing usage data to determine how I should form the feature hierarchy in the UI, and if that isn’t available I’d start research. However, this being a personal project I opted for something less science-y and assumed that the order in which items appear on the home screen was influenced by some such data.

Now, if that is indeed the case, that’s certainly one way to establish hierarchy, but using that alone falls short in my mind. These options are mostly the same color, size, etc. From a visual standpoint it’s a bit overwhelming so I focused on simplifying things while maintaining the same order of importance.

For the Trip Planner screen I made some similar assumptions with regard to the available features and their rank of importance, but I did take some liberties (such as getting rid of the separate ‘trips’ tab). This feels like overkill given the recent locations tab as well as the ability to mark locations as Favorites.

gallery-prototype

I utilized the large swath of negative space and opted to actually include the System Map here. This way, I don’t have to go looking for it and I can choose a new location on the spot. Additionally, a button for the Route Map has been added to the bottom right as a secondary option.

One last thing to point out—which may or may not be feasible, but I’m pretending that it is—is that I pointed out *which* location is outside the service area, and provided nearby options based on that. This eliminates a lot of confusion and makes a much nicer experience.

Finally, I did have some fun with the visual design because, why not? I worked to maintain the brand voice while also making the UI cleaner and more approachable. This feels more on-trend and appropriate for the progressive city that is Austin.

Thanks for looking!