A lifestyle brand dedicated to design, travel and creative expression.
Outbound.thumb.png

Outbound iOS App

Outbound is a concept mobile application designed to create environmental awareness about the differences in commuting options. The app combines all levels of linked transportation —from MUNI, BART, bicycling, and even uberX —Outbound ensures that you get to your destination by taking the fastest and most energy efficient commute.

The purpose of the app is to combine visual geographical data with directions in one screen, while focusing on greenhouse gas levels each transportation method emits. The map area is interactive and can be oriented to zoom into the desired location. The app was designed from a personal challenge where I found myself frustrated with the Google Maps app. This iOS7 mobile application was completed in March 2014 before Google Maps displayed both the interactive visual map and listed directions in one screen. This was also before they began showing other commuting options like cycling and UberX.

My role: User interface, UX and interaction design

Responsibilities: to design an interactive and user friendly mobile application that visually displays the best commuting route and detailed directions in real time

Process:

• Create a logo and logotype

• Define user's needs and goals

• Sketch a 6 screen story with main task to get from point A to B

• Polish wireframes with microinteractions

• Create imagery and put in placeholders

Challenges:

• Idea was based on a very small and specific problem regarding transportation apps

• Environmental awareness and clean technology easily overlooked in commuting

• A need for a well designed and environmentally friendly transportation app that could showcase both list and map directions

  Screen 1 : Outbound Splash Screen

Screen 1: Outbound Splash Screen

  Screen 2 : Default New Itinerary Screen, Start This screen shows the default Start/Finish maps. After calibrating the navigation button (crosshair) in the start area, the current location (on Haight St) is picked up and tagged. Saved itineraries are shown on the bottom to bring up the user's search history for easy access to the last few locations before the user exited the app. Because this is a first time use case for the app, there are no recent searches. 

Screen 2: Default New Itinerary Screen, Start
This screen shows the default Start/Finish maps. After calibrating the navigation button (crosshair) in the start area, the current location (on Haight St) is picked up and tagged. Saved itineraries are shown on the bottom to bring up the user's search history for easy access to the last few locations before the user exited the app. Because this is a first time use case for the app, there are no recent searches. 

  Screen 3 : New Itinerary Screen, Finish The user toggles the Finish bar to enter their destination. This manual trigger activates therules that a text input field was switched on, giving the user feedback by popping up the keypad to indicate that the user must type something. The "Destination" text also becomes greyed out since the text input field is active and the blue cursor is now blinking. As the user starts typing, the text disappears.

Screen 3: New Itinerary Screen, Finish
The user toggles the Finish bar to enter their destination. This manual trigger activates therules that a text input field was switched on, giving the user feedback by popping up the keypad to indicate that the user must type something. The "Destination" text also becomes greyed out since the text input field is active and the blue cursor is now blinking. As the user starts typing, the text disappears.

  Screen 4 : Active New Itinerary Screen The user typed in "Trick Dog Bar" for their search. The Start and Finish info boxes are now shown.

Screen 4: Active New Itinerary Screen
The user typed in "Trick Dog Bar" for their search. The Start and Finish info boxes are now shown.

  Screen 5 : Trick Dog Bar Itinerary After hitting search, the user is able to view all of their commuting options, ordered based on most energy conserving and time. Itineraries also show the maps for each method. 

Screen 5: Trick Dog Bar Itinerary
After hitting search, the user is able to view all of their commuting options, ordered based on most energy conserving and time. Itineraries also show the maps for each method. 

  Screen 6 : Trick Dog Bar, MUNI After hitting "View Details" for the MUNI option, the card slides up and grey bar below the map drops down to specify the directions for the user to see with step-by-step ease. The map is interactive and can be swiped down to hide the list of directions to maximize map viewing area.

Screen 6: Trick Dog Bar, MUNI
After hitting "View Details" for the MUNI option, the card slides up and grey bar below the map drops down to specify the directions for the user to see with step-by-step ease. The map is interactive and can be swiped down to hide the list of directions to maximize map viewing area.