Challenge Summary
Welcome to the VELOS - Responsive Desktop Design - Challenge Series - Part 3 In this challenge, we are looking for your production of the provided wireframe screens, 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) Search Results
8) Multiple Account Address Upload/Check
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) Search Results
2) Map pop-up
3) Tip History pop-up
4) Asset Lost pop-up
5) Create Work Order pop-up
6) Update Work Order
7) Create and Manage Accounts
8) Multiple Account Address Upload/Check
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 the Velos style guide. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
This is challenge #3 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 manage accounts, work orders and assets.
NOTE that there are two (2) entirely unique screens, one (1) alternate version of a screen, one (1) edit view and four (4) popups in this set.
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 and easy to use
- The header and footer have already been defined in the provided dashboard screen. Where the wireframes differ from the dashboard PSD, follow the PSD please.
- Look to this PSD and the style tile for how to display elements that have already been defined there.
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 and the project style tile. 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.
COLORS:
Follow style tile for color usage throughout your screens.
Primary Colors Hex values:
- Darker Blue #3B62A1
- Lighter Blue #69B3E7
- Green #57A9B2
TYPOGRAPHY:
Follow style tile for typography usage throughout your screens.
- 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 the following eight (8) screens to be designed for this challenge (below). Wireframes are provided for each.
PLEASE DO NOT INCLUDE THE RED ADMIN WARNING MESSAGE THAT YOU SEE IN THE WIREFRAMES IN THESE SCREENS!
1) Search Results:
Please refer 1-search-results-admin-msg-and-filter (unique screen)
- These shows various accounts in the search results
- Looking for your thoughts on how this can be designed better.
- For the various buttons that were provided in this view will need to be shown as pop-ups (see below)
2) Map pop-up:
Please refer 2-map-popup (popup)
- This shows the location of the accounts and drop off points within a map
3) Tip History pop-up:
Please refer 3-tip-history (popup)
- This shows the tip history along with the filters
4) Asset Lost pop-up:
Please refer 4-asset-lost (popup)
- This pop-up allows the user to mark an asset as lost!
5) Create Work Order pop-up:
Please refer 5-create work order (popup)
- This popup allows the user to create new workorder
6) Update Work Order:
Please refer 6-update-work-order (edit view)
- This will allows the user to edit their work order, update the resolution with comments and save them!
7) Create and Manage Accounts:
Please refer 7-create-and-manage-accounts (alternate version of screen #1)
- This is just an alternate version of Screen 1 (search results)
8) Multiple Account Address Upload/Check:
Please refer 8-multiple-account-address-check (unique screen)
- This allows the user to upload multiple account and double the address for each account against a map
- Application will show list of upload errors (Duplicate addresses, Incorrect address, etc,.)
BONUS OPTION:
We are running a tight schedule for this series - If you submit an updated version of the style tile (to include any new elements that you have added) in your final submission, this will be considered a bonus and will warrant additional consideration of your final submission.
If you do not include the style tile and you win the challenge, you will be asked to do this style tile update in the final fix phase.
Target Audience:
- Business professionals (working on a desktop machine) managing accounts, work orders & assets
Judging Criteria:
- How well you cover all content included in the wireframes
- How well you follow to the Velos style tile
- 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.
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.