top of page
Recording 2023-05-27 at 08.05.10.gif
Recording 2023-05-27 at 08.05.10.gif

TIMELINE

January 2018 - July 2018                    

COMPANY

MTA - New York City Transit

TEAM

Team: UX Designer (Me), Product manager (Kowal), Product designer (Johnson), UX Researcher (Andy) & UX Researcher (Sarah).

PROBLEM

New York city commuters needed four different apps to navigate the MTA's complex transportation system.

MobileStopCode.png

MTA BUS TIME

Provided real time arrival info for NYC bus routes.

mta-etix.jpg

MTA ETIX

Used to purchase tickets for the Metro North trains.

Screenshot 2023-07-26 051435.jpg

MTA TRAIN TIME

Provided real time arrival info for the LIRR.

Screenshot 2023-07-26 051643.jpg

MTA SUBWAY TIME

Provided real time arrival info for the subway system.

GOAL

Develop an all-in-one mobile app for metro commuters to optimize their travels in NYC.

PP5.JPG

FINAL DESIGN SOLUTIONS

We combined all the major functions of the old apps into this new comprehensive all in one app and enhanced the UX.

Screenshot 2023-07-07 235940.png

1

Real-time arrival information for trains, subways and buses.

 

Service status and updates on the causes of delays.

2

Screenshot 2023-07-19 041543.jpg
Screenshot 2023-07-19 035959.jpg

3

The ability to find nearby stations and stops.

4

The ability for customers with mobility challenges to plan accessible trips across trains, subways and buses.

Screenshot 2023-07-19 040903.jpg

The ability to personalize the app by saving favorite lines, stations, stops and trips.

5

IMPACT

Within 6 months of release, we saw a 500% increase in the app download, 740,000 visits and a bounce rate of 13.9 %.

Screenshot 2023-08-12 021444.jpg

OUR UX APPROACH

1_33khN9zpFCMWnF8pLqeVTQ.png

EMPHATIZE

User Interviews

Competitive analysis

Persona's creation

Journey mapping 

Storyboard

Affinity mapping

DEFINE

Defining project goals

Identifying pain points

IDEATE

Solution sketches

Paper wireframing

Low fidelity wireframing

Design review session 1

 

=

Things I led

PROTOTYPE

Interactive high-fidelity 

Design review session 2

Stakeholders workshop

   

TEST

Usability Testing

EMPHATHIZE STAGE 

USER RESEARCH

Things I led

download.png
download.jfif

Users surveys

competitive-analysis-1-e1593787727896-1.jpg

We broke our research into two phases.

Primary research 

  • Audited the current four operating MTA Apps.

  • Conducted stakeholders and MTA Board of Directors workshop.

  • Interviewed internal MTA employees to gather their insights and expectations.

Secondary research

  • Conducted five user interviews with daily commuters to understand their needs and preferences.

USER RESEARCH - ANALYSIS

  • We converted the collected data from our board meeting, user interviews and stakeholder's workshops into affinity maps. This helped us create insights and ideas to create this app.

IMG_9840.jpg
IMG_8421.jpg

INSIGHTS

Real time update and notifications was the most important theme we discovered from our user research.

  • From our affinity mapping we developed the following insights by grouping similar notes under similar headings.

DEFINE STAGE

USER PERSONA

We created four user personas from the insights that we derived from our affinity mapping and research method.

  • We shared these personas with our stakeholders and developers for validation.

USER JOURNEY

Our journey map showed that our users will want to know the train's arrival time and real-time location.

  • This map provides a detailed view of Michelle's experience including her emotions and her pain points while commuting to work on the subways using a navigating app.

STORYBOARD

Features like trip planning, service status updates and route options will improve our users journey.

  • Our storyboard highlights some key features and demonstrates how these features can help commuters navigate the New York City subway  more efficiently.

COMPETITIVE ANALYSIS

We concluded that SEPTA and NJ Transit offered real-time updates and mobile ticketing options which will be featured in our new app.

  • We analyzed the desktop experience, mobile experience, accessibility, user flow, navigation, features, navigation and descriptiveness.

NJ Transit App - Direct competitor 

 SEPTA App - Direct competitor   

Google Maps - Indirect competitor   

njtransit-logo-7.jpg
936473682e1b3cac3e5987480f6e06ee.jpeg

PAIN POINTS

We derived a comprehensive list of users pain points by analyzing and combining all our research methods.

  1. Real-time arrival information for trains, subways and buses.

  2. Service status and updates on the causes of delays.

  3. The ability to find nearby stations and stops.

  4. The ability for customers with mobility challenges to plan accessible trips across trains, subways and buses.

  5. The ability to personalize the app by saving favorite lines, stations, stops and trips.

