DriverPlus - MFA Thesis by Tri Nguyen

driverPLUS Outsmart Traffic and Improve your Commute

WEB DESIGN & NEW MEDIA // ACADEMY OF ART UNIVERSITY // TRI NGUYEN

driverPLUS Outsmart Traffic and Improve your Commute

TRI NGUYEN // 415 235 4442 // TRIWASHERE@GMAIL.COM ACADEMY OF ART UNIVERSITY // GRADUATE SCHOOL OF WEB DESIGN & NEW MEDIA FINAL PROPOSAL // APRIL 23, 2013 // 5:30 PM

TABLE OF CONTENTS

INTRODUCTION AUTOBIOGRAPHY // 5 RESUME // 6 ELEVATOR PITCH // 7 THESIS ABSTRACT // 8 STATEMENT OF INTEREST // 9 BREAKDOWN BY SEMESTER // 10 TARGET AUDIENCE // 11 COMPETITIVE ANALYSIS OVERVIEW // 13 WAZE // 14 BEAT THE TRAFFIC // 18 SIG ALERT // 21 GOOGLE MAPS + GOOGLE NOW // 26 EVALUATION OF USER EXPERIENCE // 30 USER EXPERIENCE + STRATEGIC PLANNING RESEARCH OVERVIEW// 37 PERSONAS AT A GLANCE // 40 EXPERIENCE MAP // 44 PROJECT GOALS // 46 DESIGN WALKTHROUGH INFORMATION ARCHITECTURE // 50 TASK 1 -5 // 51

VISUAL DESIGN MOODBOARDS // 68 COLOR PALETTE // 69 SCREEN ARCHITECTURE // 70 GRID AND SPACING// 71 TYPOGRAPHY// 72 LOGO// 73 USER TESTING LAB TESTING OVERVIEW // 77 USABILITY ISSUES // 80 INTERACTION DESIGN + PROGRESSION SKETCHING + WHITEBOARDING // 87 WIREFRAMES // 88 KEY INTERACTION AREAS // 91 DEVELOPMENT PROTOTYPE DEVELOPMENT // 100 FUTURE EXPANSION FUTURE CASES // 102 CONCLUSION REFLECTION/CONCLUSION // 104 THANK YOU + RESOURCES // 105

INTRODUCTION

ELEVATOR PITCH

To create a personalized mobile app for the automotive commuter by providing personalized commute information in one place. This tool improves people’s daily commute and decision making by giving them tips, route times based on traffic and driving stats.

Designing an experience allowing Car Drivers, specifically commuters a planning tool that will: • Satisfy there specific needs as commuters • Provide them with key information to make decisions • Plan routes to their common destinations • See how much time they have saved within their statstics

THESIS ABSTRACT

Thought to be a problem that was solved, the commuters tool to understand traffic accidents and occurances has been very traditional through news updates, hidden beneath mapping clients, and accessed during GPS navigation. Was this something people wanted to know before or later? The commuters tool was in need for a redesign. Looking deep into what commuters use to collect information about their daily drive down major highways, Driver Plus reinvents the way people interact traffic reports, knowledge, and map visualizations with advanced mobile routing and traffic accident updates. It takes a simple idea, a complex problem, and allows Commuters to have a mobile application that provides a personalized routing tool and traffic visualization allowing everyday people to understand the things that affects their common destinations.

STATEMENT OF INTEREST

I begin with an idea, then it becomes something else. - Pablo Picasso tioned the core needs of this application and it began as a mission to understand what are the problems that drivers face and why?

These past three years has been an interesting pursuit to understand more about design and how it affects everyday people. My project has changed a lot since my midpoint review, but still centered around the concept of driving. It has evolved into an experience that I feel people will appreciate.

Diving head first into various research methods, I began to uncover people’s true driving needs. Commuters do not have information about how they drive, but they need to know external information about what’s ahead. People that commute need an experience that allows them to navigate through the unknown to get the their destinations related to traffic, bumper-to-bumper trips, accidents, construction, and time.

I have been driving my car since I was 16 years old and since moving on to college, I found myself commuting from Santa Cruz to San Jose, and sometimes back down to Antioch to visit my family which is roughly 100 miles away. In doing so, I have experienced all forms of driving, road rage, frustration, my mind going blank and a reliance on muscle memory to drive where I need to be, and traffic! My thesis project started out as a project where I wanted to take iPhone sensors to create a driving monitoring app, measuring people’s driving ability like braking, acceleration, and speed to providing suggestions for improvement. It occured to me as I explored this topic more, although this was an interesting pursuit, it wasn’t really solving a true driving problem. I ques-

I knew this was a competitive space, an area where big competitors dominate the area of navigation and traffic reports. I wondered how I would compete with this, but I knew that if they designed it well, then there wouldn’t be a problem. These past three years have taught me how to redesign an area and provide a solutions for everyday drivers (Commuters) to use.

CLASS BREAKDOWN BY SEMESTER

CLASSES

After passing my midpoint review near the end of 2011, I began to explore the initial concept of my driving application further through a series of direct study classes starting Spring of 2012. This thesis development timeline outlines the major change in my project direction and critical points along my journey. It maps out the

iterative process of completing my thesis. As I began to learn more about UX and design strategy, my process became more iterative and using Lea UX methodsn to quickly establish a design that was testable for user validation.

WNM 643: Interactive Design & Concepts

WNM 645: Time Based Media Scripting

GDS 801: User Experience 1

Motion Graphics

DS: Visual Design

GDS: User Experience 2

GS 606: Cross Cultural Understanding

WNM 619: Advanced Digital Imaging

WNM 699: Advanced Scripting

GS 610: Balancing Creativity & Profitability

GS 604: Professional Practices & Communication

GDS: Mobile Scripting

WNM 622: Digital Capture

WNM 661: Interactive Infographic

Prior Months

2011 FALL

Jan

Feb

Mar

2012 SPRING

Apr

May

June - Aug

Sept

2012 SUMMER

DS: Mobile Web Technology

Oct

Nov

Dec

2012 FALL

Jan

Feb

Mar

Apr

2013 SPRING

FUTURE

TARGET AUDIENCE

â&#x20AC;&#x153;If I had known traffic on highway 4 was that slow, I would have went around and took Bucannan Rd.â&#x20AC;? - Commuter, Antioch to Emeryville at 6am.

