Helen Miao


To create a more personalized and informed navigation experience for riders who use the Massachusetts Bay Transportation Authority (MBTA), I designed MyT, a mobile-based application that guides passengers and allows users to create/save routes and customize them to their liking (set reminders to leave, route names, etc.).
UI/UX, Mobile Application Design


Contextual Research

To learn more about the role of design in public transportation, a couple of my fellow classmates and I conducted contextual research.

User Research - Human Behavior on the T

I observed human behavior on the T to gauge more of people’s habitual tendencies and actions they perform in a public transportation environment.

User Research - Observations

My classmates and I listed our specific observations of human behavior.

User Research - How Might We...

Then, my classmates and I brainstormed general “How might we...” questions that we separated into topics of navigation, public space, accessibility, etc.

User Research - Themes

I categorized “T rider” actions into themes that I wanted to explore more.

User Research - Scenarios

I created three scenarios in which passengers faced common challenges while riding the T.


In an effort to synthesize my ideas, I brainstormed both digital and non-digital interactions that train riders can experience and benefit from, in relation to the three scenarios above.

Ideating Solutions

I ideated three proposals for a digital solution that would improve the experience of riding the T, as well as roughly sketched a couple of pages for the interface.

Improved passenger comfort and space:

Personalized navigation:

Accessible passenger-driver communication:

Competitive Usability Audits

I conducted competitve usability audits for each of my three proposed solutions, analyzing popular transportation apps. I used Nielsen’s 10 Usability Heuristics for Interface Design as a guide.
(notes are written in the colored post-its)

Google Maps:

Goal -  Viewing a route’s information

Key takeaways - 
  • Maintain match between system and real world
    • Use colors, icons, logos, etc. that align with ones in real life
      • Helps with wayfinding and recognition
  • Allow for user control and freedom
    • Users should be able to explore various destinations, departures, times, etc.
  • Pain points in the UI:
    • Needs distinguishing between kinds of alerts
    • Could information be organized better in the route overview?


Goal - Viewing delays, maintenance, information and updating map

Key takeaways -
  • Avoid use of too many controls and buttons on one page
    • Confusing for user, user feels overwhelmed
  • Utilize icons and colors but not too many
  • Keep departure and arrival visible at most, if not all, times
  • Keep flexibility and efficiency in use
    • Saving actions for later (like routes)
  • Pain points in the UI:
    • Alerts/delays are hidden unless user swipes up. Basically hidden
    • Unclear differences between certain action button (X vs. Later)

MBTA app:

Goal - Using route Shortcuts

Key takeaways - 
  • Utilize minimalistic and clean design for route overview
    • Keep essential information and use clear hierarchy and layout
  • Consider separate page for shortcuts and saved routes
    • Easily accessible, separate from other functions
  • Pain points in the UI:
    • Departure and arrival icons not very intuitive
    • Inconsistent use of icons vs. emojis
    • Refresh icon for Leave is unclear. What exactly is that supposed to do?


I decided to move forward with my second idea, Personalized Navigation. As a reminder, here was my proposal:

I created a persona, Michael, who would serve as a representation of my target user – T passengers that desire a more personalized digital experience with transportation that is tailored to their routes and anticipated delays:


Lo-fi Wireframes V1

Lo-fi Wireframes V2


Decided to scrap having route creation on one page, so now, the user goes through route creation step-by-step


Lo-fi Wireframes V3

Created multiple iterations of the Saved Routes page:

All current wireframes side-by-side:

Hi-fi Wireframes V1 / Experimentation

I experimented with colors in my first hi-fi iteration:

Hi-fi Wireframes V2

In my second iteration, I fleshed out the rest of the app’s pages:

User Testing

After testing with my target users and T riders, I received helpful feedback that affected my design decisions moving forward:

Color contrast is too low

Progress bar is very effective

Awkward color usage to indicate disabled/future

Font size is too small

Should keep Create Route header the same across all steps. don’t merge the blue into the route details.

No “Go” option after creating a route

Aside from the above critique, I learned from testing that the interface was overall designed cleanly and easy to understand.

Final Hi-fi Wireframes:

Overlay design

Hi-fi Prototype & Demo

︎ Click here to interact with the prototype yourself!

︎ Click here for a YouTube video on a walkthrough of the app!

Press Release & Poster Mockups

I mocked up a future press release and posters for my app idea, MyT:

Main Takeaways

  1. From this project, I learned a lot about how to maintain consistency throughout the UI. Especially with creating the design system from scratch, it’s important to not go too overboard with types of UI elements like toggles, selectors, date/time pickers, etc. Picking a smaller set of colors to work with for your buttons and indicators also helps with less visual overload for the user.
  2. With complex amounts and types of information, such as the information associated with creating a route, it’s important to consider what the user knows, doesn’t know, needs to know, etc. (e.g. user needs to enter date, time, location of departures and should know trip duration, # of stops, station names, etc). Determining what kinds of information is necessary in the app should be done through user testing, so you can get a better understanding of how your target users can benefit from using your application.
  3. It’s also important to keep your app interconnected with itself. For example, users would benefit from having the “Go” option available right after they create a new route. Providing these kinds of shortcuts not only makes the app easier to use, but also shortens the amount of time users need to complete tasks (thus improving user experience). It encourages users to use different features throughout the app. In addition, this idea is especially important for apps focused on personalization – if you want users to feel like they are in control and able to customize the app to their liking, maintain consistency by adjusting information displayed throughout the app, based on their customizations (e.g. showing only delay/maintenance information that’s relevant to the user’s saved routes).

@ 2024 by Helen Miao   ☀ Boston, MA & San Jose, CA

︎       ︎       ︎