Challenge Summary
Budget Stacker Project aims to create a browser-based (web) tool for the U.S. underbanked consumer market. It consists of two part, consumer application and admin application. In this contest, you need to build a HTML prototype for customer application.
The storyboard, wireframe and application requirement specification will be provided.
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.
The application provides a lot of tips/actions/advices how to optimize regular expenses to the consumer. Those advices are graphically illustrated and visually inform the consumer several ways to achieve better financial status, or got some excellent things (like a new car) by saving on some not important things (like remove the morning premium coffee by a cereal with milk). The goal of this contest is to produce the HTML and CSS that accurately captures the information from the provided wireframes and color/styles from the provided storyboard. You should analyze all sections of the provided wireframes and ask questions in the forum for anything that is unclear. DEVELOPMENT CONSIDERATIONS: All pages in wireframe will be implemented. The workflow should follow the sitemap in wireframe and ARS. You should focus on the following screens: Login if failed , goto login failed page, page style should refer 01_login_bugrace.png in storyboard Logout return to login page, the page frame should follow the 01_login_bugrace.png in storyboard, Register if failed , goto Register Error page, the page frame should follow the 01_login_bugrace.png in storyboard, Unregister if failed , goto Unegister Error page, the page frame should follow the 01_login_bugrace.png in storyboard, View Profile the page frame should follow the 01_login_bugrace.png in storyboard, Edit Profile Including , edit profile succesfully, edit profile error,change password, change password succesfully,change password error1,change password error2, the page frame should follow the 01_login_bugrace.png in storyboard, Select Category The page style should close the 02_category_bugrace.png as possible as you can. Answer Survey Including multiple selection, manual entry, error page. Follow the 03_survey2_bugrace2png Get Categorized Profile Please refer the 04_categoryprofile2_bugrace.png View Comparison Results Including different mode under different question numbers. Refer the 05_View Comparison1_bugrace.png, 06_View Comparison2_bugrace Get Advertisements It should display in Select Category, Get Categorized Profile and View Comparison Results page Print Results The prototype can display correctly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. SPECIFIC HTML/CSS REQUIREMENTS: - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - 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. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - If alpha channel PNGS are used be sure to include script to use filters for IE 6 - Do not use graphical text (for buttons use the graphics as backgrounds) - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. JAVASCRIPT: You are allowed to use the jQuery javascript library for this contest. You may use existing jQuery plug-ins to achieve the desired effect, but submissions that are completely original and do not require additional libraries beyond the core jQuery library will be viewed more favorably. 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. JUDGING CRITERIA: Your submission will be judged on the following: - How closely the prototype matches the provided storyboards (excluding those to be removed) - How well items are styled that are not provided in the storyboards - Cleanliness and organization of source code
The application provides a lot of tips/actions/advices how to optimize regular expenses to the consumer. Those advices are graphically illustrated and visually inform the consumer several ways to achieve better financial status, or got some excellent things (like a new car) by saving on some not important things (like remove the morning premium coffee by a cereal with milk). The goal of this contest is to produce the HTML and CSS that accurately captures the information from the provided wireframes and color/styles from the provided storyboard. You should analyze all sections of the provided wireframes and ask questions in the forum for anything that is unclear. DEVELOPMENT CONSIDERATIONS: All pages in wireframe will be implemented. The workflow should follow the sitemap in wireframe and ARS. You should focus on the following screens: Login if failed , goto login failed page, page style should refer 01_login_bugrace.png in storyboard Logout return to login page, the page frame should follow the 01_login_bugrace.png in storyboard, Register if failed , goto Register Error page, the page frame should follow the 01_login_bugrace.png in storyboard, Unregister if failed , goto Unegister Error page, the page frame should follow the 01_login_bugrace.png in storyboard, View Profile the page frame should follow the 01_login_bugrace.png in storyboard, Edit Profile Including , edit profile succesfully, edit profile error,change password, change password succesfully,change password error1,change password error2, the page frame should follow the 01_login_bugrace.png in storyboard, Select Category The page style should close the 02_category_bugrace.png as possible as you can. Answer Survey Including multiple selection, manual entry, error page. Follow the 03_survey2_bugrace2png Get Categorized Profile Please refer the 04_categoryprofile2_bugrace.png View Comparison Results Including different mode under different question numbers. Refer the 05_View Comparison1_bugrace.png, 06_View Comparison2_bugrace Get Advertisements It should display in Select Category, Get Categorized Profile and View Comparison Results page Print Results The prototype can display correctly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. SPECIFIC HTML/CSS REQUIREMENTS: - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - 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. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - If alpha channel PNGS are used be sure to include script to use filters for IE 6 - Do not use graphical text (for buttons use the graphics as backgrounds) - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. JAVASCRIPT: You are allowed to use the jQuery javascript library for this contest. You may use existing jQuery plug-ins to achieve the desired effect, but submissions that are completely original and do not require additional libraries beyond the core jQuery library will be viewed more favorably. 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. JUDGING CRITERIA: Your submission will be judged on the following: - How closely the prototype matches the provided storyboards (excluding those to be removed) - How well items are styled that are not provided in the storyboards - Cleanliness and organization of source code
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.