MPT (Metro Public Transit)
The MPT mobile app is a live bus tracking app that removes the guess work on which bus the user should ride.
The MPT app allows commuters to easily identify which bus is theirs and an ETA of the bus at their selected bus stop.
My Role: UX/UI Research - UX/UI Design
OVERVIEW
The Challenge:
While the bus schedule is posted on the city’s transportation website, and at each bus stop, this information is unreliable due to traffic, maintenance of buses, and additional time needed to assist handicapped riders.
*Riders only care about which bus is theirs and the ETA.
The Solution:
MPT provides consistent and reliable information at the touch of a button. Using location tracking offers the most current bus route information providing a calming environment for all riders.
The Audience:
The participants include a wide range of riders who use the bus either daily or several times per week. The typical user thrives on a set schedule.
PROCESS
RESEARCH
Client Goals & Desired Outcome:
To create a live tracking mobile app including these goals:
1. Notify any rider when each buses arrives at any bus stop (especially the Washington & State bus stop)
2. Ensure that all riders can tell how much time they have to get to a bus stop before the bus they need arrives at that stop
User Research:
I began building the foundation for my design by conducting both quantitative and qualitative user research. I recruited participants from various platforms, forums, and my personal network.
Quantitative Research:
I created an online Google form to distribute a survey to my participants. This helped me gain insights into user behaviors and thoughts.
19 Participants
Survey emailed using Facebook, Email, and Text Messaging
Qualitative Research:
I followed up the survey with 1-1 interviews to gain deeper insights of a user’s emotions, desires, and expectations while using the MPT app.
3 users were selected from the existing participants that fit the following criteria:
Regular bus riders
Commute to work, school, shopping, or a combination of these
Interviews were conducted via text and instant messaging.
USER RESEARCH RESULTS
Takeaways from User Research:
The majority of users make choices based on apps that are already familiar to them.
They tend to gravitate to universal patterns and buttons. Consistency is key to a productive, easy-to-use app.
COMPETITIVE ANALYSIS
This project began with researching 2 large competitors to understand their product’s strengths and weaknesses, as well as gain an understanding of basic user expectations when using transit apps. I looked at METRO (Metropolitan Transit Authority) in Houston, Texas and MTA (Metropolitan Transportation Authority) in New York, New York.
METRO in Houston is an essential part of the city’s public transportation system, operated by the Metropolitan Transit Authority of Harris County (METRO).
1. METRO Lines - Buses & Trains
METRO consists of Buses and Rail Trains. Some routes are easily transferred from Trains to the Buses and include Park & Ride lots for those living in the suburbs.
With 3 different lines, you can easily pass through Downtown, the Museum District, the Texas Medical Center (ideal for healthcare workers, patients, and visitors), and NRG Park. additional locations serviced include the University of Houston and Texas Southern University.
2. Accessibility
Stations and Trains: All METRO stations and trains are fully accessible, with features like elevators, ramps, and designated
MTA in New York is a major part of the city’s public transportation system and is operated by the Metropolitan Transportation Authority.
1. Buses
MTA’s extensive bus network complements the subway, especially in areas where subway coverage is limited.
Buses are identified by a letter and number (e.g., M15, Bx12). The letter indicated the borough (M for Manhattan, B for Brooklyn, etc.)
2. Accessibility
All NYC buses are equipped with ramps and are accessible to passengers with disabilities. An additional service provides door-to-door transportation for those who cannot use the subway or bus due to a disability. spaces for wheelchairs.
STRATEGY
Personas:
Using the data from my research, I developed several user personas that reflected common behaviors, goals, and needs shared by the participants.
CUSTOMER JOURNEY MAP
INFORMATION ARCHITECTURE
User Stories:
Site Map:
FINAL DRAFT:
Digital Wireframes:
Demographics
Married, Upper Middle-class
Early 40’s
Mom of 2 School-Aged Children
Works in Finance
Behaviors & Beliefs
Checks multiple apps daily to stay updated on current events
Spends as much time with her family and friends as possible
Grocery shops weekly at a store near her office
Maintains a rigid and consistent work schedule due to family responsibilities
Goals & Needs
Wants to be notified of the ETA of her bus
Thrives on organization
Gets frustrated when her bus does not arrive on time
Structure and consistency are key
Demographics
Single, Upper Middle-class
Early 30’s
2 Dogs
Nurse
Behaviors & Beliefs
Daily app user (Social, weather, and travel)
Enjoys shopping and dinner out with her friends
Volunteers at her local animal shelter
Loves helping other with her work as a nurse
Goals & Needs
Easily frustrated when her bus arrives late
Would love to be notified of the bus ETA
Needs consistency during the week
Demographics
Married, Upper Middle-class
Early 50’s
3 Dogs
Medical Director
Behaviors & Beliefs
Passionate about his career
Loves animals
Enjoys dinner dates on the weekends
Outgoing with lots of friends
Goals & Needs
Reliable transportation is a must
Thrives on consistency
Hates missing the bus when it arrives early
Work days must be structured
I developed a customer journey map for Tina to deeply understand and empathize with her daily bus commute experience to and from work.
This exercise was very insightful, helping me to visualize Tina’s feelings and help to ensure she has a consistent and enjoyable daily bus ride.
To determine the key features of the bus transit app, I developed user stories centered around tasks and possible motivations. After compiling as many as possible, I prioritized them to address Tina’s most critical needs in the minimum viable product.
As a user, I want to be notified of the ETA of my bus
As a user, I want to know which bus I should take to arrive to work on time
As a user, I want to know what time I need to be at the bus stop
User Flows:
I designed user flows to illustrate the journey a user would take through my interface to accomplish the high-priority tasks outlined in my user stories. This process aided in understanding the necessary visual hierarchy and the relationships among the various elements.
User Story: As a user, I want to be notified of the ETA of my bus
Once I identified the screens needed from the user flows, I developed a site map to organize these screens and establish the hierarchical structure of my app.
FIRST DRAFT:
Using Figma, I created digital wireframes to use with early stage user testing. Testing was completed by sharing the wireframes via email. Once the participants received the wireframes, we jumped on a video call where I walked each tester through a scenario and gave them two tasks to complete.
Main Feedback:
Testers wished the ETA also displayed on the Home screen after completing the task
Testers liked the neat and consistent interface
BRANDING & IDENTITY
Branding Story:
To create the brand quickly and easily, I did the following:
Made a list of words that I wanted the app to represent
Created as many potential app names as I could, making sure they were:
Simple to say and spell
Clearly noted the app’s purpose
Easy to remember
Quickly sketched a couple of designs without overthinking them
VISUAL DESIGN
Logo Story:
Creating the logo was fun and fairly simple. I took the following steps:
I started with the idea of pins on a road map
I drew out a few sample logos until I finally settled on a combination of those drawings
High Fidelity Prototype:
I added the branding to the wireframes to build a clickable, high-fidelity prototype. Once the wireframes were styled, I conducted another round of usability testing with three participants.
User Testing Feedback (Main User - Tina):
FINAL PROTOTYPE
Upon reviewing the feedback I received in my usability tests, I adjusted the design and the final mockup to:
Changed the text to “Already have an account? Log in” on Screen 3
Added a “period” after “Settings” on Screen 6
Decided against making the pinned maps interactive.
FINAL THOUGHTS & TAKEAWAYS
Brainstorming & Testing:
I learned the value of brainstorming, rapid iteration, and regular testing at every step. From the start, it’s crucial to put even a rough wireframe in front of someone for feedback. Solutions come through an iterative process because you gain a deeper understanding of both the users and the product as you go.
Documenting:
I also realized the importance of keeping thorough documentation throughout the process. It proved to be incredibly helpful when compiling the information for my case study and putting together this presentation!
