Challenge Summary
Welcome to Journal Facility Storyboards Design contest. We want you to come up with the look and feel of this web application, a design that follows the IBM design patterns and standards. It’s quite simple, all visual styles and branding are already defined. You'll design 6 unique pages only. The rest of them are just variations (repetition) with adjusments to make.
Round 1
For your R1 deliverables please submit following screen for client review:
1) IBM User
- Journal List (Draft tab only)
- Create Journal
- Journal Details
- Modify Journals (Draft only)
2) Non-CHQ Approver User
- Journal List (Awaiting Approval tab only)
- Modify Journals (Awaiting Approval only)
Number your screens (01, 02, 03 etc.) – it’s easier to review.
Round 2
Final design will contain all the required screens plus any updates from client feedback.
1) IBM User (all features from the contest description)
2) Non-CHQ Approver User (all features from the contest description)
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 a web application that convey the IBM web design patterns and standards, which means all styles and branding guidelines are defined, ready to follow. There is an existing desktop application that provides an approval and tracking process for submitted journal requests. We’re creating a web version of this tool.
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.
Storyboard Design Requirements
There are several user roles in this application. You won’t design them all because some functions are repeated among the users. In your submission, you need to create the necessary pages 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) IBM User
- Journal List
- Show all tabs and their content (Draft, Submitted, Awaiting Approval, Approved, Rejected, In Process, Processed, Failed)
- Show filters on all the tabs that has filters
- Create Journal
- Show months on the bottom table, add account, add unit type, etc. Show all the required interactions inside this form.
- Journal Details
- Modify Journals (show the screens below for this user only)
- Modify Draft Journal
- Modify Rejected Journal (show the view reason overlay)
- Modify Failed Journal (show the view reason overlay)
- Roles
- Show all tabs and their content, filters, etc.
- Help
2) Non-CHQ Approver User
- Journal List
- Show all tabs and their content. Notice you don’t need to show tabs for users that are not enabled to click that tab. For instance, Non-CHQ Approver User can't open Approved Journals, so don't show that tab in the UI.
- Show filters on all the tabs that has filters
- Create Journal (for all types: 1 to 1, 1 to x, exception)
- Modify Journals (show the screens below for this user only)
- Modify Draft Journal
- Modify Awaiting Approval Journal
- Journal Details (Awaiting Approval)
- 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://www.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”. 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.