Challenge Overview
Project Overview:
Welcome to Auto CMO - Excel Tool Replacement UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for an application using the provided "Auto CMO" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 UI Prototype based on the provided Storyboard design by using industry standard best practices.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This application will be using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Required Pages:
1. Home – Normal User:
Please refer to 02-1a-Home-Analyst-default.png.
- Please implement pagination and go to page.
- Please capture welcome {username}, notifications and logout at the top of the page.
- Please show hover styling (02-2-Home-Analyst-hovering-button.png).
- Please show hover over tab style (02-6a-Home-Analyst-hover-tab.png).
- User will be able to import file. If this is clicked user will be redirected to add data file page (02-3a-Home-Analyst-show-import-data.png).
- User will be able to select data file date using a calendar and browse his machine to select the data file. (02-4a-Home-Analyst-show-calendar.png).
-- Show a warning if the data is already present for a given day (02-4b-Home-Analyst-show-calendar-warning.png).
- The two taps we have here will show same data. (05-Home-analyst-security-tab.png).
- User will be able to filter the data files and print them. (02-5a-Home-Analyst-show-filter.png).
- User will be able to edit the comments on each row in the table when user clicks the edit icon and save his edits.
- User will be able to expand data file information.
- If you click on CUSIP link you will see the related data to it on the right side. (02-6b-Home-Analyst-field-value.png).
- User can view field value (02-6b-Home-Analyst-field-value.png).
- User can edit comment (02-7a-Home-Analyst-edit-comment.png).
2. Home – Admin User:
Please refer to 03-1a-Home-admin-default.png.
- Almost same as normal user.
- Admin can update limit value.
- Admin can manage status option (03-1b-Home-admin-show-manage-status-option.png).
- Admin can edit status option (03-1c-Home-admin-show-edit-and-set-an-option-as-default.png).
3. Home – Read Only:
Please refer to 04-1-Home-Read-only.png.
- Almost same as normal user.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practice
- 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 layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- jQuery
- AngularJS
- Bootstrap 3
Browsers Requirements:
- Firefox, Safari & Chrome Browsers.
- IE latest browser.
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.