Challenge Overview
Contest Introduction:
Welcome to the OPM - UI Prototype - Part 2 contest! In this contest, you will need to build the UI Prototype for the new SCRD web application based on the Storyboards and Wireframes that have already been created. This contest is Part 2 in a series of contests for creating the full UI Prototype.
Project Introduction:
The Office of Personnel Management (OPM) has an existing legacy application called the Service Credit Redeposit/Deposit System (SCRD). The mission of the Service Credit Redeposit/Deposit System (SCRD) is to compute deposits and redeposits, create an initial bill, post payments, and send out receipts to federal employees for periods of federal employment service that were either not covered by retirement deductions (deposits), or were covered and later refunded by the federal government (redeposits).
For this project, OPM will be building a new web application to replace the existing legacy SCRD system.
Primary Goals:
For this contest, we are asking you to put together the UI Prototype for the Web Application based on the Storyboards and Wireframes that have already been created. The attached storyboards and wireframes for the Web Application 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 design must represents all pages and flows from Web App Storyboards / Wireframes.
- Screens should correctly match the storyboard flow.
- 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 browser based match.
The following are specific requirements for HTML, CSS and Javascript files:
- Your HTML code must be XHTML 1.0 Strict compliant
- 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
Prototype Pages - Part 2:
The following pages should be included in your UI prototype:
03) Reports
04) Suspense
05) Approval
06) Payments
SCOPE: This includes all the screens in the "All_All_Screens" folder, from "03_01_Reports.png" through "06_03_Payments_click_to_select_records.png". Basically, all screens in this folder "All_All_Screens" folder that begin with 03, 04, 05 or 06 are in scope for this Part 2 contest.
MISSING POPUPS: When the client reviewed the Storyboards and Wireframes they found a few missing popup windows. These missing popup windows MUST be included in your UI Prototype submission. Please see the screenshots provided by the client with these missing popups: Missing_Pop_Ups_093013.pdf (download from OPM wiki). Only popups that apply to the screens in scope for Part 2 need to be included for this contest.
NOTE: Please make sure to follow the Design Notes (see "00_DesignNotes.png" and "00_Notes.psd" in the Storyboards zip file) for styling.
Documents Provided:
| UI Prototype - Part 1 | http://apps.topcoder.com/wiki/download/attachments/93159486/OPM_UI_Prototype_Part1_102213.zip |
| Improved Application Wireframes | Shows how the new SRCD application will work: View Online , or download final version + source |
| Storyboards / Screen Designs | Attached to OPM wiki: http://apps.topcoder.com/wiki/download/attachments/93159486/OPM_Storyboard_Screens.zip?version=1 |
| Missing Popup Windows | http://apps.topcoder.com/wiki/download/attachments/93159486/Missing_Pop_Ups_093013.pdf |
IMPORTANT: For the items above (and more project documentation), please see the OPM Project Wiki.
Browsers and Standards:
Your submission must works on browser in the list below:
- IE7+
- FF 3+ Mac & PC
- Safari 4 Mac & PC
- Chrome Mac & PC
Section 508 Compliance - The new web application must adhere to Section 508 guidelines for web application accessibility. For additional details about the Section 508 guidelines, please see the Section 508 Compliance section of the OPM project wiki: http://apps.topcoder.com/wiki/display/projects/OPM#OPM-Section508Compliance
Final Submission Guidelines
Submit a zip file contains all HTML/CSS/JS/images and another required files into Online Review.