Challenge Summary
Welcome to the VELOS - Responsive Desktop Design - Challenge Series - Part 4
In this challenge, we are looking for your production of the provided wireframe screens, based on existing screens from previous challenges in the series.
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
- 2. View of route in progress (list view with hot tickets)
- 3a. View of route in progress (map view with hot tickets opened)
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.
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 production of the provided wireframe screens for the user’s desktop experience, based on existing screens from previous challenges in the series. We are looking to the Topcoder Design Community to help us create a great user experience (UX).
This is challenge #4 in a larger series of design challenges, which will be used to design new application interfaces. VELOS is a global leader of shipping services. This application will be used to manage accounts, work orders and assets.
Design Considerations:
We would like you to consider the following while creating your design.
GENERAL:
This is a work application, where users login and perform daily work tasks, so keep the feel clean and professional. With this in mind, also design specifically for a work environment, including these key concepts:
- Generous use of whitespace
- No photography, banners or other distractions
- Strong / clear datatable and form concepts
- Common / easily recognized icon concepts, where applicable
- Minimalistic design elements
- Crisp / clean text
WIREFRAMES
We are providing wireframe screens for all 8 screens, however :
- You do NOT have to simply “skin” the wireframes / you are free to use different ways to display elements, so long as it is logical / easy to use and works with the existing screens
- The header and footer have already been defined in the provided dashboard screen.
- SERIES NOTE: we have removed the style tile from this challenge, so you only need to stick to the style defined in the provided screens.
SIZE:
- Design the desktop screens at 1466px (W) by 768px (H) at 72dpi, where the content area is centered and you can see 50px of “white space” to both the left and right of the main content area (ie main content area is 1366px wide, centered in a 1466px screen).
STYLES:
We are including the original dashboard screen. Please adhere to the rules established in the style tile and add new styles only as needed. How well you do this will weigh in heavily during winner selection. Specific rules can be found below.
COLORS:
Follow style tile for color usage throughout your screens.
Primary Colors Hex values:
- Darker Blue #3B62A1
- Lighter Blue #69B3E7
- Green #57A9B2
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.
IMPORTANT NOTE: The header, “search” box and footer contain exceptions to these rules listed below, and should be left as-is (do not update to reflect rules below)
Buttons
- button text is white, 14px helvetica light / all caps
- height is 33px
- padding between two buttons (side by side) is 5px
- padding (left / right of text) is ROUGHLY 15px (where stacked buttons are very close in size, please make them the same size, for a nice visual effect. for example on search results see “tip history”, “deactivate”, and “apply filters”)
- NOTE: deactivate is spelled wrong in sub #969
Icons & Open / Close Arrows
- should be #333 when on white or light gray, but change to white on dark grey / on color blocks
Standard text
- should be #333, 16px helvetica light
- when appearing on color block backgrounds or dark gray, text should be white
- where we want text to stand out (headings, important, etc) use :
- - regular rather than light weight
- - OR 18px rather than 16px
- - OR all caps rather than first letter cap
Required Screens:
We need the following eight (8) screens to be designed for this challenge (below). Wireframes are provided for seven of these screens. The number shown is directly related to the wf - example: 1. landing page for dispatch is related to wf 1.png. All except 3b (route detail popup) have a related WF screen.
1. Landing page for dispatch:
- This is the landing page for dispatch!
2. View of route in progress, list view with hot tickets closed (less editable than #7, where route is only planned)
3a. View of route in progress, map view with hot tickets opened
Note in hot ticket DT: Please change “Remove 18 Gallon Recycle CartReq 04/09/15” to “Remove 18 Gal Recycle Cart Req 04/09/15”
For this one, some notes on the map area:
- use the provided map.png for your map background
- show each of the 3 vehicle routes, each route should have it’s own color for route but do NOT use red as one of these colors as it will be used for hot tickets
- show six red “pins” scattered across the map (see dashboard for pin style) to indicate where the hot tickets are located (user will click on the closest vehicle route to a hot ticket pin, on order to add it to that route)
3b. Modal view of individual vehicle route, for inserting hot ticket
For this one, the user has clicked on a specific vehicle route and now sees a modal view which contains:
- modal title, “Vehicle 1 Route”
- split screen area (��� hot ticket list and ��� map)
-- left side is a list of the 6 hot tickets, only data to show is the “Remove 18 Gal Recycle Cart” part here and they should be numbered, 1-6
-- right side is the map with each of the driver’s stops indicated by “pins” on his route (see dashboard for pin style to use, and use the primary blue color for these) AND six of the red hot ticket pins shown with numbers that related back to the hot ticket it belong to..
on one of the hot ticket / red pins show that the user has “dragged” it to a space on the route line (ie his mouse is on it and it is on the route line, in between two existing stops) and a pop up has come up next to it which says “Add to route? (buttons for Yes and Cancel)”
4. Route in progress, list view with hot tickets resolved
5. Steps 1-2 of create new route
6. Steps 1-3 of create new route < Inventory check (with errors)
7. Final view of newly created route (“planned” route) where all editing is still available
BONUS OPTION
We are only requiring eight (8) screens, however you may submit additional screens to illustrate your concept.
Target Audience:
Business professionals (working on a desktop machine) managing trucks, drivers, routes and work orders.
Judging Criteria:
- How well you cover all content included in the wireframes
- How well you adhere to the existing style
- 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) 1024x1024 px 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, or Adobe Illustrator as a layered AI 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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.