MTA.info mobile redesign


Client: Myself (personal project)

Responsibilities: User journey, wireframes, prototype

Tools used: Sketch, Marvel


A personal project in which I decided to update the UX and UI of the MTA's mobile Trip Planner.

mta-1

Old design VS new design.

 

I began with wires for every screen I intended to build, keeping in mind that my goal was to create a working prototype of the feature.

mta-2

Wireframes.

 

Below are a few example screens that compare the old Trip Planner design/experience to my new one.

mta-3

Old keyboard input / New keyboard input.

The new, cleaner UI consists of more obvious signifiers (i.e. navy blue as the link color), and gives the user more affordance to tap to their desired location on the screen.

 
mta-4

Old date input / New date input.

In testing the site’s existing calendar function, I noticed that it does not always work as intended. Using the native iOS date picker in the new design should help to eliminate that problem, along with alleviating user frustration.

 
mta-5

Old itinerary screen / New itinerary screen.

In the new design, the first itinerary is exposed by default to show the quickest method of travel and to avoid an extra tap on the screen. The first itinerary is collapsed when the second is tapped, and the device scrolls to the top position of the second itinerary, which helps to avoid confusion and unnecessary scrolling for the user.

 

Walk through the whole experience by clicking the button below. The ideal way is to view it on your smartphone!