1. MyDash Landing Page

No need to login to get to Route Planner. a link will be available under sendtocar from the landing screen and probably from the home page too.

2. RoutePlanner Landing Page

The user does not need to be logged in to arrive on this screen, so top navigation can also looks like send2car when the user is not logged in. (see registration flow)

The more common user behavior will probably be to enter 2 addresses and get directions now. So, the WHEN options will be set on today and the time it is at the moment the page is downloaded.

The FROM and TO field will display some guidance text. No cursor will be focus on those when user arrives on this page, so he can see the guidance. The user will have to click or tab key to have his cursor entering the field in order to type.

The user can click on the 2 arrows to reverse directions. Each time the user click the content of the FROM field will be sent to the TO and viseversa.

Introduction text is subject to change and future saved content might appear instead to allow the user to retrieve previously saved directions in a near future.

New Icons for zoom in / zoon out to be consistent with device will be place on the map instead of the 2 squares.

The default map display when user arrive on that screen should the same way than on saved search. ( brand new user sees SUnnyvale and all the other times, he sees the last map that were loaded. )

3. FROM / TO / WHEN fields - user enters addresses - system/browser remember

When the user starts typing an address the browser will show him the more recent addresses he entered.

The user can select from that list and hit tab to go to the next field >> TO

the TO field will work the same way and show a drop down containing the more recent addresses entered.

As soon as the user will hit the reverse button, the 2 fields will display the reverse populate content. if the user did already get directions and click on reverse, he will have to click on Get directions to refresh the screen. If the user click several times on the reverse button the fields will continue swap addresses up and down.

4. FROM / TO / WHEN - Errors

If the user enters a wrong address into field FROM, an error message will appear above the content_bottom div like on the keyword pages, and the corresponding fields will be highlighted with a light red like in the send2car flow. Message to display : "Sorry, the starting address you entered is not correct. Check it and try again."

If the user enters a wrong address into field TO, an error message will appear above the content_bottom div like on the keyword pages, and the corresponding fields will be highlighted with a light red like in the send2car flow. Message to display : "Sorry, the ending address you entered is not correct. Check it and try again."

If the user omit to enter address and select time options like "TODAY" + "leaving at" "2:00pm" and hit "Get Directions" an error message will appear above the content_bottom div like on the keyword pages and the corresponding fields will be highlighted with a light red like in the send2car flow.
Message to display : "Please, enter a starting and ending address and click "Get Directions".

If the user enter a wrong time like 17:92 AM and hit "Get Directions" an error message will
appear above the content_bottom div like on the keyword pages and the
corresponding fields will be highlighted with a light red like in the
send2car flow. Message to display : "Please, verify the time you enter and click "Get Directions"."

5. First Route appears

The user can either hit ENTER on his keyboard or click on "Get Directions".

As soon as user hit "Get Directions", the routes will be generated using the same algorithm used on the device.

We can have up to 3 routes generated. SO we can have up to 3 tabs showing up on the screen.

The same animation will be used if the system is slow at calculation routes. the tabs won't be clickable but if the user try he will get a mouse over message (see screen below)

The selected route will be display with traffic as it is on the device.

The outline will be colored so the user can still see which route is showing traffic.

To allow the user to quickly choose between the routes, the time to destination and the mileage will be display on the tabs.

As soon as a new route is found by the system, the next tab will be refreshed with time to destination and mileage.

A check box will appear on each tab to allow the user to hide the route displayed on the map. (note: when there is only one route, the check box will disappear. Note 2: When the user will print, only the select route will be display on the map of the printable version screen.)

On the map bar a print button will show up as soon as one route is available.

on the map bar the starting time and ending time of the trip will show up.

on the map bar a check box will show up to allow the user to remove the traffic layer of the map display.

The maximum zoom level will be used as long as the Point A and B are in the map.

The legend will be display by default when traffic is display, it will disappear when traffic is turned off.

6. User clicks on thinking tab

If the user try to click on a tab that is thinking (animation playing) a mouse over message will appear to inform him that the system is calculating an alternative route.

7. User uncheck traffic

This screen show the map with a route but no traffic display. no traffic color on the tab and no legend, the user can turn it on by checking the upper right box on the map bar.

8. Alternate routes appear

