Challenge Overview

Contest Introduction:

Welcome to the Helium Web App UI Prototype challenge! In this challenge, you will need to build the UI Prototype for the new Helium web application based on the Storyboards and Wireframes that have already been created.  This contest will produce the full UI Prototype for the new web application.

Project Introduction:

The client for this project runs a business where they fill and ship containers of liquid helium.  The current process of planning and scheduling container fills and shipments includes manual steps, such as adding data to Excel files.  For this project, the client is looking to create a web application that fits into their existing system and can be used to eliminate these manual steps and streamline the process of production planning for their liquid helium business.

The existing logistics planning system uses a combination of manual processes, including data from paper/excel spreadsheets and live data in the client’s existing production logistics system.  This current logistics system collects data from existing, client facing systems and orders entered via an order entry system.  All of this data will need to be consumed by the new web application.

On a weekly basis in the current process (or somewhat real-time when conditions change), logistics personnel will gather data from multiple different sources and make a draft schedule. If everything appears good with that draft schedule, they will create a “fill and ship” schedule to deliver to the client’s plants. This schedule tells the plant employees what container to fill, for which customer, and when to ship it. The plant employees are sent repeated schedules if there are any changes from unforeseen conditions.

The new web application will need to integrate with the existing systems and fill in the gaps where manual steps are currently involved.  The end product produced by the system will be the fill and ship schedule.

Primary Goals:

For this contest, we are asking you to put together the UI Prototype for the Helium web application based on the Storyboards and Wireframes that have already been created.  The attached storyboards and wireframes show the screens required for this application, which you will design for this contest. A breakdown of the screens to submit for the contest is listed in the instructions below.


General Requirements:

The following are general guidelines you must follow in building the prototype:
- Produce a UI Prototype that can be used to demonstrate all screens / mentioned functionalities as required in the Storyboards / Wireframes.
- Your UI Prototype must fit a 1920x1080 pixels wide screen resolution. Logistic planners (users of the system) will have two 24" monitors at their workstations to view the application on. The resolution is 1920x1080 for both monitors. This means they will have the ability to view two screens at the same time side-by-side.
- Your design must represents all pages and flows from Web App Storyboards / Wireframes.
- Please check wireframe notes on each page to see the various interactions in those pages. You need to include those in your submission.
- Implement hover state for all buttons and links.
- All elements (such as the select boxes, radio buttons and checkboxes) will be browser based.  If any screen design elements look different in the storyboard (like the style in Safari / Mac OSX) and cannot be styled exactly the same way for a web based UI prototype, it is okay for the UI prototype to use the closest web browser look and style match (please confirm on forums if it is a big difference).

 

The following are specific requirements for HTML, CSS and Javascript files:
- Please provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean indentation for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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 requirements anywhere in the code. You are allowed to use the JQuery JavaScript library for this contest.
- Pagination is required to be included where necessary

UI Prototype Pages:

The following pages should be included in your UI prototype:

1) Logistics Planner - Dashboard
    a) Including all pop-out windows
2) Logistics Planner - View/Edit Production Schedule 
    a) Including all pop-out windows
3) View/Export/Print Ship and Fill Schedule (i.e "Ship and Fill Schedule")

SCOPE: All the screens in the "Submission" folder from the Storyboards are in scope for this contest.

 

Documents Provided:

- Storyboards (and source files)
- Wireframes

 

Browsers and Standards:
Your submission must works on browser in the list below:
- IE8+
- Safari latest version on Mac & Windows
- Firefox latest version on Mac & Windows
- Chrome latest version on Mac & Windows



Final Submission Guidelines

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

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30046152