Issuu on Google+

INTERACTION DESIGN + PROGRESSION


SKETCHING + WHITEBOARDING

Sketching on notepads and reciepts was always used when I had an idea that I did not want to forget. Most of the process of design involved carrying a notebook to sketch ideas, take notes, make lists. A similar form of sketching was using whiteboards that helped in quickly sketching ideas out and talking through scenarios. This process helped in validating concepts of sketches and also participation with potential users. Through active discussion, this process helped gather insights and their concerns and allowed users to have an active role in the design process.

87


WIREFRAMES The process of creating wireframes was crucial in externalizing ideas, creating application maps to evaluate screen flow, and to make testable prototypes in Invision. This allowed me to test concepts and narrow down features that were only necessary for the user.

88


EARLY WIREFRAMES CONCEPTS

Homepage / Dashboard

DRIVER PLUS

Explore

Profile

DRIVER PLUS

EXPLORE

DRIVER PLUS

DRIVER PLUS

Chris Savella

Tri Nguyen

Maps

Traffic going Work 32 Trips

1 hr

3+

WORK

RECENT

12 Badges

Following Chris Savella 15 min ago

Recent Trips

30 min

1 hr

3+

HOME

WORK

RECENT

82mph

72mph

30min

Highest Speed

Avg Speed

Duration

Badge TODAY

20 min

55 min

Traffic going home FAVORITE 1 FAVORITE 2

Maps Tips

Maps

Commuting Details

Traffic going home

37 min FAVORITE 4

+

4 Friends

Clark Smith

DRIVE LOCATIONS

DRIVE LOCATIONS 30 min HOME

Maps

started driving to SIEMENS 5 min ago

43 min FAVORITE 3

Maps +

Fast Commute

Maps

Tips

89

82mph

72mph

30min

Highest Speed

Avg Speed

Duration

Maps

David Shoe

Checked into STARBUCKS 5 min ago

Evan Rhomas

Earned a Consistency Badge 5 min ago


EARLY WIREFRAMES CONCEPTS

Navigate

Badges

SEARCH LOCATION 515 Amb |

Stats

BADGES

NAVIGATE

STATS DAY

Enter a new location

WEEK

STATS

MONTH

YEAR

DAY

WEEK

515 Amberstone

mph

mph Badge 1

Badge 1

Badge 1

Badge 1

Badge 1

Badge 1

Badge 1

Badge 1

Badge 1

YEAR

64

82 Use Current Location

MONTH

My Home

Canyon Oaks 1 Amberstone San Ramon, CA

NEXT

Maps

90

DISTANCE: 75 MI

TOP SPEED: 82 MPH

DISTANCE: 657 MI

TOP SPEED: 82 MPH

TIME: 1 HR 25 MIN

AVG SPEED 45mph

TIME: 12 HR 52 MIN

AVG SPEED 67mph


KEY INTERACTION AREAS

Multiple Destination Routing 1

2 CREATE A ROUTE

CREATE A ROUTE

CREATE A ROUTE

Enter a start destination Enter a end destination Use Current Location Add another destination

GET ROUTE

3

1

Current Locaition

2

Enter a end destination Add another destination

Home

Routes

CREATE A ROUTE

1

Current Location

2 3

Route 1 - 59 min

Work Enter a new destination My Home Add another destination

GET ROUTE

Canyon Oaks 1 Amberstone San Ramon, CA

Current Location

GET ROUTE 109 Rose Dr, Milpitas, CA

Work

Driving Tips

NEXT

1. Routing can support more than 2 destinations

4. Get route for Two Destinations in 3 destinationsroute

Traffic Report

2. New destination can be added by pressing on the “+”

91

3. Drag and Drop feature for changing order of destinations

Drive


KEY INTERACTION AREAS

Saved Route 1

2

Option 1 : Corner Star

18 miles

18 miles

28 min - Light Traffic - 5:48 pm

28 min - Light Traffic - 5:48 pm

Option 2 : Right side

18 miles

18 miles

28 min - Light Traffic - 5:48 pm

28 min - Light Traffic - 5:48 pm

Option 3: Button option below map Route Saved

Save this Route Traffic

Directions

Traffic

Route Options

92

Undo Directions

Route Options


KEY INTERACTION AREAS

Route Detail Interaction Location Textfield States Shortest Distance emphasis if selected.

2623 Camino Ramon

18 miles

262

28 min - Light Traffic - 5:48 pm

Route Cards (Activated on Swipe)

Fastest Time

Drive

New Route

CREATE A ROUTE Shortest Distance

Drive

New Route

Drive