This screen show the 3 routes with traffic display on the first one.
on the map the routes will show up using the relevant color code the tab is using. so the user can see the relation between them. (The same color code used on the device.)
The pointer will indicate the starting point and the ending point ( directions the user will drive too ) using A and B.
The user will be able to send to car the starting address and ending addresses thanks to the send2car icon (with mouse over to be sure user understand the purpose of the feature.)
The direction's icons used on the device will be used in front of each line of text in the driving directions.
For quick reading the main route name will be bolder.
For each piece of segment mileage will be display.
The traffic will be shown on the map and along the driving directions to allow the user to quickly identify the segment's piece impacted by traffic even if he disable traffic layer on the map.
Check out screen below where the user picked a specific date in time for the way I will display the date.

9. User selects alternate route

When the user will click on tab 2, the traffic will be display on the route 2. same for tab 3 as shown here.
The driving direction will be refreshed as well as the departure time and arrival time on the map bar.
It is not possible to have no routes display on the map, so we need to prevent the user to uncheck the last check box.

10. User uncheck alternates routes except one.

Here we can see that the user unchecked routes 1 and 2 and it disappear from the map.

11. User uncheck traffic

The user just removed all traffic display on the map, thought can still see where he will have traffic in the driving directions.

12. User mouse over a route on the map

The user will be able to mouse over the route display on the left side on the map and see the related driving directions highlighted.
This interaction won't work if user mouse over other routes.

13. User mouse over the driving directions

The user will be able to mouse over the driving directions on the left side of the screen and see the related portion of the route on the map highlighted.

14. User clicks on a pointer and then mouse over an alternate route

The text balloon appears when user is clicking on a pointer.

If the pointer is very close from the border of the map zone, the map will move to allow the balloon to show up properly.

The address will be display as well as a send2car icon and a close button.

If more than one route is display on the map, the "Select Route" tool will be display. Very often the 3 routes will use some similar portions, this tool will allow the user to bring to front an alternate route and give a full display in the relevant color.

If traffic is ON, the selected route will be display with traffic color in the middle and a border using the relevant tab color.

If traffic is OFF, the selected route will be display with the tab color and an orange border. (see other screens below).

When the user mouse over the little rectangles, an orange border will be display to show the user the interactivity.

The left portion of the screen will be refresh to display relevant driving directions.

15. User clicks on an alternate route in the text balloon

This screen show the third route display on the map over the 2 other as well as the related driving directions on the left portion.

16. User mouse over an alternate route when not traffic is display

When traffic is not display, the select route tools will only display the tab color with the orange border for the selected one.

17. User clicks on a pointer with only one route display on the map

When only one route is display on the map, no select route tools will appear in the text balloon.

18. User clicks on the print button

When the user hit print, a separate window opened up to display a printable version of the directions.

Only the information of the selected route will be display on that page.

The space is optimized to allow both the driving directions (if not too long) and the maps to be display in a US letter format.

The text size has been increase from 1 pixel as it is more difficult to read in car while driving.

The layout should be consistent with previous page.

The user should retrieve the same relevant information for the route he selected. ( both complete addresses, driving directions, distance and time for the trip, departure and arriving time as well as the sentence that notify him on time to leave.)

The dash logo should be on that page.

The starting and ending addresses

A print button should be display

A note text area should allow the user to enter some notes before printing.

19. WHEN - Drop down list content

The user will be able to select leaving or arriving to get information on time impacted by the traffic.

Because the more common user won't know the date of the day and because he will probably plan forward to his trip the day the trip occurs, it is more user friendly & convenient to give him/her the ability to pick between TODAY, TOMORROW, and then the 5 other days of the week depending on which day the user use the application.

The current time will be selected by default, if we are Monday, the drop down list will be selected on TODAY (Monday) and if it is 3pm, the drop will have 3pm selected. ( the time of the download of the page)

20. 3 routes display at a given time in the future

ON this screen you can see that the user selected an arrival time. In that specific case a message will appear above the driving directions on the left column to notify the user on the time he should leave to get to destination by the time he specified.

21. user clicks on the Send2Car icon

Here the user clicked on the send2car button and get the same form used in Send2Car flow.

He can enter a specific name and choose a device to send the address to the car.

if the user is not logged in, he will be prompt to enter a username, if he has more than one device, a drop down will appear to allow him to select the device he wants. (all those behavior must be the same than send2car.)

22. confirmation message for the first Send2Car

this screen show the same confirmation message and 2 buttons, one to close and one to send the destination address.

if the user started by the destination address, the button will mentioned the departure address.

this screen is the same step than above.

23. Send2Car for the second address

This screen shows the form with the destination address populated.

The user can enter a specific name.

The device information should be kept from step one to avoid the user to have to re-enter it. I guess the more common user will send both addresses to the same device. so if the user selected a specific device or enter a specific value in the field, it should be pre-populated and ready to send.)

24. confirmation message for the second address

confirmation screen and close button.