IDEATION STAGE

PAPER WIREFRAMES - DESIGNING THE SOLUTION

Sketching for Efficient Flows + Visualizations

  • To explore various options, we sketched and brainstormed different solutions for the homepage and the pain point screens.

IMG_8371.jpg
  • We designed six homepage screens around the pain points that we derived from our user research.

  • We chose sketch #6 because we were able to solve all 5 pain points in this design layout.

IMG_8390.jpg
IMG_8374 (1).jpg
IMG_8375.jpg
  • We designed the solutions for pain point 1 & 3 into one button to reduce clutter.

  • We performed several design iterations within our team and chose what we thought would work best for the user. 

IMG_8410.jpg
IMG_8427.jpg

We had a design review meeting with stakeholders and developers to discuss these design solutions.

PROTOTYPING STAGE

WIREFRAMING - LOW FIDELITY 

We converted our paper wireframe solutions into a low fidelity interactive prototype using Figma.

  •  We created these wireframes from the final design solutions that we derived from our ideation phase. 

Homepage screen 

1. Real-time arrival information for trains, subways and buses.

4. The ability for customers with mobility challenges to plan accessible trips across trains, subways and buses.

Screenshot 2023-07-07 050324.png

3. The ability to find nearby stations and stops.

2. Service status and updates on the causes of delays.

5. The ability to personalize the app by saving favorite lines, stations, stops and trips.

Pain point 1 solution

Real-time arrival information for trains, subways and buses.

Pain point 2 solution

Service status and updates on the causes of delays.

Pain point 3  solution

The ability to find nearby stations and stops.

Pain point 4 solution

The ability for customers with mobility challenges to plan accessible trips across trains, subways and buses.

Pain point 5  solution

The ability to personalize the app by saving favorite lines, stations, stops and trips.

INTERACTIVE LOW FIDELITY PROTOTYPE

  • We used this low fidelity prototype for our usability testing.

For confidential purposes, this wireframe was edited to display only the pain point solutions.

USABILITY STUDY

Ability to track trains in real time, changing the MTA news button to saved trips and creating buttons for the user's favorite stops stations were identified improvements.

Testing Methods​

  • User Surveys and System Usability Scale.

SURVEY RESULTS

25%

Capture (2).JPG

No

Possibly with some adjustments

15%

65%

Yes

25%

85% of participants believed that the app will dramatically improve their travel needs.

85%

Answered that they would find the app extremely useful with everyday use.

78%

Answered that they were able to navigate through the various features of the app.

SUS RESULTS

Capture.JPG

Usability Testing Form
Response : 10
System Usability Scale Score : 75

70%

Answered that planning a trip from start to finish was okay but could be improved.

3 Major improvements were derived from our usability study.

  • We continued to iterate our design based on the feedback from Design reviews, Usability study and Stakeholders' workshop.

Before usability study

Screenshot 2023-07-07 232508.png

After usability study

Screenshot 2023-07-19 055105.jpg

  • This function will allow users to easily access their daily routes to work, favorite restaurants etc.

Changing the MTA news tab to saved trips

Screenshot 2023-07-19 055127.jpg

  • From our stakeholders' workshop, we understood the real need for the app to display the live time for the bus and train arrival. 

Ability to track the bus and trains in real time.

Before usability study

After usability study

Screenshot 2023-07-08 000548.png
Screenshot 2023-07-07 235940.png

Before usability study

After usability study

Screenshot 2023-07-07 050324.png
Screenshot 2023-07-07 233958.png
Screenshot 2023-07-19 055145.jpg

  • Our usability study showed that most New Yorkers take the same route and use the same train stations frequently.

Create buttons to show the user's favorite stops and stations and also lines and routes.

HIGH FIDELITY PROTOTYPE

THE FINAL PRODUCT

  • After several testing and iteration, we finalized on this design and will conduct another usability testing in the near future.

hIGH FIDEL.JPG
Recording 2023-05-27 at 08.05.10.gif

UX TO DEVELOPMENT HANDOFF

Handing over this project to our developers was a smooth process because we engaged them through all phases of our design process.

  • Finalized Design Deliverables

  • Conducted Handover Meetings

  • Provided Detailed Documentation

  • Collaborated on Design Assets

  • Conducted Design Reviews

  • Provided Support and Clarifications

  • Test and Validate

  •  Iterate and Refine

NEXT STEP

Perform a second usability study and continue design iteration.

bottom of page