Driver Plus app is made for daily commuters that drive alone. Although there are many different types of commuters, this mainly focuses towards car drivers and ones that care about commute information.

Primary Audience: The Daily Commuter Secondary Audience: Drivers that plan out their itinerary Age: 16-65 years old Gender: Males and Female Devices: iPhone 3GS or Higher Technical Experience: Someone who holds an mobile phone with smart phone capabilities, but this project is tailored towards the iPhone. Education: High School or higher Language: English / Other Requirements: Must have a US drivers license

There are no specific demographic restrictions, just anyone who can legally drive in the United States. Age ranges from younge people, mid-age, and elders.

COMPETITIVE ANALYSIS An evaluation of each competitors based on usability heuristics and analysis of UI detail. This survey will reveal patterns, strengths, and weaknesses, inconsistencies across current apps as a traffic/routing apps. This evaluation was a qualititive analysis conducted by Tri Nguyen.

COMPETITIVE ANALYSIS OVERVIEW

• Waze • Beat the Traffic • Sig Alert • Google Maps • Google Now

Sig Alert

Google Maps

Google Now

Waze

Beat the Traffic

- Outsmarting Traffic Together -

WAZE Summary Waze is a community based mapping, traffic, and navigation app. Waze is probably the strongest competitors in my analysis. It carries many features. It allows you and other drivers in the area to share real-time traffic and road information. Some features include: • Live routing based on community-generated, real-time traffic, and road info • Voice guided navigation • Seeing people on an interactive map

Pros

Cons

• Consistent branding and visual design • Full breadth of features related to driving • Highly connected community base • Gamification strategy for rewarding users with points, and a united community base • Traffic visualizing and notification on 3d maps • Able to showcase frequent destinations, commute hours and preferred routes

• Icons of people make it distracting to get route information • Interface is cluttered interface due to many features • Map is cluttered with icons of people, colors, and road names, pop ups, and has little visual heiarchy. • Pins are hard to recognize direction

WAZE Navigation

Spring Board Menu The main menu pops up a spring board state. There is no quick access to any features

Report Menu Reports menu allows for user generated content. Although visual design is amazing, the amount of Waze features makes it very intense to use as a first time user.

Two Button Main Navigation The main navigation consists a two button navigation menu located on the bottom corners of the map. Once pressed, a spring board popup appears presenting two other menus. 15

WAZE Crowded Navigation Bar The top bar is overcrowed with additonal controls without enough space to breath. In additional to not following the Apple Human Interface Guidelines, the sheer amount of icons makes it hard to distinguish between features.

Layout

Cluttered Waze Map During use of the app, the activity of moving icons and all the features begins to take toll its bringing a cluttered map to ones eyes on first glance. 3D map tiles are styled very nicely. Possibly reduction map activity could provide more clarity for features as traffic and hazard. 16

WAZE

Action Items

Pop Ups and Information Heirarchy Actions for users are represented as pop ups with emphasis in numbers. Using a dark grey top banner and backgrounds allows content which are the information in numbers to be emphasized.

- your commute made easy -

BEAT THE TRAFFIC Summary The Beat the Traffic application allows users to look up traffic in their area in real time. It pulls almost 30-40 sources of traffic information and aggregates them together. It can be used on iPhone, Android, BlackBerry and their web application. It allows for user generated content for reporting incidents (accidents, hazards, construction, police, and weather.) Accidents can be notified on the map.

Pros

Cons

• Multiple location routing for traffic times • Add pinpoint makes it easy to create route with map • Ability to save multiple destinations for reference • Can contribute to traffic and road incidents for to support accurate app data (Accident, Hazard, Construction, Police, Weather) • Extensive traffic information exploring all forms commute information • Point system for Gamification

• Traffic Visualization colors are hard too see again foreground • Does not support Human Interface Guidelines, too many settings • Some buttons are below 44 px touch point • Top banner add conflicts with map areas • Awkward flow throughout application • User cannot navigate after routing, only for seeing traffic times

BEAT THE TRAFFIC Navigation

Icons hide near the corners

Inconsistent Touch Areas (not 44px) The touch area buttons are not the same and some of the interactions and gesture flows feel weird. This is one example of an inconsistent app that does not follow Human Interface Guidelines and suffers from it.

Icons revealed, but not a consistent size

Two visual styles exist between these menus

Several Types of Navigation Button are scattered throughout the corners of the app and they also have a spring board menu like Waze. The application seems to have different styles which is not good. The lack of branding and consistency makes it feel like the app is different screen to screen.

BEAT THE TRAFFIC

No Clear Grid System The layout of report incident does not follow any grid system. It almost feels cluttered with all the icons. Buttons also seem to be in many different colors which often makes it hard to know what action buttons are important. Beat the Traffic has great feature sets.

Gamification and Point System The point system contains many elements and is very complex. Although a very interesting feature, it feels often feels separated from the Traffic app. It has amazing features like things you should complete throughout the day to get points.

BEAT THE TRAFFIC Action Items Map The route flow seems to provide alot of good information for traffic routing. Map interaction feels natural. Color represents time of arrival and when to drive (green, yellow, red). The lines on the map could use some work because its hard too see direct when 3 pins or more go on the map.

SIG ALERT Summary SigAlert.com allows people to get high quality traffic information from any channel of the San Francisco Bay Area locations. It allows for personalized access to routes through My Sigalert routes.

Pros

Cons

• Detailed high contrast traffic maps • Access across multiple platforms via iPhone, browser access, mobile web access. • Thorough content of traffic providing important information to the user.

• Lack of visual design and visual heirachy • Excessive use of advertisements resulting in accidental selection • Difficult interaction with map and slow loading speeds • Touch area does not respond resulting in multiple clicks ( some times too small especially selecting points located on their map) • Difficulting in viewing critical accidents and low speed

SIG ALERT

Navigation

List View Nav List view navigation on homepage allows for easy viewing, but once inside the application, there is no direct path back to home.

SIG ALERT Layout Multiple Lists Majority of the application is create with lists and requires excessive scrolling to get the important information.

Banner Advertisement A Top header ad is placed between top navigation bar and content which makes accidental tapping easier and disruptive.

SIG ALERT Mobile Traffic Report Traffic list is shown by ramps and speed. This is has no order and not ranked in priority. Also, most drivers are not concerned with green. They care only that it is clear.

Action Items

Web View Maps Maps seems to be the most optimal wayof visualizing traffic information and a details-on-demand action.

