Challenge Summary
The FEPS Explorer project is a data maintenance and reporting application for a financial services client. It will be a web application that replaces an existing VB6 application screen for screen.
Thus, instead of wireframes, you are provided with screenshots from the existing application, along with the Application Requirements Specification and a Storyboard design.
From these you will create a navigable HTML prototype of the final application.
Prototype Details Each screen should be comprised of the navigation section on the left side and the main screen on the right. The design of the single included Storyboard should be applied across all pages. The reports pages can just contain some dummy/greeked text, as the report formats have not been determined yet. The client wants to keep this application clean and simple, as evidenced by their Storyboard selection. Target Audience This application will be used by a handful of client employees to administer their advisor and seminar information. They wish for the application to be simple and clean with nothing flashy. Storyboard Changes The field label text from the Storyboard was a bit hard to read on some laptop screens. Make it slightly darker than what is seen in the Storyboard. Required Pages The prototype must contain all screens described in the document (Morpheus_FEPS_Explorer_ARS.doc) the client has provided. The look and feel of this prototype must match the provided Storyboards. Required Page list: 2.1 New Organization 2.1 Edit Organization 2.2 New Contract 2.2 Edit Contract 2.3 New Contract Exception 2.3 Edit Contract Exception 2.4 New Contract Charges 2.4 Edit Contract Charges 2.5 New Contract Subsidy 2.5 Edit Contract Subsidy 2.6 New Plan Sales 2.6 Edit Plan Sales 2.7 New Location 2.7 Edit Location 2.8 New Site 2.8 Edit Site 2.9 New Seminar 2.9 Edit Seminar 2.10 View Advisor 2.11 View Advisor Charges 2.12 View Company Billing 2.13 New Payment Master 2.13 Edit Payment Master 2.14 New Payment Assignment 2.14 Edit Payment Assignment 2.15 Seminar Score Report Options 2.15 Seminar Score Report 2.20 Search Results Note there are several other reports specified in the requirements (2.16-2.19), but you only need to create the first one for this prototype. Also note that the Manage Views page listed in 2.19 is actually just the left-hand navigation, as shown in the storyboard. It does not need to be a page of its own. The search inputs listed in 2.20 should just be added at the bottom of that navigation panel. Please ask questions in the forum. HTML/CSS Requirements Your HTML should be structured so that there is a common structure for each page with common headers and footers. 1. Your HTML code must be XHTML 1.0 Strict compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Javascript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are encouraged to use the jQuery javascript library for this competition.
Entries must be your original work, and must not infringe on the copyright or licenses of others. Stock art, clip art, templates and other design elements from other sources are prohibited unless specifically permitted here in the Contest Details.
Prototype Details Each screen should be comprised of the navigation section on the left side and the main screen on the right. The design of the single included Storyboard should be applied across all pages. The reports pages can just contain some dummy/greeked text, as the report formats have not been determined yet. The client wants to keep this application clean and simple, as evidenced by their Storyboard selection. Target Audience This application will be used by a handful of client employees to administer their advisor and seminar information. They wish for the application to be simple and clean with nothing flashy. Storyboard Changes The field label text from the Storyboard was a bit hard to read on some laptop screens. Make it slightly darker than what is seen in the Storyboard. Required Pages The prototype must contain all screens described in the document (Morpheus_FEPS_Explorer_ARS.doc) the client has provided. The look and feel of this prototype must match the provided Storyboards. Required Page list: 2.1 New Organization 2.1 Edit Organization 2.2 New Contract 2.2 Edit Contract 2.3 New Contract Exception 2.3 Edit Contract Exception 2.4 New Contract Charges 2.4 Edit Contract Charges 2.5 New Contract Subsidy 2.5 Edit Contract Subsidy 2.6 New Plan Sales 2.6 Edit Plan Sales 2.7 New Location 2.7 Edit Location 2.8 New Site 2.8 Edit Site 2.9 New Seminar 2.9 Edit Seminar 2.10 View Advisor 2.11 View Advisor Charges 2.12 View Company Billing 2.13 New Payment Master 2.13 Edit Payment Master 2.14 New Payment Assignment 2.14 Edit Payment Assignment 2.15 Seminar Score Report Options 2.15 Seminar Score Report 2.20 Search Results Note there are several other reports specified in the requirements (2.16-2.19), but you only need to create the first one for this prototype. Also note that the Manage Views page listed in 2.19 is actually just the left-hand navigation, as shown in the storyboard. It does not need to be a page of its own. The search inputs listed in 2.20 should just be added at the bottom of that navigation panel. Please ask questions in the forum. HTML/CSS Requirements Your HTML should be structured so that there is a common structure for each page with common headers and footers. 1. Your HTML code must be XHTML 1.0 Strict compliant 2. Validate your code - we will accept minor validation errors, but please comment your reason for any validation errors. Validate your code against this link http://validator.w3.org/ 3. Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). 4. Proper use of structural CSS to lay out your page is strongly encouraged. 5. No inline CSS styles - all styles must be placed in an external stylesheet. 6. Use semantically correct tags - use H tags for headers etc 7. Use strong and em tags instead of bold and italic tags 8. Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent 9. Label all CSS, Javascript, or HTML *hacks* with explanations so others will understand. 10. Only use table tags for tables of data/information and not for page layout. 11. Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. Javascript All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. You are encouraged to use the jQuery javascript library for this competition.
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.