VELOS - Dispatch Mapping Challenge Series - Part 6

Welcome to the VELOS Dispatch Mapping Challenge Series  - Part 6

In this challenge, we are looking for your production of several small dashboard data widgets, based on  the Velos style guide. VELOS is a global leader of shipping services. This application will be used to optimize routes for trucks, help truck drivers with their task management, help dispatch personnel track their trucks’ location and status.

We’re looking forward to your submissions!

Round 1

Submit your initial designs for Checkpoint Feedback

1) Map #1 - Real-time Garbage Collections Service
2) Map #2 - Real-time Garbage Collections Service - Zoomed Out / Clusters
3) Map #3 - Real-time Maintenance Service
4) Map #4 - Maintenance Hot Tickets

Feel free to add any other additional screens which are necessary to explain your concept. 
Notes.jpg: Please note any comments about your design for the Client. 
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.

1) Map #1 - Real-time Garbage Collections Service
2) Map #2 - Real-time Garbage Collections Service - Zoomed Out / Clusters
3) Map #3 - Real-time Maintenance Service
4) Map #4 - Maintenance Hot Tickets
5) Map #5 - Maintenance Hot Tickets > Assignment Solution

Feel free to add any other additional screens which are necessary to explain your concept. 
Notes.jpg: Please note any comments about your design for the Client. 
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

This is challenge #6 in a larger series of design challenges, which will be used to design new application interfaces, over the next several weeks. VELOS is a global leader of shipping services.

There are FIVE (5) required screens for this challenge- However, uou may choose to submit additional screens to illustrate your solution on the last screen.

Design Considerations:
We would like you to consider the following while creating your design.

Submission Size:
Your map submissions should be exactly 1331px wide by 672px tall (at 72dpi)., like the example maps which we have provided. Please leave no padding NOR include any stroke around the outside edge - These maps will be dropped into existing screens which already have a container element for the map.

Side Panel Size:
Where a side panel data overlay is indicated for hot ticket assignment, it should be left justified on the map and exactly 445px wide by 672px tall (at 72dpi), which will leave 886px X 672 pixels for your visible map area, behind the panel. See “Side Panel Data Overlay.png”

Map Element Colors:
Your map backgrounds have already been provided and these are the other colors / usage on the maps:

1. #67ba2f / Green - Use for:
- a completed collection tip or maintenance work order  (this would only appear along the green portion of a route line, as the driver has already been there / attempted the action and succeeded)
- a completed work order cluster indicator (w/ work order count)
- a completed portion of the route line

2. #ff0000 / Red - Use for:
- an attempted but failed collection tip or maintenance work order (would only appear along the green portion of a route, as the driver has already been there / attempted the action and failed)
- a hot ticket location indicator (numbered)

3. #666666 / Gray - Use for:
- a planned but not yet attempted collection tip or maintenance work order (would only appear along the gray portion of the route, as the driver has NOT yet been there / nor attempted the action)
- a not yet attempted work order cluster indicator (w/ work order count)
- a not yet completed portion of the route

4. #3b62a1 / Blue - Use for:
- a truck location indicator (w/ truck icon)
- Veos Yard & Landfill Poly Markers

TYPOGRAPHY:
- Use Arial or Helvetica fonts for all text.
- Keep typography simple and clean. Use bold and italic text sparingly please -  Instead, use font size or all caps to call out hierarchy. Leave good white space between and around text.

Required Screens:
We need below screens to be designed for this challenge

1) Map #1 - Real-time Garbage Collections Service:
- Use Map #1 - Real-time Collections.jpg as the background / map for this screen.
- See map1-rough pin plotting example without route shown.png for an example of how the pins might show up on a collection route (one pin per household on the route). This is only provided to give you a more accurate idea of how tips are distributed along a collection route. Note that we do NOT show the route line (for you to design) and you are free to redesign the truck icon (example only) as well as move the pins around / change them.