GOOGLE MAPS + GOOGLE NOW Summary Google is a large online brand that has many tools including Google Maps. It is used quite often by people to navigate to a destination. Unfortunately, the experience is centered around maps and finding places, and takes less priority for traffic reporting. Google Now is there new line of apps, similar to DriverPlus in that it brings themost important information up front, but it is more broad and only for Android.

Pros

Cons

• Google Now brings the important information of traffic up front with a clear design of how long it takes • One of the best map client for search and GPS navigation, people would still use this for navigation and is considered a primary tool for that.

• Google Now maps are still very hard to scan quickly • Details of accidents stops at the first layer, Users can’t pinpoint accidents. • Google Maps is not made for the commuter, traffic is only revealed after navigation and/or route look up with little detail of specifics of why or where it happened.

GOOGLE MAPS + GOOGLE NOW Navigation + User Flow Search Search is the main navigation method of Google Maps

User Flow This is the main method for calculating routes within Google Maps. It supports exploratory nature, but not common places.

Traffic Highlight This shows multiple routes, but provides little detail on to Why and where it is happening.

GOOGLE MAPS + GOOGLE NOW Layout Google Now layout is card based, Layout is 1 column and interaction is scroll based in order of recent news. The layout is quite good, consistent with the Google Brand and very easy to scan.

Contextual Provides great context, but leaves you wondering why and where accidents occur.

GOOGLE MAPS + GOOGLE NOW Action Items

Traffic Highlight Google Now shows traffic to places you go to depending on when and where. But it doesnâ&#x20AC;&#x2122;t allow the user to know why or what other route options are available.

Google Now Overview The screen on the right shows all the contextual information for Google Now. It does provide inspiration since it is on Android and is integrated with the native OS features.

EVALUATION OF USER EXPERIENCE The evaluation of the competitor landscape will be based on six categories that will help gauge usability best practices and measure the competition. These categories are ranked using the following scale below. Simplicity - Navigation should be obvious and main features should be easy to interpret Flow - The journey of each task should be natural and easy to complete. User Control - The user should be to interact with features and customize their experience and preferences. Consistency - Conventions should be established across the app and users should know what to expect. Scannability - Users should be able to understand key areas and information at a glance. Branding / Visual Design - Apps should be unique establishing their own design standards with consistency.

Ranking Scale

Does not exist

Major Problems

Minor Problems 30

Fair

Best Practice

Evaluation of User Experience - Waze

Simplicity Wazeâ&#x20AC;&#x2122;s visual design is simple, but it doesnt provide clarity. With many features and activities, it becomes very cluttered on the map and provides lots of digging and has deep page levels.

Flow The app flow is burried and deeply structured. Many features requires exiting one and opening a next one.

Minor Problems

User Control Waze provides a good amount of user control and personalization with ones profile and contribution with reporting traffic. This is more of a enjoyment and in-car app for report.

Consistency The app is consistent with there patterns of jump through windows, it is very level based and requires moving deeper into user flow. This pattern may not be good for commuters.

Scannability There is alot going on with visual elements on one mobile app. There is no clear visual heirarchy for quick scanning. Learnability is high with this applicaiton.

Branding / Visual Design The visual design is great, recognizable as a brand and comfortable to the user. The color pallette and round typography allows clear comfort for the user. 31

Fair

Major Problems

Best Practice

Evaluation of User Experience - Beat the Traffic

Simplicity Beat the Traffic app presents very straight forward features, but leverages several forms of navigations inluding springboards and pop outs. It isnâ&#x20AC;&#x2122;t clear which is its main menu.

Flow The app provides many features which makes it difficult for traveling to a new feature, although individually is easy to use after getting started. It may not be for a beginning user.

Major Problems

User Control Beat the Traffic app provides noval ways of interaction with the data and features. There are innovative elements, but some areas of interaction could be improved.

Consistency The app could be more consistent in the UI patterns it leverages, there seems to be several, but after continued use, it because to be clear how it works.

Scannability Most of the problems with the application is the dispersed buttons across the screen. Data overlayed on the map make it difficult for scanning. Could be improved with visual heirarchy.

Branding / Visual Design Most of the problems with the application is the dispersed buttons across the screen. Data overlayed on the map make it difficult for scanning. Could be improved with visual heirarchy. 32

Fair

Minor Problems

Major Problems

Evaluation of User Experience - Sig Alert

Simplicity Sig Alert navigation is easy to use, although it was revealed that most users go right into their location to interact with the map.

Flow The flow is very hard to use. Most problems occur with map interaction and initial highway search. Advertisements get in the way of walkthough the task of finding traffic.

Fair

Major Problems

User Control The user design not have much customization and personalization with the SIg Alert app. Repretitive processes occur with using the mobile app and most users will use their website.

Consistency The app uses many list based patterns although effective, it could be improve to streamline the traffic search.

Scannability Easy scannability of Sig Alert traffic is why its popularly used among commuters, but getting more details on what accidents are there beyond if there is traffic on the highway is not natural.

Branding / Visual Design The visual design lacks style because it uses the standard iOS look for creating apps. Sig Alert lacks identification and recognizablity. 33

Minor Problems

Fair

Best Practice

Major Problems

Evaluation of User Experience - Google Maps and Googe Now

Simplicity Navigation is clear and allows users to perform simple actions related to search. Heirarchy is very surface level.

Flow These applications donâ&#x20AC;&#x2122;t really appeal to the commute for traffic which prevents them from using it to navigate through traffic.

Fair

Major Problems

User Control Users dont have many features to customize or personalize their experiences with the app as far as interactions with information. It is a great app for searching and finding new places.

Consistency The Google brand across both apps present consistency and knowing what users should expect. The learning curve is very minimal although icons present some time to familiarize.

Scannability Information is easy to get at first glance but not available on launch. The maps sometimes presents difficultly in readability.

Branding / Visual Design There is a global design brand that translate throughout all their apps. The Brand is recognizable and it presents clear use of color and optimization. 34

Minor Problems

Best Practice

USER RESEARCH + STRATEGIC PLANNING

RESEARCH OVERVIEW Research Methods The exercises I used: •

Observation - in their native driving environment

•

User Interviews - Capture their wants and needs

•

Surveys - getting a clear picture of the overall demographics

