Seto - Account Report Card UI Prototype Contest

Our client has an application that basically supports sales, marketing and executive team. In this application there is a part of application that is called Account Report Card. This report card is a way to capture key qualitative and quantitative information of certain accounts. Sales is responsible for this and account report card itself is used to report up to executive team.

We already has the storyboard of this application and in this contest we need your help to convert it into working prototype. There are some plugins that are needed to implement the prototype. Following are details requirements for the prototype:

• General Guidelines
  • There are 2 pages you need to create, named them as index.html (segment details.png) and summary.html (account summary.png).
  • The background should be fluid and the content should be fixed horizontally and fluid vertically (depends on content length).
  • Set all links at header and footer as well as left navigation as deadlink.
  • Implement left navigation using Accordion style.
  • Implement hover state for all buttons using reverse background.
  • Implement a nice transition when switching between the tab, close/open Qualification Status and all sections show in screen 09 Account Summary.
  • Implement all charts using plugin from Highcharts and JSGantt.
  • You can use browser based input field and text area for section Where We Stand.
• 01 Segment Detail
  • There are 5 tabs Mission Critical, Business Critical, Retail, Mobile and Other, all of them contains same content as shown in Mission Critical.
• 02 Segment Detail with Popups
  • If Competitor Share pie chart is clicked, shows a popups as shown in this screen, shows the value to be updated in integer value. If Save button is clicked, the chart should represents the updated value. The updated value is in integer. But the value shown in Pie Chart should be in percent.
  • If hover on timeline on Gantt Chart, shows a popups as shown in this screen.
• 03 Gantt Chart with Modal Discussion
  • If Comment column is clicked in Gantt chart, shows a popups as shown in this screen.
  • You can use browser based text area in this popups.
  • Qualification status is collapsable as shown in screen 04 Qualification Status Closed.
  • If Comment is added, shows comment icon as shown in First task name - Sub task 2.
  • Task name and sub task name in Qualification status can be edited directly in the table.
  • A task is added by filling the last row in the table.
  • A sub task is added by double click on a task and add new row below the last sub task in that task.
• 04 New Note
  • Shows a popups as shown in this screen if Attachement column in Qualification Status table is clicked.
  • This popups also need to be shown if New Note and Attach File icon is clicked in Notes and Document section.
  • In New Note popups, demonstrate the browse functionality, shows full path of the file in Attach Document field if there is file is selected. If Upload button is clicked, add the file name (only file name, not fully path) in the field below it.
  • Demonstrates usage of icon for each of file type (.doc, .ppt, .pdf).
• 08 Segment Detail Alternative Account Summary
  • If Circle View is clicked, Account Summary should change it view as shown in this screen. If Dot View is clicked, change Account Summary view as shown in screen 01 Segment Details.
  • Each circle and dot in Account Summary could change its color when it is clicked. The color change is from Green, Yellow and Red. Implement this functionality as well as into Report Card Trends section.
  • Comment in Report Card Trends could be edited directly in the row.
• If Summary button (screen 11 Button Summary) is clicked, will go to screen 09 Account Summary. If Go Back link (screen 09 Account Summary) is clicked, go to screen 01 Segment Detail.

MAKE SURE TO WATCH CONTEST FORUM FOR ANY ADDITIONAL REQUIREMENTS AND CLARIFICATIONS THAT MAY BE ISSUED.

Final Submission Guidelines

Following are specific requirements for HTML, CSS and Javascript files:

• Your HTML code must be XHTML 1.0 Strict compliant
• Validate your code, reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tabular data and not for page layout.
• No inline CSS styles, all styles must be placed in an external stylesheet.
• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• 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".
• 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 allowed to use the JQuery JavaScript library for this contest.

Your submission must works on browser in the list below:

• IE7+
• FF 3+ Mac & PC
• Safari 4 Mac & PC
• Chrome Mac & PC

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.