QIR - UI Prototype Challenge

Contest Introduction:

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

Project Introduction:

The client for this project has an existing system called Quality Incident Reporting (QIR) application.  This existing application was created using SharePoint and is used for creating and managing quality incident records.  The goal for this project is to build a new Quality Incident Reporting application using .NET (based on the existing QIR application).

For this challenge, we need you to create the UI Prtotype for the new QIR .NET application.  We have provided the wireframes and storyboard for the new QIR application for you to base your prototype on.

 

Primary Goals:

For this contest, we are asking you to put together the UI Prototype for the new QIR 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 1024×768 pixels wide screen resolution.
- The application will be built out using ASP.NET Web Forms during the assembly phases. This is the end-goal of the app, so the prototype HTML should be easy to translate into Web Forms in future frontend assembly challenges.  
- The client has currently approved only jQuery as an accepted JS library (i.e. please don't use Angular).  If there are any different libraries you'd recommend using please ask for approval on the forums.
- 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 .NET 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 .NET based UI prototype, it is okay for the UI prototype to use the closest .NET 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 HTML4 code (the majority of users will be using IE8/IE9, which don't fully support HTML5).
- 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:

All the Storyboard pages, including the following pages, should be included in your UI prototype:

1) Login (no longer necessary - SSO will be used so no login page required).
2) Regular User Home
3) QIR - Required for Draft Fields
4) Business and System Admin Home
5) QIR - Awaiting Approval
6) Manage Root Causes
7) Manage Codes
8) QIR - Required for Saved Fields
9) QIR - Required for Approval Fields
10) QIR - Closed / Reopened
11) Manage Dept Regions
12) Manage Dept Notification Lists
13) Manage Email Templates
14) Application Log

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

Small Changes to make from the Storyboard:

The client has requested a few small changes to be made to the Storyboards v3.  Please include these changes in your UI prototype:

1. Page 30-32: Grids. "Edit" icon needs to be the first column, e.g. Code and Dept Region grids, to be consistent.
2. Page 23: Root Cause Determination section. Root Cause should = Lack of Attention. Determination is correct as-is. The value of "Root Cause" is always the last node on the root cause tree.  In the screenshot for screen #23, Root Cause Determinations would be "Human Error  -> Forecasting Error -> Lack of Attention" and Root Cause would simply be "Lack of Attention".  The screenshot current shows them both as the full tree: "Human Error  -> Forecasting Error -> Lack of Attention".  The value for Root Cause should be changed to only be "Lack of Attention".
3. Page 22, 23: Event Log. Add "Oversight Approver" field above "Rejection Reason", with value = "Quality Assurance Approvers".
4. Page 25: Root Cause Determination section. Needs to be updated like page 23.
5. Please make the header fixed header with the buttons and only the rest of the form scrolls, but add a pin button so that the header & buttons could be fixed or pinned or could scroll like the current form (buttons would show at the bottom as well in this case).
6. "Manage Root Cause" - support drag/drop

NOTE: Details about these small changes are included in the attached excel file "Story Board Winner Feedback v3.1 - Q&A.xlsx" (see column "Response / Questions for v3 Changes").  Please ask on the forum if any of these changes are unclear.

 

Documents Provided:

- Storyboards (and source files)
- Wireframes

 

Final Submission Guidelines

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