Challenge Summary
Welcome to Journal Facility Storyboards Design contest. We want you to design web pages for a web application that follows the IBM design patterns and standards. There are source files attached from the previous contest; you need to continue with the same look and feel to complete the new pages.
Round 1
1) Admin User
- Update the main menu options
- Create Journal
- Show how Create New Journal option works
- Show how the Import Journal option works
- Show the Imported Journals
- Journal Details (To Be Processed)
- Report
- Show Chart and Table view
- Manage Essbase (show Server tab only)
- User Roles
- Settings
Round 2
Final design will contain all the required screens from “Storyboard Design Requirements” section plus any updates from client feedback.
The primary goal of this contest is to design the look and feel of some pages that belong to a web application that convey the IBM web design patterns and standards, which means all styles and branding guidelines are defined; also, there is an existing design (source files attached), you need to create the remaining pages from the wireframes, see requirements description below.
The users of this application will be IBM employees, which makes very important to follow IBM web standards (see “About IBM W3 Standards” below).
Branding and Guidelines
- FOLLOW IBM W3 STANDARDS for your design (layout, colors, form elements, etc).
- The design should be simple and easy to understand. Avoid over populating spaces with too many form elements.
- Your design must fit 1024 pixels wide screen resolution.
- Use web-safe fonts for the pages content.
- Use the same naming system from the original source files PAGE-SUBPAGE.SCREENNAME. Sample: 10-1.Journal Details_Non-CHQ.png
Storyboard Design Requirements
In your submission, you need to create the necessary screens to show the following workflows from the wireframes.
Overall
- Show how internal forms interact with the user.
- Show all the popups that are triggered in the required screens.
- Show possible notification, error or success messages.
1) Admin User
- The Journal Lists overall scheme is the same for all users; you should duplicate any of the existing source files to make this easier.
- Update the main menu options
- Create Journal
- Show how Create New Journal option works
- Show how the Import Journal option works
- Show the Imported Journals
- Journal List (To Be Processed tab)
- Journal Details (To Be Processed)
- Report
- Show Chart and Table view
- Manage Essbase
- Show all tabs and their content
- Show retrieve data progress bar, add/edit overlays
- User Roles
- Settings
2) Omnipotent User
- This is the same than Admin User with some minor updates. You can just duplicate your Admin User file and make the necessary adjustments.
- Update the main menu options
- Journal List
- Show the following tabs and their content: Draft, Submitted, and Awaiting Approval.
- Report (duplicate/rename, same as Admin)
- Manage Essbase (duplicate/rename, same as Admin)
- User Roles (duplicate/rename, same as Admin)
- Settings (duplicate/rename, same as Admin)
3) CHQ Approver User
- Update the main menu options
- This is the same than Non-CHQ Approver User which already exists with some minor updates. You can just duplicate the existing Non-CHQ Approver PSD files and make the necessary adjustments.
- Journal List (same as Non-CHQ Approver)
- Show the following tabs and their content: Draft, Submitted, and Awaiting Approval.
- Show filters on all the tabs that has filters
- Create Journal (for all types – duplicate/rename, same as IBM User)
- Modify Journals (Awaiting Approval – duplicate/rename, same as Non-CHQ Approver)
- Journal Details (Awaiting Approval – duplicate/rename, same as Non-CHQ Approver)
- Show all type of journal details: 1 to 1, 1 to x, exception, the 4 inner tabs and their content.
4) FYIer User
- This is the same than IBM User which already exists with some minor updates. You can just duplicate the existing IBM User PSD files and make the necessary adjustments.
- Update the main menu options.
- Show Journal Lists (duplicate/rename, same as IBM User)
- Show all tabs and their content (Draft, Submitted, Awaiting Approval, Approved, Rejected, In Process, Processed, and Failed).
- Show filters on all the tabs that has filters
- Create Journal (duplicate/rename, same as IBM User)
- Show all the journal types: 1 to 1, 1 to x, exception.
- Show months on the bottom table, add account, add unit type, etc. Show all the required interactions inside this form.
- Modify Journals (duplicate/rename, same as IBM User)
- Journal Details
- Show all type of journal details: 1 to 1, 1 to x, exception, the 4 inner tabs and their content.
About IBM web standards
- IBM provides these standard guidelines for web purposes. You can access this documentation here: http://topcoder.com/ibm/v17-v2l/w3.the.ibm.com/ibmweb/standards/v17/us/en/index.htm. If you can’t access the provided link follow the instructions below.
- CCA (Competition Confidentiality Agreement) is required. If you have a signed CCA on file, send the access request to: support@topcoder.com.
- 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
- Keep your attention at “Page elements” on the left menu of the documentation. Those are the ones you should pay more attention (page layout samples, forms, tabs, etc). You’re free to explore the whole documentation anyway.
- Use the IBM w3 default masthead in your design.
- Use the IBM w3 footer bar in your design.
- There is a defined color palette in the docs.
- There are guidelines for basic page elements, such as: pagination, tables, message formats (error, warnings, etc), breadcrumbs, and icons. Take advantage of those elements.
- Limited use colors are to be used sparingly to identify errors, required form label asterisks, call attention to "new" or important content items or to call out important data.
- Accent colors are to be used only when necessary to differentiate between the contents of various table cells.
Target Audience
The main users of this tool would be financial planners and executives.
Judging Criteria
- Follow the IBM W3 web design patterns and standards.
- Quality of design.
- 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.