Chaos - PX Bulk Express UI Prototype Part 2

Project Overview

Chaos is going to update the look and feel of one of their web-application that is called PX Bulk Express. The new look and feel has been defined and the new prototype with existing functionality should follow the new style.

Competiton Task Overview

The purpose of this contest is to convert the storyboard into a working HTML prototype. We provide you a UI Kit and screenshots for all pages to convert. You need to convert the provided Required Screens and they should follow the new style from UI Kit.

General Requirements

• Overall layout and style must follow the provided UI Kit.
• Header and Footer is fluid (follow the width of browser’s viewport) and Content is fixed.
• Left Navigation Should Follow screen 03.Home.jpg in provided UI Kit.
• Set Hover State for all Button and Links.
• Implement Pagination in all tables.
• Each page should follow style of references page in UI Kit. If there is item that doesn’t contain in a specific page, you can take it from another page. You only need follow the style, do not change each information (text, field, form, etc) that exist in that page.
• The existing prototype pages (part 1 UI Prototype) MUST be used as a reference. These pages for this content and the first UI Prototype contest (part 1 UI Prototype) are part of the same web site and must be consistent. (Including style of links (ex: Export to Excel), use of icons (Alert and Information), grid style, button naming conventions, calender styles and colors, ...) green asterix for required fields, error/validation styles, ....)
• You MUST use the existing style that has been defined in reference prototype.
• You must use the reference prototype as the base submission and add PREFIX PART2_ for all new pages you created.
• You must define and/or create new function in all CSS/JS that already exist in reference prototype unless you need to create the new one.
• New style that has been defined in reference prototype has high priority than in UI Kit.
• Implement all charts using plugin from Highcharts.
• All fields that has red border are required and must be validated when submitted/confirm.
• After each confirmation, shows a confirmation message as shown in page my-profile.html when "Submit" button is clicked.

Key Requirements

• Your HTML code must be HTML5 and follow its best practice.
• Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tabular data and not for page layout. No inline CSS styles, all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e. "main-content", or "mainContent".)
• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition anywhere in the code. You are allowed to use the JQuery JavaScript library for this contest.
• All elements that will eventually need to be accessible for automated testing (e.g. any type of input) must have the 'id' attribute set.

Changes to Existing Prototype

• Add new fields Invoice# and Order# options on Billing Manager - invoice Search page (billing-mngr-invoice-search.html) above Criteria field.
• Add new field Invoice# option on Billing Manager - Shipping Documents search page (billing-mngr-shipping-documents.html) above Criteria field.
• Add "Make Payment" button to Billing Manager - Online Payments page (billing-mngr-online-payments.html). The button will looks and follow as shown in page inventory-mngr-operating-mode-change-choose-tank.html and add checkbox for each invoice as shown in that page.

Browser Requirements

• IE8 and above
• Latest Firefox
• Latest Safari
• Latest Chrome

 

MAKE SURE TO WATCH CONTEST FORUM FOR ANY ADDITIONAL REQUIREMENTS AND CLARIFICATIONS THAT MAY BE ISSUED.

Final Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.