MTA iOS Trip Planner
Platform: iOS
Responsibilities: User journey, wireframes, visual design
Purpose: An overall improvement to the experience and design of the MTA’s mobile Trip Planner.
Below is a personal project for which I updated the experience and design of the MTA's mobile Trip Planner.
Left: old design / Right: new design.
Breakdown:
I began with wires for every screen I intended to build.
Wireframes.
Below are some example screens that compare the old Trip Planner design/experience to my new one.
Left: old keyboard input / Right: new keyboard input.
The new, cleaner UI contains 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.
Left: old date input / Right: 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 will eliminate that problem and alleviate user frustration.
Left: old itinerary screen / Right: 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.