I decided to go back and spend a semester gathering research in my goal to discover new experiences for drivers. I jumped into various methods using observation, user interviews, and surveys. Most evidence were gathered through qualitatitive research methods; observing people around me, particularly co-workers and family members as they expressed their problems with driving through traffic and as a commuter. Once identified as a commuter with problems of driving through traffic, I followed up with an interview and asked them questions that would bring in key insights and recommendations for designing a solution.

The user research fed directly in my effort to create a high value experience for the Driver Plus mobile application. This helped validate my assumptions about a user’s typical commuting journey flow including: • Key Tasks within car driving • Key information needed for areas of my app • Day-to-day motivations • Statistics and information that would be most valuable for users

OBSERVATIONS + INTERVIEWS

Commuter Observations & User Interviews: The Numbers

Commuters

Partcipants

Observations: In - car experience and Commuters

3 Drivers 38

QUANTITATIVE RESEARCH - HAPPINESS SCALE BY COMMUTER TYPE From researching car drivers, the automotive commuting experience seems to be most unhappy compared to other forms of commuting. 2.0

1.5

1.0

0.5

0.0 Bicycle

Walk

Express Bus

Light rail

Carpool

Local Bus

Drive alone

( n = 261 )

( n = 26 )

( n = 19 )

( n = 100 )

( n = 79 )

( n = 137 )

( n = 176 )

Figure Above. Variation in commute well-being by mode Chart redesign by Tri Nguyen. Source: Bike commuters are happiest (and other PSU research tidbits) http://bikeportland.org/2013/01/30/bike-commuters-are-happiest-and-other-psu-research-tidbits-82448

PERSONAS AT A GLANCE

I’m tired of... • Long commutes that have traffic due to incidents, construction, and closed highways

PERSONA DRIVEN

CONTENT

UAL DESIGN VIS

ERACTION INT

ATEGY STR

• Being stuck in Traffic Jams with no way out

Who is QA

Barry Clarkson?

• Not knowing why there is traffic or ways to avoid it

Frustrated Commuter

I’m tired of... • Being late to work or class due to an unexpected occurance • Not being able to react in time or foresee an accident until it’s too late

The collective view of my users: Who is

• Commuters with multiple destinations per trip

Matt Edwards?

• Not being able to provide accurate estimates to people who need to know when I’ll arrive

Worried Professional

• Commuters who drive alone I’m tired of...

• Looking for a better driver information and data experience Using these persona cards, I was able to design according to the needs and pains of my target audience. Digging deep into who they are and their daily process during their commute, these three personas represent the user types of an everyday commuter. 40

• Not being able to spend enough time with my kids after work and before they go to bed • Being late to a company meeting due to traffic after taking my kids to their school

Who is QA

Isabella Doer? Intelligent Driver

“

I spend too much time in traffic. If only I knew when and why it happened.

”

Key Tasks • Construct a driving itinerary of several car trips in one day • Reference a past driving itinerary for navigating • Being able to see the current traffic pattern and avoiding major accidents on the highway • Find out what roads have construction and what time and day is it causing delays

Goals

The Bored Commuter Who is Barry Clarkson?

• • • •

Age: 51 Occupation: Business Analyst

Instantly know the traffic pattern for my routes Save driving routes for later use Tell me where the accident is in the same app Find out where the traffic is an why

ABOUT BARRY

Pains

Barry has been driving to work for decades. There are times when he drives to different and often multiple office locations in the same day. After his prolonged period of commuting daily, he has developed much frustration when he encounters traffic jams.

• Long commutes that have traffic due to incidents, construction, and closed highways • Being stuck in Traffic Jams with no way out • Not knowing why there is traffic or ways to avoid it

He sometimes plans his trips on the browser, but he often has to reenter his route ever time he gets in the car.

“

”

I tend to go home, work, or school for most of the week, typing gets repetitive.

Key Tasks • Save common destinations for future navigation • Access recent places and saved places for re routing • Create a new destination

Goals • Find me the fastest way to get home, work, or my common places • To know how long will it take for me to get there and why ( An Estimated Time of Arrival ) • To know how long it would take if there was no traffic ( A Predicted Travel Time )

The Worried Professional Who is Matt Edwards? Age: 23 Occupation: Young Professional

Pains

ABOUT MATT Matt drives to work everyday, commuting for about an hour per trip. When he reaches traffic, he doesn’t like to sit through it. Sometimes if he is in no hurry, he likes to pull over and wait it out.

• Being late to work or class due to an unexpected occurance • Not being able to react in time or foresee an accident until it’s too late • Not being able to provide accurate estimates to people who need to know when I’ll arrive

Matt always wants to check the traffic to the area he is going within the few minutes he has when he leaves his house in the morning and right before he drive away.

“

I want a faster and more intuitive way to plan my routes

”

Key Tasks • Figure out how to optimize for the best stress level and time. • Recieve statistics on the efficiency of their commute • Recieve commute tips on the optimal time to drive to a destination

Goals

The Intelligent Driver Who is Isabella Doer?

• To know when to commute or not to • Understanding trends in my driving: How much time am I saving from avoiding traffic? • Tell me the conditions of the road • What should I do when something happens • Ability to gauge how long a commute will take so I can call people and have long conversations

Age: 39 Occupation: Project Manager ABOUT ISABELLA Isabella is the type of driver to seek out information and figure out insights based on the best scenario.

Pains

Isabella finds herself driving home in traffic during certain days of the week. Most of the time, she checks Sig Alert for the traffic areas prior to driving home to see how bad the traffic is. Then she checks Google Maps for the time it takes to get home.

• Not being able to spend enough time with my kids after work and before they go to bed • Being late to a company meeting due to traffic after taking my kids to their school 43

Driver Plus Experience Map

• Long commutes that have traffic due to incidents, construction, and closed highways • Being stuck in Traffic Jams with no way out

How is QA

Barry Clarkson?

KEY IDEAS

• Not knowing why there is traffic or ways to avoid it

Frustrated Commuter

DOING

I’m tired of... • Being late to work or class due to an unexpected occurance • Not being able to react in time or foresee an accident until it’s too late

How is QA

Matt Edwards?

• Being late to a company meeting due to traffic after taking my kids to their school

How is QA

Isabella Doer? Intelligent Driver

OPPORTUNITIES

• Not being able to spend enough time with my kids after work and before they go to bed

THINKING

Worried Professional

People may leave early from work to avoid traffic.

People plan and check traffic all the time.

PLANNING THE ROUTE

PREPARING

Stress levels may increase the longer you are in traffic

