Challenge Summary
Welcome to OPM Storyboards Contest Part 3. 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) Suspense (Wireframes: Admin > Suspense)
- Double click on table records to edit.
- Show Transfer Payment workflow.
2) Approval (Wireframes: Admin > Approval)
- Show all three tabs and their content.
- Show Disapprove Selected workflow.
3) Payments (Wireframes: Admin > Payments)
- Show click to select records.
- Show Audit Trail.
4) Tools (Wireframes: Admin > Tools)
- Show all three tabs and their content.
5) Admin (Wireframes: Admin > Admin)
- Show all tabs and their content except for Remake GL (ignore it).
- On User Permissions, double click data table entry to edit.
- Pay attention to these instructions (not in wireframes):
- Add "Manage Business Rules" as a sub-tab under "Admin" page.
- When clicked, it opens a sub-tab to manage business rules.
- In the sub-tab, there should be a UI that allows users to:
- There should be links or features to add/edit/delete business rules.
- Select from a list (Business Rule A, Business Rule B, Business Rule C).
- Once they’ve selected a Business Rule, they can modify the rule.
- A business rule has three fields: name, calculations and interest rates.
- Create screens to view/edit business rules.
6) Notification Log (Wireframes: Admin > Notification Log)
- Show all three tabs and their content.
- Show pagination workflow.
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.