︎

Helen Miao






MyT



Overview
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.).
Type
UI/UX, Mobile Application Design

Tools
Figma


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.


Brainstorming

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?


Waze:
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?

Persona

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:


Sitemap


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

︎       ︎       ︎