People want to know why its slow!

COMMUTING / TRAVELING

People communicate their frustration in traffic.

People collaborate socially. (Twitter Tweets)

EXPRESSING

REFLECTION

PRE-DRIVING

ON THE ROAD

POST DRIVING

Plan Trip & organize itinerary to create a road map for the trip

In-Car Experience

Talking about their commute and the traffic and planning again.

BUMPER-TO-BUMPER

PLAN THE ROUTE Search Places Enter your address Check Traffic Check Distance and ETA Look on a Map Look for major accidents Get directions

PREPARING Get Dressed Get /Out of Bed Wash Up Awaken Eat Enter GPS locations Leaving work

“I’m looking to route to multiple locations because I have to go to different areas in one day.”

• Not being able to provide accurate estimates to people who need to know when I’ll arrive

I’m tired of...

People may drive to multiple destinations in one trip

STAGES

I’m tired of...

Surveying the Automotive Commuting Experience

“I forgot to check the traffic after getting into my car.

COMPUTERS & TV

MOBILE / TABLETS

User checks for all information related to their upcoming trips recieve help, updates, and notifications about travel.

Planning can also take place within other devices.

• What is the easiest way to get where I need to be? • Where do I want to go? • How long is my trip? • Do I need to set these locations everytime I want to go somewhere? • Where is that place I went to a month ago?

• Enable people to plan out their trip • Connect traffic reports with routing • Visualize traffic patterns for specific routes

• Improve the traffic search experience • Improve the routing experience • Communicate relevant traffic alerts at all times

Commute/Travel to Work Drive in Traffic Distract myself Worry about arriving late Listening to Music Listening to Podcasts Texting Friends Using Apps

“I’d like to know what kinds off accidents are on 880 and when it happened”

MOBILE All device interaction during commute are all done on the users mobile device/phone.

REFLECTION Talk to co-workers Talk to friends and family Share their feelings Follow up on Traffic Relax and Unwind Get ready for the next day

CAR ACCIDENT

CONSTRUCTION & HAZARDS

DRIVING STATES OF MIND Road Rage Aggressive Territorial driving Motoring unpleasantness COMMUNICATION + ACTIVITY

Call Text Apps

• Stressed that I’m stuck in this traffic and there is nothing I can do? • Frustrated that there is nothing I can do? • Will I make it in time? • What can I do right now?

“A bit annoyed to have experience that traffic when I just got home.” TRACK COMMUTE ROUTE Users track commute routes to make changing decisions. NEWS ALERTS Recieve alerts on road closures, weather emergencies, toll changes, etc.

• How can I fix my commute? • Where can I check for traffic?

TIPS

GEOLOCAL ALERTS

An aggregate list of tips to help navigate any environment.

Get info + advice given your situation or location

LIVE LOG A real time log of trends/events aggregated and personal driving. Live log carts as user-generate guide for your commute

To further guide my synthesis of the research information, I constructed an experience map to really hone in on the core experience and the overall journey. The map has allows me to highlight when opportunities and pain points that exist in the current driving space.

PROJECT GOALS Provide important traffic analytics and key information insights for car drivers/commuters in a mobile app. Features • Personalized destinations (Home, Work, Favorite Places) • Route Calculation with Traffic Conditions • Improved design for visualize traffic on a map Users need: • Personalization • Search • Prediction • Notification • Discovery

• Visualization • Speed / Mobility • Enjoyability • Relevance • Helpfulness

Overall, through data, observations, interviews in the Drivers/Commuters research revealed: • Lack of a personalized experience of GPS and location areas • Decisions on commute happen prior to driving, there is little drivers do when driving • Most Commuters drive alone • Looking for a better driver information and data experience • Always look for ways to deal with traffic (Faster routes, things to do, when or when not to drive) 46

LIST OF POSSIBLE USE CASES User Research has reveiled some very valuable information about the kinds of scenarios drivers have faced. I have collected a list of key use cases created by me and some collected from drivers.

Ranked in order of what I belived to be important, based on patterns I observed, I selected as key use cases I will pursue in this first phase of design. Some cases are reserved for the future.

List of Possible Use Cases Use Case

KEY USE CASES FOR DRIVER PLUS

See the traffic pattern of various times of the day (Possibly for future traffic too.)

1 Use Case

2 Use Case

3 Use Case

Construct a driving itinerary of several car trips in one day ( or several days ) that allows you to map out the driving route, optimize for best travel and stress level ( e.g, backroads = less stress; bumper-to-bumper traffic at peak commute hours = stressful ) Being able to see the Estimated Time of Arrival and Predicted Travel Time ( <--when you can gauge how long a commute will be so you can call people and have long conversations ) Recieve statistics on the efficiency of their commute. (Amount of Time Saved, Distance, Speed)

4 Use Case

5 Use Case

6 Use Case

7 Use Case

I am interested in driving to the East Bay, but I wanted to avoid accidents on the highway. What roads have construction going on and what time of day is it causing delays.

