VELOS - Mobile Screen Design - Challenge Series - Part 2

Welcome to VELOS - Responsive Website Design Concepts Challenge Series - Part 2! This is second challenge in the series.
In this challenge, we are looking for your initial design concepts that will help us visualize the screens needed for a new mobile application.

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

Concept 1 (Phone)
Concept 2 (Phone)

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.

Concept 1 (Phone)
Concept 2 (Phone)
Concept 3 (Tablet)

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)

The Purpose of this challenge is to define the main screens & functionality of this new mobile application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).

This is challenge #2 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.  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.

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

GENERAL:
We are providing a style tile and dashboard screen of the related desktop application. Please refer to the style tile when creating your screens, as they should not deviate from any previously defined styles.

This is a physical labor workforce work application, where users will be working in all kinds of weather conditions, and wearing special gloves which will allow them to use mobile devices. With this in mind, design specifically for a work environment,  including these key concepts :
- Generous use of whitespace
- No photography, banners or other distractions
- LARGE and easy to tap touch sizes (for bulky gloves)
- Common / easily recognized icon concepts, where applicable
- Minimalistic design elements
- Crisp / clean text

SIZE:
- Phone screens:  480px X 800px  @ 72 dpi (no phone frame please!)
- Tablet screens: 2560px X 1600px (no tablet frame please!)

COLORS:
Allowed Primary Colors:
- Darker Blue #3B62A1
- Lighter Blue #69B3E7
- Green #57A9B2
- Plus any colors in provided style tile

Neutrals:
- Black #000000
- White #FFFFFF
- Shades of Gray

Notes:
- Rather than black text on white, please use #333333 for any text that appears on a white background.
- Follow the provided style tile with regards to typography and color use, as well as any other applicable design elements.

TYPOGRAPHY
- Use Arial or Helvetica fonts for all text. Note: The final winner may be required to swap these for another font.
- 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.
- Follow the provided style tile with regards to typography and color use, as well as any other applicable design elements.

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

Concept #1:
Phone > Start of Day > Inventory Check & Work Order Review (2 screens)

Important: You are required to create at least two (2) screens to convey this concept. You may include more screens in order to more clearly demonstrate your concept to the client.

Scenario:
The driver will carry a phone which also functions as a scanner. This screen contains the two primary things that the driver will see/do for his work day. He needs to be able to see the inventory list (so he can load the correct inventory on his truck for drop off) and a list of all work orders (the locations where he will stop on his route and what he will need to do there - drop off something or pick something up).

You can either show this as two expand/collapse elements (inventory & work orders) OR you can show it as a progression (where checking inventory as complete brings you to work orders (if this case though, use must still be able to go “back” to view inventory.) OR you can show it as top level menu options.. whatever you think works best for the driver.

Flow to cover it:
- User checks inventory > User designates inventory complete > User checks work orders > User clicks on the first work order, to start his route

REQUIRED CONTENT:
A. Inventory element: 
This will be an inventory data set, so the driver knows how many items he needs to load in to his truck before he leaves. Note that the “dropping off” section is the most important, as these are the inventory he needs to load. Please call this out (especially the number of each item) so he can easily load his truck.

Example data sets, below:

Inventory Summary
Dropping Off (87)
35 Gallon Garbage Bins (34)
65 Gallon Garbage Bins (22)
95 Gallon Garbage Bins (12)
18 Gallon Recycling Cart (19)

+ NOTE: Show some option for designating inventory as complete (i.e. the driver had loaded his truck, while he still needs to be able to view this data later if needed, the act of “checking this as complete”. You can EITHER show each inventory group as tappable (i.e. tap “35 gallon garbage bins (34) to show that you have loaded all of these. then tap the next one, etc) OR you can simply show one check action to designate ALL inventory is loaded - Up to you)

B. Stop / Work Order element: 
This is a list of all stops & related tasks at each stop for this driver. Each work order is “clickable”. Example work order data set, below:

Summary
Work Orders (174)
Stops (132)

1. 1234 Superlongnamus Avenue, Dallas, TX
Remove 35 Gal Garbage Cart
Deliver 65 Gal Garbage Cart

2. 5678 Main Street, Dallas, TX
Deliver 65 Gal Garbage Cart

3. 6789 Old Oak Road, Dallas, TX
Deliver 65 Gal Garbage Cart

4. 3456 Old Highway 10 East, Dallas, TX
Remove 18 Gal Recycle Bin

+ NOTE: Where we show TWO work orders for the same address (first example), each work order will independently have all related options (concept 2).

You can also add / remove from the set above as necessary for your design. i.e. you may choose to show only a few of these before scroll or even more of these before scroll - just add to / remove from data set as needed.

Concept #2:
Phone > Start of Route > Make a Stop / Complete a Work Order (2 screens)

Important: You are required to create at least two (2) screens to convey this concept. You may include more screens in order to more clearly demonstrate your concept to the client.

Scenario:
This screen assumes the driver has clicked on the the first work order item and is now starting to drive towards the address associated with the first work order. 

In this screen, the driver has tapped the first work order and now sees additional info / options.  NOTE: where the driver has TWO work orders in a single stop, each of these must have each related option. So the serial number, comments, status change, etc for one will not be the same as the other, though they are both being completed at the same stop location.

REQUIRED CONTENT:
A. Option to take a “scan” or manually enter of the item’s serial number (item we are picking up or dropping off) - this number will be 12 NUMERIC DIGITS

NOTE: If the scanner does not work for some reason, the driver will need an option to manually enter the serial number. We need to confirm that this was captured at drop off / driver cannot continue without capturing this serial number somehow.

B. Secondary option to take a photo (driver does NOT need to do this..it is entirely optional). IF the driver takes a photo, he will be prompted to add a note and cancel or add the photo & comment)

