Integrated Operation Center - Web Tool UI Design Challenge

Welcome to Integrated Operation Center - Web Tool UI Design Challenge

Client of this challenge is looking to revamp their current desktop application into a web application, as a part of this process - we are looking for the topcoder design community’s help in coming up with new, refreshing and modern designs for this web based application that will help Site Managers, Operators, Business Analysts and Admins with the ability:
- To view the list of meetings that were conducted/ attended
- To view list of action items
- To view the LO/TO (lockout/tagout) of the assets

We are really excited to see your designs for this challenge!

Round 1

Submit your initial design for a Checkpoint Feedback
01 Meeting Sign In Logs
02 Action Items
03 LO/TO

As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final Design plus Checkpoint Updates
01 Meeting Sign In Logs
02 Action Items
03 LO/TO

As part of your final submission, you must upload your submission to MarvelApp so we can
provide direct feedback on your designs.
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Main aim of the challenge is to come up with fresh designs based on the provided requirements.

About the Application:
This application has three main modules:
- Meeting Log keeps a list of all the security compliance meetings. The meetings documents the Operators and groups that attended the meeting, etc
- Action Items are list of work orders or assigned task to operators.
- LO/TO is for all the assets that are Locked Out or Tagged Out. This provides the operator with information about which assets are out for now, and edit the record to mark it off the list.

Problem Statement:
- Features in the current application are not intuitive
- Limitation in features as current application is desktop based

Solution:
- Leverage web application features to make current process more simple and intuitive.
- Need to come up with a design that helps to make the data much more visible / improved user experience
- Allows users to easily find the required information

Design Requirements:
- We are looking for the app to be modern, FLAT at the sametime make sure it is simple and Intuitive.
- We want your designs to provide us best possible layout / user experience.
- Client prefers blue color and you are open to mild use of any other colors that compliment this! (NOTE: This primary color could change for different user groups, please consider this - so your design should allow us to change to some other primary color and still look good!)
- We are providing screenshots from existing designs for content references (please DO NOT COPY)!
- We are focussing on desktop, so have your designs of size 1366 px width and height as required. Please keep in mind, this application could be responsive in the near future, so please think through this while designing your screens.
- IMPORTANT: STOCK PHOTOS is NOT ALLOWED in this challenge, however you are free to use any stock icons as required (please make sure to declare them while uploading your submission)

~
Required Pages:
01 Meeting Sign In Logs:
- This page allow the user to track who has attended what meetings
- We need a way to search through the list of meeting log
- Provide a way for the user to filter through the list, please see below for the list of filter items.
- Should have a way to export the list to excel.

Filter Items:
- Meeting Title, UserID, First Name, Last Name, Email, Comments
- Search Date Defaults to 1 month

In addition to above filter items, they will also be able to use these:
- Show My Meetings (Shows all the meetings were the user is leader for that meeting within the search date range)
- Show All Meetings (Every meeting in the date range (whether you are leader or not))
- Filter All My Reports (Every meeting for the user within the date range)
- All My Reports Not attended Meetings (All my reports that have not been to a meeting)

02 Action Items:
- This page will allow users to search through the list of action items (PHA, PSSR, Cause Map, CEM, Incident Review, PSM Audit)
- Based on the Action Item chosen, corresponding filter fields also changes, please see below for the list of filter fields required for each of the action items. Please come up with the best user experience.
- User will have a way to export the list.
- Provide ability for the user to add a new action item (please see details below)!

All:
- Keyword (textbox)
- Start Date (date picker)
- End Date (date picker)

PHA:
- PHA Title (Combobox that displays previous 3 days PHA Titles),
- Recommendation (Textbox),
- Status (Combobox In Progress/Complete),
- Type (Combobox Safety/Operational),
- # (textbox)
- MOC# (Textbox)
- Supervisor (Combobox Populated from All active Employees)
- Engineer (Combobox Populated from All active Employees)
- Node (Combobox 1-20)
- Risk (Combobox 1-9)

PSSR:
- PSSR MOC# (textbox)
- Action Item/Recommendation (Textbox).

