Challenge Overview

Project Overview

Client is a fortune 500 industrial gas company that operates chemical manufacturing facilities throughout the world.  From time to time we need to make changes to the different aspects of the manufacturing processes at these facilities.  As you can imagine it is very important that these changes be managed through a very disciplined approach and enforce certain business rules because mistakes in the Management of Change process could have catastrophic effects.   These changes could be as simple as updating a site specific operating procedure to a adding addition equipment such as compressors, pumps or electrical components.  The more complex the change, (Level 1 change is the highest) the greater amount of additional actions and contributor’s (people) that will be involved in the change process.  We currently are working with a paper process and are looking to change to a web based application that will allow us to enforce business rules and eventually conduct some data mining to understand how we can make this process better.

Competition Task Overview

For this challenge, we need to convert the provided wireframes / storyboard to a clickable prototype. All pages are in scope.

We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.

Key Requirements

  • For wireframes:
    • We'll use the 1st place Wireframe as the base / master wireframe
    • We'll use the 2nd place for Scoping
    • We'll use the 3rd place for My Status on the dashboard
  • We're making some minor updates to the storyboard, the winner will need to integrate these in final fixes.
  • There are a few changes that are not in the wireframes nor in the storyboard that we need to make to the prototype, please check the list of changes in the forum.
  • Test in all the required browsers.
  • Replicate the design of the approved Storyboards (PSD Files) for all pages.
  • Your pages must match the colors and structure of the provided storyboards.
  • Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
  • Ensure you submission clear of HTML and CSS Validation error and warning.
  • The result of this UI Prototype contest will run under Website platform.
  • Background must have covered all browser screen area. 
  • Provide hover style for any buttons/link etc.
  • Make sure breadcrumbs and all navigation area works in any page.
  • All transition, animation for modal window, notification must emphasized great user experience.
  • We need clear documentation of the code.

Specific HTML/CSS/JavaScript Requirements

  • You MUST use HTML5 and CSS3
  • 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 tables of data/information 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).
  • Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
  • Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Libraries/Plugins

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.
  • If you want to use other libraries you need to get approval first.

Browser Requirements

  • IE 8+ (Primary)
  • Firefox latest on Mac / Windows
  • Safari latest on Mac / Windows
  • Chrome latest on Mac / Windows
  • Minimum resolution: 1024 x 768 with fluid layout.

Documentation Provided

  • Wireframes
  • Storyboard


Final Submission Guidelines

Submission Deliverables

  • Your submission must be a single zip file containing all the files necessary to view and run your submission properly (i.e.images, css, html, and javascript files.)

Submission Guidelines

  • Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30049833