Recieve commute tips on the optimal time to drive to a destination ( Possibly similar to use case #11 )

Being able to see the current traffic pattern and avoiding major accidents on the highway

If there is an accident or delay on my regular route, what other route can I take?

LIST OF POSSIBLE USE CASES

List of Possible Use Cases Use Case

9 Use Case

10 Use Case

11 Use Case

KEY USE CASES FOR DRIVER PLUS

Save common destinations for future navigation

Access recent places and saved places for re routing and create a new destinations

Recieve “contextual” tips coming up based on your location and habits. Show me the weather of my current location, and a map with drive time & traffic indicators back to my home. Show me fun events nearby. ( Possibly

Connect to the sensors in your car --> MPG, eco efficiency (hybrid gas vs electric kick-in coasting, etc), plot out.

12 Use Case

13 Use Case

14 Use Case

Where can I stop and rest if I am feeling sleepy? Close to the road, easy on and off.

I could turn in my milage or cost of gas to my employer for reimbursement. It would be nice to have a place to enter that information and then email it to myself. (Only target audience for commuters that are business people) In two weeks, we need to drive to an airport 2 hours away from here, which is close to NY and in a very busy area, in order to go to Bulgaria. Given that, I will have my baby in the car, I will want to avoid heavy traffic, and longer than necessary driving times as I don’t want him to start cying in the car because he is hungry or wet. I need to plan my trip and figure out which time of the day ( between 11am and 2pm ) is best so I can get to the airport as fast and safe as possible.

DESIGN WALKTHROUGH

INFORMATION ARCHITECTURE

Legend

Splash Screen

Phase 1 of Mobile App Launch Screen

1.1 Tutorial Overview

1.0 Future Expansion Areas

1.2

1.3 Sign Up

1.3.1

1.1.1 Tutorial Steps

2.0

Global Navigation

Supporting Dashview

Dashboard

2.1

2.2

2.3

My Routes

Explore

Stats

2.1.1 My Destinations

2.2.1 #HashTag Traffic Tweets

2.3.1 Past Trips Comparison

2.4 Tips

2.1.1.1 Saved Routes

2.5 Profile

2.5.1 Settings

2.0.1 My Destinations

2.0.2 Recent Routes

2.0.2.1 Past Routes List

2.0.2.1.1 Route Detail

2.1.1.1.1 Create a Route 2.1.1.1.1.1 Route Search

TASK 1 - Route to Work / Check Traffic for Major Accidents Find out what your commute will be like driving to work. You are looking for accidents that may affect your commute on the highway and to see which incidents are causing delays & at what time they occured.

Start App

GPS On?

Dashboard

Turn on Location Services in Privacy Settings

Work Location

Compare Routes

Route 1

Route 2

Navigate

Start

TASK 1 WALKTHROUGH - Route to Work / Check Traffic for Major Accidents

1. User logins in.

2. Shows Personal Dashboard of common places

3. Tapping on Work shows traffic and map for only work route

TASK 1 WALKTHROUGH (CONTINUED) - Route to Work / Check Traffic for Major Accidents

4. Swiping up shows timeline of accidents for work

5. Swiping left will show alternative routes

6. Can choose to drive this route resulting in switching to default GPS (Google Maps, Apple Maps, TeleNav)

TASK 2 - Find a recent destination Find out a coffee shop you went to in Berkeley two weeks ago. You know you went there 2 weeks ago, but you are unsure of the name.

Start App

Dashboard

List of Past Destinations

Recent Destinations

Alternative Flow

Recent Destinations

My Routes

Route Detail

List of Past Destinations

Navigate

Route Detail

TASK 2 WALKTHROUGH - Find a recent destination

1. Recent Places is located on tab on Personal Dashboard

2. Can search or swipe through places through the timeline.

TASK 2 WALKTHROUGH - Find a recent destination

3. Using Time oriented dividers to find the past time.

4. Detail page shows time it would take to route to Peets Coffee.

TASK 3 - Create an itinerary of 3 destinations Create a intinerary of 3 destinations, check the traffic for the first route, then save this 3 destination route for later.

Start App

GPS On?

Dashboard

Add New Location

Turn on Location Services in Privacy Settings

Create a Route

Add Destination(s)

3 Destination Route Detail

Start

Choose Route

Route 1

Route 2

Save

TASK 3 WALKTHROUGH - Create an itinerary of 3 destinations

1. Clicks on marker icon to route

2. Enters three destination route. Can drag and drop to rearrange.

3. Tap on grey star to save route

TASK 3 WALKTHROUGH - Create an itinerary of 3 destinations

4. Shows route detail, map, and timeline of indicdents.

5. Route Options allows for rerouting or 2 destination route (A-to-B, B -o-C)

TASK 3 WALKTHROUGH - Create an itinerary of 3 destinations

6. Saved routes shows up in “My Routes” page for future access.

TASK 4 - Create a destination for your dashboard Create a common destination and save it on your dashboard.

Start App

GPS On?

Turn on Location Services in Privacy Settings

Dashboard

Alternative Flow 1

Add a destination

My Routes

Name your Destination

Add a destination

Save

Name your Destination

Start

Alternative Flow 2

Create a Route

Route Detail

Save

Name your Destination

Save

TASK 4 WALKTHROUGH - Create a destination for your dashboard

1. Add a destination from Personal Dashvoard

2. Enters name of the place selects Location section

3. New page allows for location search

TASK 4 WALKTHROUGH - Create a destination for your dashboard

4. Tapping on Add button on the top right adds the place

5. New place called AAU shows up on Dashboard

6. My Places also reflects on My Routes pag, similar to the dashboard

TASK 5 - Check your stats Check your app to see how much timeyou have saved in your commute ( from yesterday, last week, last month. )

Start App

Select Month

Stats

Alternative Flow 1

Select Week

Alternative Flow 2

Select Day

View Details

TASK 5 WALKTHROUGH - Check your stats

1. Add a destination from Personal Dashvoard

2. Enters name of the place selects Location section

3. Stats shows a summary of total time driven, distance traveleed, and time saved per day.

TASK 5 WALKTHROUGH - Check your stats

4. Top Toggle button allows for switching from Day, Week, Month.

5. Graphs show # of Trips and the Time Saved Day, Week, and Month

VISUAL DESIGN An overview of the visual design scheme for Driver Plus application. Each section is intended to be used as a guide for future visual design and development.

Moodboards Exploration DriverPlus exploration into its visual design framework started with researching on different styles using Moodboards that describe the visual mood and feeling. These are three final moodboards that were selected amongsts dozens. The third moodboard to the right describes the type of visual style Driver Plus would eventually become, an interface that was fresh, unique, sophisticated, crisp, and balanced.

Color Palette DriverPlus uses a simple palette for the initial screen strcture leaving room for highlight colors that place emphasis and are also used for information visualizations. The goal of this color palette selection is to place strong emphasis of content on the screen and maps.

Text / base colors Black #000000

Dark Grey

Highlight colors Red Orange #E36A44

Golden Yellow

#474646

#E9BA38

Grey

Green

#B1B1B1

#9BCA3C

Light Grey

Teal

#B1B1B1

#13AFC0

White

Navy Grey

#FFFFFF

#768E96

Screen Architecture From study of Appleâ&#x20AC;&#x2122;s Human Interface Guidelines, DriverPlus follows these standards and specifications to optimise users experience on the iOS platform. DEVICE STATUS BAR: 20px TITLE BAR: 44px

Screen Resolution by Device Type iPhone (480x320) iPhone 4/4S Retina (960x640) iPhone 5 (1136x640)

iPhone 5 1136 px

480 px

CONTENT AREA: 416 px

320 px

Grids and Spacing 4-COLUMN GRID - DriverPlus uses a 4 column grid with 16px gutters

16 px

60 px

16 px

60 px

16 px

60 px

16 px

60 px

16 px

Grid and Spacing BASELINE GRID BASELINE GRID: 8px

Typography Three fonts were selected to represent titles and body. Proxima Nova will be used with different font weights, Light, Regular, and Bold. Molot is bold, rigid, and is used as the logo type for DriverPlus. Arial Rounded Bold was selected later upon UX testing for numbers.

Proxima Nova Family - Light

MOLOT Family - Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abdefghijklmnopqrstuvwxyz 1234567890!&?()=+”,

ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!&?()=+”, Arial Rounded Bold

Proxima Nova Family - Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!&?()=+”,

ABCDEFGHIJKLMNOPQRSTUVWXYZ abdefghijklmnopqrstuvwxyz 1234567890!&?()=+”,

Examples

26.2

Proxima Nova Family - Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abdefghijklmnopqrstuvwxyz 1234567890!&?()=+”,

1234567890

EXPLORE 72

Logo on Light Background Two fonts were selected to represent titles and body. Proxima Nova will be used with different font weights, Light, Regular, and Bold. Molot is bold, rigid, and is used as the logo type for DriverPlus.

Teal #13AFC0

Green #9BCA3C

Golden Yellow #E9BA38

Red Orange #E36A44

Black #000000

driverPLUS

Logo on Dark Background Two fonts were selected to represent titles and body. Proxima Nova will be used with different font weights, Light, Regular, and Bold. Molot is bold, rigid, and is used as the logo type for DriverPlus.

Teal #13AFC0

Green #9BCA3C

Golden Yellow #E9BA38

Red Orange #E36A44

Light Grey #DEDFE0

driverPLUS

iOS App Icon The iOS icon was created to have a unique style that emphasisies the logo. Using a white background to balance the Driver Plus color pallete, this icon was create to be the first look into the application.

USER TESTING

USER TESTING OVERVIEW

For Spring 2013, I was able to test 5 Particpants at the UX Lab and several others using my computer and silverback. Some photos are not released since my participants selected not to.

Location: Participants Home Number of Test Participants: 2 Time: 9pm PST Date: Monday Feb 25, 2012 / Thursday Feb 28, 2012

Location: UX Lab Number of Test Participants: 5 Time Period: Spring 2013 Various methods were used including using Silverback to test the several prototypes, wireframe and hi-fi mockups using Invision and FieldTest app. The final test was conducted using the mobile phone.

NEW TASKS FOR ROUTING FEATURES TASK 1

TASK 4

You are a working professional and you find yourself frequently commuting during high traffic hours, however, you would like to find ways around this. You have downloaded an application from the app store called Driver Plus to help you with your daily commute to work.

Tomorrow, you need to be at the Milpitas library when you get off from class (180 New Montgomery St, San Francisco, CA) . Then later in the evening, you need to drive to (515 Amberstone Lane, San Ramon, CA). Construct a driving itinerary of for these car trips that allows you to map out the driving route for best traveling time.

As a new user, sign up for an account and go through the set up process.

TASK 5 TASK 2 With the route you have saved from yesterday. Now you like to use it.

You've just woke up from your apt (19 Harold Ave, San Francisco, CA) and are getting ready to go to work. It's about 8am and want to see how long it's going to take to get to work.

Launch the Driver Plus app and see how long it will take for you get to your first and second location from your current position.

Since you havenâ&#x20AC;&#x2122;t set up your work route yet, set up your work location see if you can map this out. Then find the optimal way to get to work. What is the Estimated Time of Arrival and Predicted Travel Time?

TASK 6 In two weeks, you need to drive to the airport before 2pm. You want to avoid heavy traffic, and longer than necessary driving times.

TASK 3 Plan my trip and figure out which time of the day (between 11 am and 2pm) is best so you can get to the airport as fast and safe as possible.

Itâ&#x20AC;&#x2122;s about 5pm and you are about to be done with work. You are looking to drive home and would like to find out what the traffic is like driving through the East Bay. Find out what your commute will be like. You want to avoid accidents on the highway, see the roads that have construction, and see what caused the delays and at what time it occurred. 78

ROUNDS OF TESTING - FROM INVISION TO FIELD TEST

Using several prototyping apps, I was able to gather key insights. Using Invision provided a simple click through to validate wireframes. As I narrowed down my scope, and my design became more clear, I moved on to high fidelity mockups with FieldTest which provide animations/ transitions native to the phone. Lastly, I was able to test with FieldTest on the iPhone device allowing more a more natural interaction during usability testing.

ROUND 1 POST-TESTING ISSUES

Location: Participants Home Number of Test Participants: 2 Time: 9pm PST Date: Monday Feb 25, 2012 / Thursday Feb 28, 2012

High priority Medium priority Low priority

Usability Issues User could not find most recent trips within the user's profile. Recent+ and Recent Trips has similar names which causes confusion. Issues occured at the homepage where the user thought recent trips was recent+ button ( which was considered recent places.) Recent Trips was not as important to the user as well. Overall, the term recent being used twice was very confusing for the user. The user was not so interested in the badge area. It was difficult comparing between two users but there is not much content to actually drive from anything important. Will be removing the badge and gamificaiton features in the app and only focus on Multiple Destination Routing, Map Visualizations, Tips, and Stats.

There was no problem going to stats and finding week, but the details of the visualization needed to be clearer and what the results generate. Will need to see what I will be visualizing in the stats section. This area will be more clearer once I define a great experience on Routing and the type of information that will display.

The participant found it easy to check driving tips, although they wanted to see more interesting tips. Like suggestion places along the route. Tips seem to be a less relevant area and will need to clarify and redesign how these areas will function.

An observation also revealed that the wireframe may need to be more detailed in any map area .that requires visualization of routes. Color coding traffic on maps and traffic should be in real time was a main suggestion.

When setting up the participants profile as a new user, for the work location setup, he had difficulty during the set up work location screen. The UI was not clear as to what location it was. The "Enter a new location" text box in the second destination setup, the user did not realize this was a work location.

User ask how friends are added in the beginning set up task. Must add UI on how to add friends upon setup, or if friends should exist in the app at all.

Users asked how to save a route. Could add a save button, but I need to work on other areas of a routing app.

User asked how to see traffic on a map like pins, could add map UI, but will need to work on a serious of use cases for routing first.

Usability Issues Original Dashboard 1

The dashboard shown below needed more clarity for drive locations text. DRIVER PLUS

Settings button not useful on the homepage, could be replaced with something has more functionality. ‘3+ Recent’ was not clear to the users. Possible seperation from drive locations. These are related issues.

Solution Move Recent Places to its own tab with clear seperation between my destinations.

DRIVER PLUS

Maps

DRIVE LOCATIONS 30 min HOME

DRIVE LOCATIONS

WORK

RECENT

TODAY

30 min

1 hr

HOME

WORK

RECENT

Commuting Details

20 min

Traffic going home

Maps

37 min FAVORITE 4

Tips

55 min

Traffic going home FAVORITE 1 FAVORITE 2

43 min FAVORITE 3

Maps +

Usability Issues New Dashboard - Users wanted to know more about Context 1

Changed ‘Drive Locations’ to ‘My Destinations’ and splitting ‘Recent’ to its own tab.

Added a bar style gauge to indicate/visualize accident conditions for each destination route

On tap of a route (i.e home), map changes showing route details and updated timeline.

DRIVER PLUS

DRIVER PLUS 3

Maps

My Destinations

Recent

mph

My Destinations

Maps Recent

30 min

1 hr

46 min

30 min

1 hr

46 min

HOME

WORK

AAU

HOME

WORK

AAU

TODAY 5:12 PM

Accident on Work Route

Accident. Right lane blocked - US-101 South at Cesar Chavez St/Potrero Ave 25 MPH

1:41 PM

Construction on AAU Route

5:12 PM

Accident on Work Route

Accident. Right lane blocked - US-101 South at Cesar Chavez St/Potrero Ave

1 1

TODAY

25 MPH

1:41 PM

Construction on AAU Route

1 1

Usability Issues

Original

Iteration

DRIVER PLUS

Possible Solution?

mph

After changing the settings icon 10to a ‘+’ on one user testing, one user knew they were able to add/create something although they were unclear to what until entering into it. This may need to explore other solutions, My Destinations Recent although this may be fine to leave the same. Would get use to this 30the minusers eventually 1 hr HOME WORK add icon over time. mph

Maps DRIVE LOCATIONS 30 min HOME

WORK

RECENT

Maps

TODAY Traffic going home

Maps

Traffic

Accident

Construction

Usability Issues

Solution

Problems 1. Typography was hard to read 2. Incidents on the map were hard to see 3. Users wanted to see alternative routes 4. Too much interface in Route destination 5. Timeline was not clear due to timestamps 5:30pm

1. Changed Typograhy to simpler font: Arial Rounded 2. Make icons larger and interactive upon click 3. Allow toggle between route A, B, C with swipe 4. Allow work route to be shown only and back button to return to main dash 5. Change timestamp to minutes ago from occurance than time stamp

User Testing

User Testing was a main part of the design process allowing me to quickly iterate on designs gaining insightful information on how a commuter used the application. This was a valuable component of design in order to weed out extra features not useful to my users. I really learned most from my user testing experience with my project. Using post test questionaires and conducted interviews with my testers after, provided additional user research that filtered into my knowledge of the target audience and their major painpoints, typical use case scenarios and their wants and needs.

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.

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.

EARLY WIREFRAMES CONCEPTS

Homepage / Dashboard

DRIVER PLUS

Explore

Profile

DRIVER PLUS

EXPLORE

DRIVER PLUS

Chris Savella

Tri Nguyen

Maps

Traffic going Work 32 Trips

1 hr

WORK

RECENT

12 Badges

Following Chris Savella 15 min ago

Recent Trips

30 min

1 hr

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

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

YEAR

82 Use Current Location

MONTH

My Home

Canyon Oaks 1 Amberstone San Ramon, CA

Maps

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

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

GET ROUTE

Current Locaition

Enter a end destination Add another destination

Home

Routes

CREATE A ROUTE

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

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 “+”

3. Drag and Drop feature for changing order of destinations

Drive

KEY INTERACTION AREAS

Saved Route 1

Option 1 : Corner Star

18 miles

28 min - Light Traffic - 5:48 pm

Option 2 : Right side

18 miles

28 min - Light Traffic - 5:48 pm

Option 3: Button option below map Route Saved

Save this Route Traffic

Directions

Traffic

Route Options

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

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

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

Changes Map and Detail information on Swipe

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

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

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

Recent Places Dashboard contains recent places, unlike My Places, â&#x20AC;&#x2DC;Recentâ&#x20AC;&#x2122; 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.

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

ROUTE DETAIL PAGE Notes: 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.

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

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.

MY ROUTE PAGE Notes:

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.

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.

STATS PAGE Notes: 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.

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.

Time Saved by Month

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â&#x20AC;&#x2122;ve learned from designing an iOS app using the Apple Human Interface Guidelines, I plan to take what Iâ&#x20AC;&#x2122;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.

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.

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.

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

102

CONCLUSION

REFLECTION + CONCLUSION I think moving forward, I would like to continue to work on this project because it has much areas to explore in both user research, visual design, and development. I think Iâ&#x20AC;&#x2122;ve only scratched the surface of the needs of my users. Secondly, I would like to practice my development skills and use this project as a way to learn more about code. The struggle I faced designing this thesis project has pushed me to learn more about user experience and visual design than I thought possible. Academy of Art University has taught me to explore the unknown, teach myself new techniques, and learn problem solving skills that has given me the foundation for all my future endevours. Thank you!

104

THANK YOU + RESOURCES Special thanks to these individuals have inspired me in the areas of their expertise. I have learned much design foundation from my teachers and I would not be where I am without their guidance.

BOOKS Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition)

Kathleen Watson Ryan Mederios Matthew David David Kanter Dayvid Jones

Moderating Usability Tests: Principles and Practices for Interacting (Interactive Technologies)

Family and Friends:

About Face 3: The Essentials of Interaction Design

Aileen Reyes Kevin Johnson Paddu Raghavan Tin Phatanapirom Kelly Shallow Jenny Chang & My Family

DIGITAL REFERENCES Ratchet Framework iOS Prototyping http://maker.github.io/ratchet/

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Google Maps API https://developers.google.com/maps/ Mobile TutsP http://mobile.tutsplus.com/ jQuery Mobile http://jquerymobile.com/ jQuery UI http://jqueryui.com/ Charts JS http://www.chartjs.org/ PhoneGap http://phonegap.com/

THIS PAGE IS INTENTIONALLY LEFT BLANK