top of page

A to B:

Mode Comparison Transit App

I fused my urban planning background with my UX skills and optimized a mode comparison interface. Users can compare all the different modes available to them, set preferences, and see which is the fastest and cheapest way for them to get from A to B. 

 

 

My Process:

Prototype

Problem

 

  • Transit riders toggle between several apps to plan their route.

 

  • Time estimates are skewed since they don't include elements like parking time and bus reliability.

 

  • User want the fastest, most reliable, and most cost effective way to get from A to B.

 

 

 

 

My Solution

 

  • Prioritize route options by duration instead of separating them by mode. 

 

  • Have algorithm include real time data and parking time estimates.

 

  • Offer all mode possibilities, but include a mode preference section for users to customize.

Heuristics

 

Identified the successful features as well as the product gaps that my app could fill.

 

 

 

 

 

 

 

 

 

 

 

 

Many real time transit apps such as Rover only provide the user with data for a single mode such as public transit.

 

Or we have Google Maps, which isn't real time data and separates the search results according to mode and you have to toggle through the modes to decipher which is the fastest.

On Site Interviews & Surveys:

 

  • 35 survey respondants

  • 15 user interviews

  • Users based in SF Bay Area

  • Site interviews at BART and Caltrain stations

 

 

 

 

 

  • Riders use a variety of transportation apps and rely on more than one to plan their trip

  • Array of transportation modes used yet many users don't know all the possibilities

  • Google Maps' lack of real time data is a major pain point

  • Users need a multi-modal transportation app that compares different modes not one app per mode

  • The fastest option was very important

Ideation

 

  • Collected user problems that arose during user interviews and surveys

  • Categorized pain points

  • Prioritized most common and most pressing pain points

  • Considered potential feature solutions.

 

 

 

 

 

Personas

 

Identified different types of potential users. By separating them into categories, I was able to consider the similarities and differences in their behavior, values, pain points and needs.

 

 

 

 

 

User Flows

 

Google Maps begins the query with the users mode and then yeilds search results categorized by mode.

 

 

My version prioritizes the shortest travel duration option, regardless of the mode. You can state your mode options in my preferences section, but the intial results will show the user all of their mode options.

 

 

 

 

 

Sketches

 

I sketched the interface to visually conceptualize a solution.

 

 

 

 

 

Wireframes

 

This design solution prioritizes the duration element and allows you to specify your transportation mode preferences.

 

 

 

 

 

User Testing

 

After testing the wireframes on users, I took that feedback and designed a solution.

 

 

 

 

 

Mood Board

 

This collage exercise helped me determine the visual design for the app. In transportation, many colors are already taken to indicate certain meanings, so I had to be careful about my color choice.

 

 

 

 

 

Adaptive Layout

 

This is a mockup of the design in portrait and landscape view.

 

 

 

 

 

Explore the Prototype

Next Steps

 

  • Measure which features are used most and possibly rearrange priority

  • Dive into Visual Design. Establish color palatte, typography, and icon style.

PDF of Detailed Process & Entire Collection of Deliverables

 

Anchor 1
Anchor 2
Anchor 3
Anchor 4
Anchor 5
Anchor 6
Anchor 7
bottom of page