C. Secondary option to enter a comment (driver does NOT need to do this..it is entirely optional). The driver may also choose to add a short note withOUT taking a photo.

D. Option to select a status (picklist) when the pick up / drop off has been done (required action - system will not continue to next stop until this is done). examples of the options the user can choose from are:
- PICKED UP
- CONTAINER NOT OUT
- Resident Refused Service

NOTE: use the first stop as your example, since there are actually TWO work orders associated with this one: one drop off and one pick up. Its important that the driver does BOTH (where most stops only involve one) so make sure it is obvious that the driver needs to do both actions.. each one needs to be individually marked as complete before system continues to the next stop

E. Option to go to map / get turn by turn directions (in case tablet is not working)
NOTE: This  option is just an icon /  should probably be somewhere near the top of the stop info.

Concept #3:
Tablet > Version of the two concepts above & map & directions (2 screens)

Important: You are required to create at least two (2) screens to convey this concept. You may include more screens in order to more clearly demonstrate your concept to the client.

Scenario:
The driver will have a tablet which is docked in his truck (not carried) which will give him the same info & options as the phone device PLUS a map view and run by turn directions to the next stop. The user will perform his inventory check and stop & related work order actions with his phone UNLESS it breaks… in which case he will need to be able to enter a drop off serial number and comment (no photo) into the tables version (rare but possible if needed).

The tablet and the phone will be synced, so marking work orders for stop #1 complete on the phone will automatically tell the tablet to queue up stop #2 and show it as active / show it on the map, and give turn by turn directions to it.

Show the user also at the first stop in this screen, so we can see they are synced.

REQUIRED CONTENT:
A. The map area will show :
- the entire route of this truck for today (solid line showing the trucks path to all routes
- each work order stop address on the route (where the CURRENT one is highlighted somehow)
- turn by turn directions

B. The inventory & work orders list will be the same content as listed for the phone. All options available for each work order on the phone must also be accessible here, though it is okay if the user has to “tap” to get to them, as ideally they will only be viewing map/directions on this screen and would only perform those actions here if the phone stopped working.

NOTE: you may choose to show inventory here as “closed” / complete and not actually viewable on the screen without tapping to re-open.

C. A dialog popup warning the driver of a route change - content is :
“Notice: Your route is being updated… (thumper / loading indicator here)”

Target Audience:
Workers / drivers who are completing a route and providing pick up & drop off of assets

Judging Criteria:
- How well you maintain the provided style for your concept
- Cleanliness of your graphics and design
- Ease of use / Logical flow for concepts

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 may 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.