New Route

28 min

28 min

28 min

28 min

18 miles - Light Traffic - 5:48 pm

18 miles - Light Traffic - 5:48 pm

18 miles - Light Traffic - 5:48 pm

18 miles - Light Traffic - 5:48 pm

Current Location

2623 Camino Ramon, CA...

45 min 19 miles - Heavy Traffic - 6:05 pm

Enter a destination

+

My Home

My Home

My Home

Add another destination Traffic

Directions

Route Options

36 min 38 miles - No Traffic - 5:48 pm

GET ROUTE

Traffic

Directions

Route Options

To Your First Destination Take exit 21 toward Dumbartin Bridge 0.2 mi

See More

Changes Map and Detail information on Swipe

93

Keep right at the fork, follow signs for State Route 84 W/Dumbarton Bridge. 8.4 mi

Traffic

Directions

Route Options


NAVIGATION STRUCTURE Notes: 1

2

94

1

Sliding panels The left slide panel holds the main navigation structure activated by swipe or tapping the list icon.

2

Tab Menu Each mobile page has tabs used to hold information that are related.


PERSONAL DASHBOARD PAGE Notes: 1

Dashboard on App Launch Personalized Dashboard displays common destination that a user has entered. Allows for quick glance and routing based on current location

2

Recent Places Dashboard contains recent places, unlike My Places, ‘Recent’ contains a history list of places by date you went to prior for easy look up, but not a place you go to all the time.

3

Destination Selected Upon selecting your place to go, traffic maps and visualization appears. Allows users to view traffic specific to their route.

2 1 3

95


ROUTE DETAIL PAGE Notes: 1

1

Route Detail Similar to the dashboard, this page displays new routes you are looking for. It allows you to save for later use or get directions especially for unfamiliar areas.

2

Route Options Route Options allows for changing route information, adding more or less destinations or routing to just your first set of routes.

3

Your Profile Currently just settings so you can easily adjust them based on what type of notifications you want, as well as whic GPS you primarily use to route. This defaults at the native maps application on the phone.

3

2

96


MY ROUTE PAGE Notes:

1

1

My Routes A dashboard isn’t enough, so you have the “My Routes” page so you can do all of your management of places, routes, and recent. Users can reorder through Edit Mode.

2

Saved Routes All the new routes you want to save appears in the saved routes page. Allowing you to check traffic for these complex routes at any time.

2

97


STATS PAGE Notes: 1

1

Time Saved by Day How much time are you saving? When optimizing commute, you get to see how you time save when relative to the expected ETA of traffic.

2

Time Saved by Week Weekly numbers show more trends on time saved. You also start to see how much time you spend travelling weekly and how many miles you aquire.

3

Time Saved by Month

3

2

98


DEVELOPMENT


PROTOTYPE DEVELOPMENT The current prototype for DriverPlus is using web technologies particular HTML5. The plan will be to build a prototype and package it as a Phone Gap application. Future plans are to build a native iOS application with objective C and the iOS SDK. The HTML5 prototype lacks on performance, but it able to show interaction. Thecurrent prototype is build with Ratchet framework and using jQuery 1.3.0 for sliding panels. Google Maps is used for the map and routing features, while Chart.js us used for graphing stats on time saved.

jQuery Mobile

Ratchet. Framework

100

HTML

Google Maps API

CSS

Chart.js


FUTURE EXPANSION


FUTURE EXPANSION IDEAS This app contains many areas for expansion and in depth research. A few of those areas can be expanding to other channels, Android, iPad, and Web. Taking what I’ve learned from designing an iOS app using the Apple Human Interface Guidelines, I plan to take what I’ve

learned in Mobile, I plan to design out other areas in the future. Secondly, since my app is only a simple prototype, I would like to see how far I can go with it in linking Traffic APIs and building a database to store the stats.

IDEAS: 1

Extending the app to Premium Users and Audiences This application is mainly consumers that commute, upon discussion with colleages, they can see how certain work groups would benefits from this. An example would be truck driver where they can better optimize how they drive on the road or pull over to nap during high traffic times.

2

Expand social features: Comparing Time Saved The app currently contains no social features, but extending the stats feature set could support comparing time saved with other friends to see who is the best commuter.

3

Create the Explore section: Social Feeds Related to Traffic Using People that Tweet to find out about Traffic (Human sensors It has occured to me that people tend to Tweet, Instagram, FourSquare any way to communicate when they are in traffic.

4

GeoFence about Traffic Allowing people to be notified about an accident while being on route using a geo fence.

102


DriverPlus Interaction Design + Process/Ideas Chapter