Challenge Summary
Welcome to the VELOS - Responsive Website Design Concepts Challenge 1! In this challenge, we are looking for your initial design concepts that will help us visualize the screens needed for new 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.
NOTE:
For this challenge, we are looking for just a couple of screens
- One Application screen
- One Style Tile Screen
We’re looking forward to your submissions!
Round 1
Submit your initial designs for Checkpoint Feedback
1) Dashboard Screen
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) Dashboard Screen
2) Style Tile Screen
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 overall direction for the look and feel of this application, going forward. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
This is challenge #1 in a larger series of design challenges, which will be used to design the new application interface, 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:
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
SIZE:
- Design the one (1) desktop screen 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). Note that headers / footers may extend to 100% width (designer choice).
- Design the one (1) style tile screen at 1024px (w) by (any height) at 72dpi.
COLORS:
Allowed Primary Colors:
- Darker Blue #3B62A1
- Lighter Blue #69B3E7
- Green #57A9B2
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.
- Choose ONE of the primary colors for most actions / clickable items. Gray may also be used for secondary links, such as footer links.
- In general, have clear and defined color use rules!
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.
Required Screens:
We need these screens to be designed for this challenge:
1) Dashboard screens:
This screen will contain the following content :
Header element, which includes:
- Logo placeholder
- “Welcome John Snow (where name is a link)” text
- Option to logout
- Primary navigation (show “dashboard” as active) element, which includes:
--- Dashboard (active)
--- Dispatch
--- Map Center
--- Reports
--- Tasks (including indicator of 2 new tasks)
--- Support
Search Element
This need to be of large / 100% width - the most important element on this screen, the user should really take notice of this element) which includes:
--- search input
--- drop select for “search in..” (select search type)
--- “search” button
Dashboard widget area
This need to include six (6) widgets. These widgets should be of equal size. Each will contain one of the following data visuals:
--- a line graph example, labeled “Acme Dashboard Element”
--- a bar graph example, labeled “Acme Dashboard Element”
--- a pie chart example, labeled “Acme Dashboard Element”
--- a venn diagram example, labeled “Acme Dashboard Element”
--- one more data visual example (designer choice), labeled “Acme Dashboard Element”
--- an icon that represents a “report”, and a text label for “Acme Report Quick Link”
Manage Dashbord Widgets
Option to “manage dashboard widgets” (user will click this in order to change widgets, or organize (reorder) widgets, or add/remove widgets from the dashboard)
Footer element which includes:
--- repeat of main nav links plus link to “velos.com”
--- links for “policy statement” and “terms of use”
--- copyright notice
--- logo placeholder
2) Style Tile Screen:
For this screen, we ask that you put together a one page style tile that clearly shows your concept for this design. Please search in google for “style tile template” to see common examples of this type of screen.
Required style tile content:
a) color scheme, where you call out color for specific items such as:
- Clickable (non-active) link items
- Color for active link items
- Color for specific areas (backgrounds, header backgrounds, etc)
- Color-related scheme / rules
b) Typography rules, where you call out typography for specific items such as:
- headers
- sub-headers
- paragraphs
- lists
- etc
c) Navbar style (including both active and inactive styles)
d) Data visuals styles (your charts, graphs, etc)
Optional style tile content:
While other elements will be added in subsequent challenges, you are free to include anything else you want to call out now, to strengthen your submission - container styles or other elements that define your design concept, such as:
- Form element styles and related labels for : text input, textarea, drop select (picklist), checkbox, radio option, buttons for “cancel” and “submit”
- Section header which can be expanded and collapsed, with text label
- Data table element styles for: column headers and labels and indicators for “sort by”, two data rows included a “selected” or highlighted row
- Map style (with two types of “pins”, where one type has a number (1-9) on it, no other text needed.
- Icon styles
Target Audience:
Business professionals (working on a desktop machine) running reports, performing searches, etc
Judging Criteria:
- How well you define a clear style for your concept
- Cleanliness of your graphics and design
- Your design should should make sense with responsive design coding 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.
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.