STL Metro

Product Design, Branding

STL Metro is a prototype that proposes a simple solution to a broken public transit experience. For those who rely on the Metrolink system of St. Louis, this app would serve as a tool to help them navigate the city with ease.

Empathy for Poor Experiences

To gauge the quality of service, a powerful exercise is to experience it yourself. When I decided to shift my method of transportation to be more environmentally friendly by using public transit, the amount of friction to this adjustment was shocking. Constantly, I would find myself unsure of which line to take, when the next train was arriving, and how long my trip would be. To make matters worse, the official trip planner is hardly any help when you’re on the go.

After having a very frustrating onboarding experience of using the St. Louis Metrolink system, I began to wonder how it could be simpler. That’s when I decided to challenge myself to prototype a mobile app that might help people easily navigate the St. Louis Metrolink.

The UI for the official trip planner.

Using the schedule provided by the city can be exhausting to scan the lists and find the right departure time.

Map it Out

It could be assumed that the reason the St. Louis Metrolink is so frustrating for new users is that it’s a complex system that hasn’t been properly simplified. To ensure I had a deep understanding of how the Metrolink system works, I continued to use the Metrolink and cataloged all available route information along the way.

By using the St. Louis Metrolink regularly and taking advantage of public information, I was able to empathize with user needs, breadboard the experience, and then plan a workflow for a mobile app.

The empathy map I made to gauge how users feel when using the metro.

Sketching and planning how the experience should work.

Keeping it Simple

With a solidified vision, the next step in my process was to create high fidelity mockups and prototype them. To ensure simplicity throughout the design, users can only access relevant information when and where they need it. The entire app is made up of 3 views that serve as a simple and pleasant tool to help people navigate the St. Louis Metrolink system.

The finished product would allow commuters to:

  • Efficiently check upcoming train times on the go
  • Set departing and arriving stations for a trip
  • Reference a map of the routs, pricing information, and hours of operation

Features not included in the initial design:

  • Ability to view the full schedule for a selected stop
  • Weather-based ride share promotion

Final solution in action.

Following Through

With the UI and the prototype finished, it was time to make this feel like a finished product. Since this is not an official product from the St. Louis Metro, it was up to me to decide a name for this product and design a brand.

In an attempt to make it clear what this app does, I opted for very simple naming and branding. Calling the product STL Metro seemed like an obvious choice, and to support that the identity is a simple icon of a metro train going through the arch.

Pieces of inspiration for the brand design.

Thumbnail sketchees and the final vector rendering.

Ideas Without Resources

Unfortunately, without the capital to acquire the development talent to bring this product to life, STL Metro is limited to an idea, not a published product. While I did gain experience in practicing empathy for users as well as sharpened design skills by simplifying a robust transit system. The most valuable lesson I learned throughout this project is where my weaknesses lie as a one-person team.

Acquiring funding to bring a product to life is not a position I have found myself in before, so it’s not surprising to find that I wasn’t ready for this. However, I do hope to take this is as a learning opportunity to prepare for next time. How can I put myself into a position to find investors and pitch ideas for funding? My plan is to take this prototype to apply for funding from arch grants in 2020.