Challenge Summary
Welcome to OPM Storyboards Contest. We need you to come up with the look and feel of a business web application.
Round 1
For your R1 deliverables please submit the following pages:
1) Create New Account (1.1 and 1.2 only - ignore 1.3 and 1.4 for round 1)
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the requested screens plus any updates from client feedback.
1) Create New Account
2) Help
Feel free to add some notes (jpg or text file) to comment your design features for the client.
Number your screens (01, 02, 03 etc.) – it’s easier to review.
The primary goal of this contest is to design the look and feel of the OPM legacy application. Recently we ran several wireframes contests and now we have a polished output you will use as guidance for workflow, layout, navigation and data. We need you to come up with a professional look.
We expect to create a very clean design, modern, with clear hierarchy and trustworthy.
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.
- Use the attached logo (OPM Logo.eps).
- Colors are open to designers. Consider the target audience of this application and logo colors. It must be pleasant and easy to use.
- 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) Create New Account (Wireframes: Admin > Create New Account)
- Show the status bar popup at the bottom.
- Show the notifications popup at the top.
- Make sure to complete all four steps/tabs, Basic Info, Service History, Notes, Finish.
1.1) Basic Info
- Show Date calculator interaction.
- Show UI Form error (Next button, fields not valid).
1.2) Service History
- Show New Version workflow.
- Double click on table records to edit.
- Show Validate Entries error.
- Show Calculation buttons interactions.
- Show Expand calculation.
- Show Sample Initial.
1.3) Notes
- As the wireframes.
1.4) Finish
- As the wireframes
2) Help (Wireframes: Admin > Help)
- The help version from wireframes is “very desktop”. Think of a better solution for web purposes.
- Use ServiceCreditHelp.zip for content guidance. You don't need to add all the screens from there, just a few examples for your web version of help.
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.