Challenge Summary
Welcome to OPM Storyboards Contest Part 2. We need you to design pages for a business web application following an existing design.
The primary goal of this contest is to design the look and feel of the OPM legacy application. We provide you with an existing design for branding guidance, so you need to design other pages to complete the application from the wireframes.
We expect to create a very clean design, modern, with clear hierarchy and trustworthy. Follow the wireframes workflow and layout.
About OPM
The Office of Personnel Management (OPM) has an existing legacy application called the Service Credit Redeposit/Deposit System (SCRD).
The mission of the SCRD is to compute deposits and re-deposits, 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 (re-deposits). The SCRD must be a flexible system that can be easily updated or modified for ongoing legislative mandates and must be able to provide robust accounting tools for posting and adjusting payments.
Branding and Guidelines
- Your design must fit 1024 pixels wide screen resolution. It should be able to scale up to larger displays. This is a dashboard-like application. In spite the wireframes look like a desktop application you will design a modern web version, not desktop.
- This application is data-intensive. Consider to apply good spacing and make content easily readable.
- Follow the same color palette from the provided design. Your design must be consistent with OPMStoryboards.zip.
- Use web-safe fonts for the pages content. Beware of declaring your fonts according to the Studio font’s policies.
- Show all the hover states for all UI elements you create (buttons, hyperlinks, dropdowns, etc).
- Your design must meet the Section 508 requirements (see below).
Storyboard Requirements
Follow workflow and layout guidance from Wireframes.zip. You need to create storyboards to cover the following pages.
Overall
- Make sure to provide screens for popups, collapase/expandable features, error forms, and so on.
- As a suggestion, click all the buttons in the forms to understand the interaction features of the application.
- Pay attention to some notes over the wireframes with UI descriptions.
1) Account Details (Wireframes: Admin > Account Search Results > Account Details)
- Make sure to display all tabs and content. Employee, Billing Summary, Service History and Payment History.
- Show Print Summary.
- Show Edit Notes workflow.
- Show Delete Note workflow.
1.1) Billing Summary
- Show Edit Billing Info.
- Show Statements.
1.2) Payment History
- Show Payment Receipt.
- Show Note workflow.
- Add Payment workflow.
2) View Account Overlay (Wireframes: Admin > Create New Account - click view account)
- This is not a regular “tab”. When it’s clicked an overlay is displayed over the content with search filter parameters.
- Show Search workflow.
- Show Clear Entries interaction.
3) Account Results (Wireframes: Admin > Account Search Results)
4) Work Queue (Wireframes: Admin > Work Queue)
- Show Assign buttons workflow.
5) Reports (Wireframes: Admin > Reports)
- Show all three tabs and all the left trees content.
- Correspondence and Reference reports require special features that are not in wireframes, please pay attention:
- Must allow admin users to create/edit/delete letters and forms via an editor (large text field). Create extra screen(s) to show this scenario (admin).
- When a regular user (not admin) is viewing a letter/form, he/she can save it via.doc, .rtf or .pdf format. Create an extra screen to show this scenario (regular user).
Section 508 Guidelines
There are government standards for applications regarding to accessibility. Your design must meet the following requirements:
- Color coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
- Row and column headers shall be identified for data tables.
- Foreground and background color combinations should provide sufficient contrast.
About CCA Contests
- CCA (Competition Confidentiality Agreement) is required for this contest. If you don’t have a signed CCA on file you need to follow these instructions and then request for the access: http://apps.topcoder.com/wiki/display/tc/Competition+Confidentiality+Agreement+%28CCA%29
- If you have a signed CCA on file, send the access request for this project to: support@topcoder.com.
Target Audience
Internal OPM users/employees. This will not be a public facing web application.
Judging Criteria
- Section 508 Compliance.
- Originality.
- Design execution quality.
- User Experience.
Submission File
All requested contest requirements/screens as JPG or PNG files at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD files.
Preview Image
Create a 1024x1024 JPG or PNG file in RGB color mode and place a screenshot from your submission within it.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.