- This map should show a garbage collection route and the progress of the truck along that route.  Completed portions of the route should be velos green, while the incomplete/ upcoming portion of the route should be gray.  The route will start and end at a single location (Velos Yard) ie the driver will leave the yard, drive the route and return to the yard. This should be reflected in your map.

Note: all maps will have the “+” and “-” zoom indicators you see in the example maps.

- Collection routes are generally compact within a neighborhood, so this is a more zoomed in  version on a map, which allows you to show the truck progressing up and down sides of the same street across multiple streets.  See the provided “Map1.png” for the zoom on this map.

- Map should show “tips” and “non-tips” for each house on the route.  A tip is a successful dump of a garbage bin into the truck - these should be shown as a green circle with a white stroke; a “non-tip” is a planned dump that did not happen (for example: homeowner did not leave garbage bin out for the driver to tip) and it should be shown as a red circle with a white stroke.  Tips which are planned but not yet completed (along the gray portion of the route) should be shown as gray with a white stroke.  You must also show the current location of the truck along the route (this should be at the exact spot where a route changes from a green line to a gray line).

2. Map #2 - Real-time Garbage Collections Service - Zoomed Out / Clusters:
This map should show that the user has “zoomed out” to view a much larger area (use map background “Map #3 - Maintenance Hot Tickets.png” for this zoom factor).

- Rather than individual collection tips, this map will use a “cluster” concept. A marker cluster is a way to group dense pins together and show a count.  Here’s an example: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/.  Zoom in and out of the example to see how it works.

- Show six clusters within an area (ie 6 closely knit household neighborhoods where we are servicing garbage) and for each one show a cluster which has a total count on it, in the hundreds - So for example, one cluster icon with a “268” tips count, one with a “182” count, one with a “322” count, etc for six of these.

Lastly, this map should show 3 notable polygon indicators on the map (outside of the cluster area,  see “landfill in the map #3, below for more details) for:
- a “Landfill” area poly
- the “Velos Yard”  indicator poly (start / stop point for all routes) which would be the same style as landfill, but different shape / location
- a “DO NOT ENTER” area indicator poly, which would be the same style as landfill, but different shape / location and use red (#ff0000) rather than blue for this one!

3. Map #3 - Real-time Maintenance Service:
- Use Map #2 - Real-time Maintenance.jpg as the background / map for this screen.
- See map2-rough pin plotting example without route shown.png for an example of how the pins might show up on a maintenance route (one pin per household on the route).  This is only provided to give you a more accurate idea of how tips are distributed along a maintenance route. Note that we do NOT show the route line (for you to design) and you are free to redesign the truck icon (example only) as well as move the pins around / change them.

- This map should show a maintenance route and progress of a truck along that route.  Completed portions of the route should be velos green, while the incomplete/ upcoming portion of the route should be gray.  The route will start and end at a single location (Velos Yard) ie the driver will leave the yard, drive the route and return to the yard. This should be reflected in your map.

Note: all maps will have the “+” and “-” zoom indicators you see in the example maps.

- Maintenance routes are different from collection routes in that stops are more spread out.  ie Where a garbage collection is generally stopping at every house on the street within his route, a maintenance driver is only going to houses in the area that have a problem and need some work done. A maintenance driver typically makes around 50 stops in a day, over a much larger area than a collection route covers.  See the provided “Map2.png” for the zoom on this map.

- This map should show “completed work orders” and “incomplete work orders” for each house on the route.  A successful work order completed at a household should be shown as a green circle with a white stroke; an incomplete work order is a planned service that did not happen (for example: homeowner did not leave garbage bin out out for the driver to repair) and it should be shown as a red circle with a white stroke.  Work orders which are planned but not yet completed (along the gray portion of the route) should be shown as gray with a white stroke.  You must also show the current location of each truck along their respective routes (this should be at the exact spot where a route changes from a green line to a gray line).

- Lastly, this map should show a “Landfill” area somewhere, which would be in a non-populated area / away from parks & houses (left side of map looks good for this). It will be irregularly shaped (like a polygon tool or one of the parks on the maps) and indicated by an area outline in #69b3e7 with a 50% opacity color overlay in the same color. See “map2-rough pin plotting example without route shown.png” for a rough example of this element.

4. Map #4 - Maintenance Hot Tickets:
- Use Map #3 - Maintenance Hot Tickets.jpg as your background / map for this screen.
- See hot ticket.png for the exact style to use for hot tickets (where the “1” in the center will correspond to a hot ticket number, show size pins numbered 1-6).

- A “Hot Ticket” is a work order that needs immediate attention, but which comes in after the trucks have left the yard and started their routes - so it is NOT showing up as a stop on their route in the map view. The user will compare the location of the hot ticket work order to the routes in progress and make a decision around which route to add the hot ticket to, and where to add it in that route’s planned stops.

- This map view should be similar in concept to map #3, only here we are showing multiple vehicle routes, rather than a single vehicle route. Please show three (3) separate vehicles on three (3) separate routes. All three routes will start and end at a single location (Velos Yard) ie the drivers will leave the yard, drive the routes and return to the yard. This should be reflected in your map. Also note that the four routes will NOT intersect / overlap. Think of this as a bike wheel, where the yard (start / stop point) is in the center and there are four drivers heading out in four different directions, like spokes of the wheel.

- For each route, show the same type of route data that you show for a route in map #2

- For this map, also add in six (6) hot ticket pin indicators - These should be in our established style for hot ticket pins (see “hot ticket pin.png”) which each of the six pins numbered, 1-6. These six pins should be scattered around randomly on the map and NOT located along any existing truck route lines.

5. Map #5 - Maintenance Hot Tickets > Assignment Solution:
- Use Hot-Tips-Assignment-Template-A.png AND/OR Hot-Tips-Assignment-Template-b.png as your template for this screen.
- See Mobile Version of Maintenance Route List.jpg as a reference (for how we currently show a maintenance route’s stop/work order list on the driver’s mobile device. The driver is using this view to see his list of stops and the actions (work orders) to complete at each stop. When the dispatch user adds a hot ticket to the driver’s route, this app would show a “Your route is being updated” dialog and then the list of routes woulr be updated to include the new stop related to that hot ticket.

- For the last map, we are asking the designers to come up for a solution to the following problem. Note that you must use one of the provided hot tip assignment templates for this screen. Please include as many screens as you need to illustrate your solution.

- In the template screens you will see that the dispatch user is viewing a maintenance day that is in progress.  That means that the three (3) trucks which are on routes to fix household issues today have already left the yard and started their planned routes.  During the day, six (6) Hot Tickets have come in and now the dispatch user needs to add these to the existing routes in a logical way.

- The user makes these decisions based on the location of the hot ticket stop, in relation to the planned routes / stops. ie he would probably look at the location of the hot ticket and then add it in to the closest vehicle route, in-between two stops which are closest to the hot ticket location.

- A list of the hot tickets is seen at the top of the screen, and these are numbered. The numbers here match the numbers seen on red hot ticket markers on the map.

- The map the user starts with here is Map #4 - Maintenance Hot Tickets. However in this solution, the user must now take action in order to get the hot tickets assigned to a route.

The user must:
1. decide which route/vehicle to add the selected hot ticket to
2. decide where in the existing to route to add the hot ticket (ie “after this planned stop / before this planned stop”
3. save the route change (hot ticket id resolved / route is updated to include this new stop)

You are not to change anything in the template which falls outside of the map area, though you are free to add / remove / change elements within the map area and/or add a side panel to the map area in order to solve the problem.

Target Audience:
- Business professionals (working on a desktop machine) managing vehicle routes for garbage collection and asset maintenance.

Judging Criteria:
- How well you cover all content included in the wireframes (reference/spec)
- How well you visualize the data in a logical manner
- How well you incorporate any new elements so that they work seamlessly with the existing style tile

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file

Final Fixes
As part of the final fixes phase you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.