Cause Map:
- Incident Title (Combobox that displays previous 3 days Incident Titles)
- Action Item/Recommendation (Textbox)
- Cause (Textbox)
- Safestart/Critical Error (textbox)
- Process Safety Element (Textbox)

CEM:
- Incident Title (Combobox that displays previous 3 days Incident Titles)
- Status (Combobox In Progress/Complete)
- Action Item/Recommendation (Textbox)
- Associated Plans (Textbox)
- Concerns (textbox)

Incident Review:
- Incident Title (Combobox that displays previous 3 days Incident Titles)
- Action Item/Recommendation (Textbox)
- Cause (Textbox)
- Safestart/Critical Error (textbox)
- Process Safety Element (Textbox).

PSM Audit:
- PSM Audit (Combobox that displays previous 3 days PSM Audit),
- Action Item/Recommendation (Textbox),
- Cause (Textbox),
- Safestart/Critical Error (textbox),
- Process Safety Element (Textbox).

Add New Action Item:
General:
- General Action Item (Combobox that displays previous 3 days General Action Item)
- Action Item/Recommendation (Textbox)
- Cause (Textbox)
- Safestart/Critical Error (textbox)
- Process Safety Element (Textbox)
- All action Items gather a Due Date (Date Picker)
- Assignee’s: Should allow to add multiple assignees (a combobox populated by all active employees. When the employee is selected, that name is then added to a textbox that can hold a list of names)

Additional Info Gathered (note these are automatically captured): 
- AssetID
- Visible
- Mod (1 = PHA, 2 = PSSR, 3 = Cause Map, 4 = CEM, 5 = Incident Review, 6 = PSM Audit, 7 = General)
- GroupID
- UserID (of who logged entry)
- Logged Datetime.

Edit Action Item:
User will have the ability to edit these fields in the existing data (in the current application user can edit them inline within the table).
- Due Date (Only by the person that assigned it)
- Completed (Date picker)
- Competed By (combobox populated by all active employees)
- Completed Comments (textbox).

03 LO/TO:
- This page shows all the assets that are Locked Out or Tagged Out (LO/TO). This screen provides the operator with information about which assets are out for now, and edit the record to mark it off the list.
- User will have the ability to add a new LO/TO

Grid View of all Assest Which has been Locked:
- This shows any data record that does not have a “LOTO Removed” date populated, client prefers showing this as a grid instead of a list.
- Lockout/Tagout Information: Each item in the grid will have these information “Group, Location, Date Locked on, Operator, Reason for LOTO, Value/ Process Points, 3rd Party Locks, LOTO Removed Date, Logged by”
- User will have option to edit each of the item to add the values of “LOTO Removed (Datetime picker)" when this value is added it is moved to the Historical Data

Historical Data
- This shows any data record for which “LOTO Removed” date is populated.
- They will be able to search and filter through this list of historical data, all those values mentioned above in the "Lockout/Tagout Information" will be available as filters.

Add New LO/TO:
User will be able to add a new LO/TO information by entering the details below:
- Group (Combobox populated with PDB Routes (needs to be filtered views on Foreman Area))
- Location (Combobox populated with PDB Facilities & Wells (needs to be filtered views on Foreman Area))
- Date of LOTO (Datetimepicker)
- LOTO Operator (Combobox Populated from All active Employees)
- Reason for LOTO (Textbox)
- List of Valves/Process Points (Textbox)
- 3rd Party Locks if Present (Textbox)
- LOTO Removed (Datetime picker)
- AssetID, Visible, GroupID, UserID (of who logged entry), Logged Datetime (these are auto-populated)

Edit LO/TO:
User will have the ability to edit below fields in the existing data (in the current application user can edit them inline within the table).
- LOTO Removed (Datetimepicker)
- AssetID, Visible, GroupID, UserID (of who logged entry), Logged Datetime (these are auto-populated)

MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com or in Challenge Forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).

Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness in designing this application
- Overall design and user experience
- Cleanliness of screen design and user flow.

Target Audience:
- Admins, Business Analysts, Site Engineers, Operators

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- Submit Marvelapp as part of your submission.

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 or Sketch!

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.