Zephyr - eMOC App Desktop Design Challenge

Welcome to the Zephyr - eMOC App Desktop Design Challenge!

Zephyr 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.

In this challenge you are provided with click thru prototype (wireframe) to show the workflow of the application, and we need your help give the app the right look and feel.

Round 1

Submit the following for Checkpoint feedback:
1. Landing Page.
2. Request Access Page.
3. Dashboard Page.
4. Create MOC Page.
5. My MOC and All MOCs Page.
6. MOC Pending Approval.
7. MOC Initiation Rejected.
8. MOC Scoping.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Final design plus any Checkpoint feedback:
1. Landing Page.
2. Request Access Page.
3. Dashboard Page.
4. Create MOC Page.
5. My MOC and All MOCs Page.
6. MOC Pending Approval.
7. MOC Initiation Rejected.
8. MOC Scoping.
9. MOC Scoping Rejected.
10. MOC Technical Review.
11. MOC Pre SSR.
12. MOC Post SSR.
13. Manage Custom Menu Page.
14. Help Page.
15. Admin Pages.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Challenge Details:
What is a MOC?
Please read this link to understand what is a MOC: http://www.gatewaygroup.com/management-of-change/

We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).

Screen Size:
- Desktop: size of 1024px width and height as required.

Supporting Documents:
- Click thru wireframe (1st Place Wireframe.zip)
- 2^nd place wireframe (2nd Place Wireframe.zip)
- 3^rd place wireframe (3rd place wireframe.zip)
- Branding Guideline (Visual_Identity.pdf)

Required Screens:
1. Landing Page:
Please refer to landing.html
- You can use logo placeholder for now.
- Notice Site navigation on the left.
- When user clicks on “Request Access to Site” he will be redirected to Request Access page.
- Notice how feedback tab is shown when you click on it.
- Please capture MOCs and Announcements widgets.

2. Request Access Page:
Please refer to request_access.html (from 1^st place wireframe).
- User needs to enter the following information:
-- Name.
-- Business. (Drop down list)
-- Email.
-- Phone.
- Capture the popup in your design when you click on “Request Access” button.

3. Dashboard Page:
Please refer to initiator_-_dashboard.html, manager_-_dashboard.html, tech_-_dashboard.html & admin_-_dashboard.html. (from 1^st place wireframe).
Please refer home-userlogged.html (3rd place wireframe.zip)
- This is almost similar to landing page.
- Capture ID Identifier, Alerts and Help at the top.
- You can see how site navigation looks here.
- Add Alerts widget to My MOCs and Announcements widgets.
- We need “My Status” widget from (3rd place wireframe.zip) to be included in dashboard.

4. Create MOC Page:
Please refer to initiator_-_create_moc.html, manager_-_create_moc.html & tech_-_create_moc.html. (from 1^st place wireframe).
- Please make sure to read wireframe notes to the right of the screen.
- Please notice how disabled fields gets enabled when you select previous filed.
- Please make sure to capture Facility info and MOC info.
- Notice what happens when you click on “+ Add editor” link.
- Notice validation error style when in MOC info view.
- Also make sure to capture all popups in your design.

5. My MOC and All MOCs Page:
Please refer to initiator_-_my_mocs.html, initiator_-_all_mocs.html, manager_-_my_mocs.html, manager_-_all_mocs.html, tech_-_my_mocs.html & tech_-_all_mocs.html (from 1^st place wireframe).
- Please make sure to capture filter functionality when its opened.
- Design the table and associated pagination.

6. MOC Pending Approval:
Please refer to initiator_-_moc_pending_approval.html and manager_-_moc_pending_initiation_approval.html (from 1^st place wireframe).
A- Initiator Role:
-  Please capture MOC Details.
-  Facility Info and MOC info are read only here.
B- Manager Role:
- The only difference here is that manager have Approve and Reject buttons.

7. MOC Initiation Rejected:
Please refer to initiator_-_moc_initiation_rejected.html (from 1^st place wireframe).
- The only difference here is you have Reason of rejection under MOC details.

