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