Challenge Overview
Project Overview:
Welcome to the Fast 72 Hours Blue Arrow UI Prototype Challenge! The goal of this challenge is to create an HTML5 Prototype application for iPad based on provided storyboards for Blue Arrow Application. The prototype must follow our standards and our guidelines. Please see more details below.
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 is using Bootstrap 3 (http://getbootstrap.com/getting-started).
IMPORTANT: As per the project schedules the review timelines are very close. Reviewers please note the review timelines for further reference. Please request us if you need additional time for review in case we get more number of submissions.
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:
- Note: iPad Landscape and Portrait mode need to be supported.
1) Loading page:
- blueArrow-ipad-01-loading@2x.png
- User opens the application and will see loading page.
- The text is image based.
- After the application finished loading (after 5 seconds) the user will be redirected to Login page.
2) Landing page:
- blueArrow-ipad-02-buttons@2x.png
- We will have 3 buttons here
-- Log In, clocking on login will redirect user to welcome page.
-- Register (dead link)
-- Help (dead link)
3) Welcome page:
- blueArrow-ipad-03-welcome@2x.png
- Header is fixed, and blueArrow logo is image based.
- Footer will be a carousel with 6 items (auto rotation and the user can use next previous arrows too).
- We will have 8 icons here (The icons are image based):
-- Search Jobs, clicking on this will redirect user to search jobs page.
-- Job Opportunities (dead link).
-- Messages (dead link).
-- My Profile, clicking on this will redirect user to my profile page.
-- Request Holiday (dead link).
-- Timesheet, clicking on this will redirect user to timesheet page.
-- Assignment Details (dead link).
-- Settings (dead link).
4) My Profile page:
- blueArrow-ipad-04-myprofile@2x.png
- Notice the main menu will contain the same options like welcome page:
-- Search Jobs, clicking on this will redirect user to search jobs page.
-- Job Opportunities (dead link).
-- Messages (dead link).
-- My Profile, clicking on this will redirect user to my profile page.
-- Request Holiday (dead link).
-- Timesheet, clicking on this will redirect user to timesheet page.
-- Assignment Details (dead link).
-- Settings (dead link).
-- Logout will take the user back to landing page.
- For profile:
-- All edit, delete and add new buttons are dead links.
-- .doc and .jpg files are dead links.
-- Skills are dead links.
5) Search Job page:
- blueArrow-ipad-05-searchJobs@2x.png shows the filter options expanded.
- blueArrow-ipad-05b-searchJobs@2x.png shows the filter options collapsed.
- Search and Reset are dead links.
- All filter options are drop down list except for Enter Search filed it will allow the user to enter text.
6) Timesheet page:
- blueArrow-ipad-06-timesheet@2x.png
- Notice the active day state.
- All buttons are dead links.
- User should be able to select the date by clicking on the arrows or select the day.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- You are allowed to use JQuery for this contest.
- Bootstrap 3
Browsers Requirements:
- Safari Browsers on iPad.
- Chrome Browser on iPad.
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.