8. MOC Scoping:
Please refer to initiator_-_moc_scoping & manager_-_moc_pending_scoping_approval (from 1^st place wireframe).
Please refer to scoping.html (2^nd place wireframe)
- We need this to be consistent with the overall layout from the 1st place submission.
- Under Scoping tab from 1^st place wireframe we need the experience found in scoping.html (2^nd place wireframe).
 A- Initiator Role:
-  Please capture MOC Details.

B- Manager Role:
- The only difference here is that manager have Approve and Reject buttons.

9. MOC Scoping Rejected:
Please refer to initiator_-_moc_scoping_rejected (from 1^st place wireframe).
- The only difference here is you have Reason of rejection under MOC details.

10. MOC Technical Review:
Please refer to tech_-_technical_review.html & manager_-_moc_pending_change_approval (from 1^st place wireframe).
A- Tech Role:
- The only difference here is you have to capture Technical Review Tabs:
-- Comments.
-- Change log.
B- Manage Role:
- The only difference here is that manager have Approve and Reject buttons.

11. MOC Pre SSR:
Please refer to initiator_-_moc_pre_ssr & manager_-_moc_pending_startup_approval (from 1^st place wireframe).
A- Initiator Role:
- The only difference here is you have to capture Pre SSR Tab content.
- You can add action item from here.
B- Manage Role:
- The only difference here is that manager have Approve and Reject buttons.

12. MOC Post SSR:
Please refer to initiator_-_moc_post_ssr, manager_-_moc_pending_closeout_approval & initiator_-_moc_closed (from 1^st place wireframe).
A- Tech Role:
- The only difference here is you have to capture Post SSR Tab content.
- User can add action item from here.
- User can check checkboxes.
B- Manage Role:
- The only difference here is that manager have Approve and Reject buttons and checkboxes are not editable.

13. Manage Custom Menu Page:
Please refer to initiator_-_manage_custom_menu.html, manager_-_manage_custom_menu.html & tech_-_manage_custom_menu. (from 1^st place wireframe).
- User can control his site navigation from here.
- User can Add, Edit or Delete his menu items.

14. Help Page:
Please refer to initiator_-_help.html, manager_-_help.html & tech_-_help.html (from 1^st place wireframe).
- Show help sections and links.
- Click on a link to display help article details page.

15. Admin Pages:
Please refer to admin_-_manage_questions.html, admin_-_add_question.html & admin_-_edit_question.html. (from 1^st place wireframe).
- Design the table and associated pagination.
- Please capture how user can Add, Edit and Delete questions.

Target Users:
There are 8 roles associated with this project.  They are defined as:
1- MOC Initiator – Person initiating the process. The initiator may be the person who enters all information prior to technical review and comment or, the MOC may be more fully developed by the “MOC Lead” prior to distribution for technical review and approval.
2-���MOC Lead – The individual who takes the lead in defining the detailed scope, enters required information in the eMOC tool, and pulls together all of the supporting documentation.���This person can be the MOC Initiator someone else who is selected by the Approving Manager in the MOC Initiation Phase.���
3- Approving Manager – This is typically the manager of the facility where the change is taking place.
4- Technical Reviewer – These are the subject matter experts (SME’s) who we assign to technically review the MOC Record (Multiple persons), for their respective discipline. We will populate a list on this site (or within the eMOC framework) that can be edited only by the administrator and we will use in the program to only allow our users to pick the people assigned the roles in the list. A limit to list type option. We will explain this concept in more detail in the Create New MOC section of this document.
5- Area Director – Only required for an “Emergency Change” Type. Area Directors are responsible for approving subject matter experts to serve as technical reviewers. Therefore, they have permission to edit the technical reviewers list/table.���
6- Additional Editor – These are people listed in the Praxair address book who may not be a required part of the process, but we want them to have the ability to edit the content of an MOC record.
7- Administrator – This is the person who will make changes to the workflows for their business.
8- Management Representative - This is a required role for the Pre-Startup Safety Review MOC Phase and is selected by the MOC Lead when he picks his technical reviewers.

Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you translate the requirements into an attractive and usable design.
- Cleanliness of your graphics and design.
- Design and User Experience.

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, or Adobe Illustrator as a layered AI 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.