User Interface Design for EmbarkNYC (Embark Inc.)
914
24
1
Published:
  • Add to Collection
  • About

    About

    Complete redesign of an iPhone transit app platform with my startup, Pandav Inc. Original designs are from 2008, redesign of the app began summer… Read More
    Complete redesign of an iPhone transit app platform with my startup, Pandav Inc. Original designs are from 2008, redesign of the app began summer 2011. Read Less
    Published:
iPhone UI/UX for transit, Pandav Inc.
I started Pandav Inc with a developer in 2008. I first mocked up the designs on paper and then in Photoshop, with some user research and observations. We released iBART after the summer, and since then have followed up with over 10 other apps for transit systems around the US and the world.

In summer 2011, we completely revamped our platform with our expansion into the NYC Subway.
The original layout of our applications. Aside from some appearance changes, the overall user experience was the same as our original design in 2008. We originally used a tab bar style app to keep navigation simple, since the iPhone interface was so novel.
It became apparent that with large systems, this layout was limited. We decided to restructure the app to be more map-based with our move into the NYC Subway system. I worked with the developers to lay out the new user experience for the app, which would keep the clean, minimal appearance our apps are known for, but make it quicker to use, and reduce redundancy while enhancing usability.
The Tooltip

We needed a way to display arrival information right on the map, and decided to design a tooltip that would slide up when the user tapped on a station. Throughout the process, I worked with the developers to develop the best user scenarios, and check feasibility. This process started with paper mockups, and then once there are a few solid ideas, moves into Photoshop.
These are some screen captures from Photoshop of the tooltip mockups. Generally I would create a few different alternatives, then we would all criticize the different ideas based on use and appearance, then I would refine. Iterate. Iterate. In the final stages, I made pixel-perfect final graphics assets, and worked with the developers to make sure everything was perfectly aligned in the interface code.
The final design of the tooltip, with scheduled arrival data (New York does not yet provide real-time data).
The Trip Planner

The next major redesign was the trip planner. We wanted it to be obvious how to plan a trip, but also simple and seamless, as our first design was. This happened in two parts: the first was how the user specifies a trip, and the second, how the user sees the trip information.

We had already designed a way to specify a trip origin and destination from the tooltip, with the “Start Here” and “End Here” buttons. Now, how do we display these choices? And how to we allow users to reverse their trip, or change the time?
Early mockups of the trip planner. This is where I decided to move the functions to reverse the trip or change the time, in order to keep the main page simple, and allow for these parameters to be change on the next page.
LOTS of Photoshop mockups to go into design details. From left to right:
1. Iterations trying out display of the time on the main page (eventually this was moved to the next page, with always defaulting to planning a trip leaving immediately)
2. Trying the reverse button (also moved to the next page to keep it simple)
3. Trying different arrow designs
4. Figuring out helping text on the “plan trip” button to make its function explicit
5. more helper text on the Origin/Destination cells, to make the significance of the circles obvious.
The final design for the trip planner. The trip planner helper text (“start”, “end”, “plan trip”) only show up the first five times the user uses the app, then it changes to the simpler design. The timing and reverse trip options are on the next screen; since the on-board trip planner (no internet required) is so incredibly fast, there is almost no real disadvantage to calculating the trip twice.
To design the trip information display, I first did a competitive analysis of the other transit apps for the NYC Subway, to see what information they provided. Shown here are iTrans NYC, Maps, and NYCmate.
The final Trip Detail design. The larger text gives you all the information you need, while the auxiliary smaller text provides further information if desired. 
Ride NYC was released at the end of the summer, and is available on the App Store for free. Download it here. After NYC, we released Ride London, with many more to follow.