FAST!! Mediafly Appirio Sales Application HTML5 Prototype Challenge

Project Overview:

Welcome to the FAST!! Mediafly Appirio Sales Application HTML5 Prototype Challenge! The goal of this challenge is to create a fully responsive HTML5 Prototype application based on provided storyboards using AngularJS framework and Bootstrap frameworks.

Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.

IMPORTART: As per the project schedules the review timelines are very close, please note the post submission timelines for further reference.

Competition Task Overview:

The main task of this competition is to develop fully responsive HTML5 Prototype based on provided storyboard designs. You need to implement click through UI Prototype as per requirements documented below and follow the branding/theme from the provided storyboard designs. Your prototype must work properly in all the required browsers listed below.

Please ask questions in forum for any clarifications needed on the spec requirements.

Note: Instead of using ngRoute of AngularJS, you could use ui-router framework for navigation (https://github.com/angular-ui/ui-router).

Required Pages:

Below are the required pages which will be developed to support responsiveness on required browsers. Please refer mobile screens for the following image file names.

1. Login Page:

• -User opens the application and will see the login page (01A ~ Login).
• -It will allow @salesforce.com or @workday.com or @appirio.com email ids only.
• -If it is a @appirio.com email, then we need to capture the password field - (refer screens "01B ~ Login (Appirio)", "01C ~ Login (Appirio)").
• -If it is a @salesforce.com or @workday.com email, then we need to capture their First Name and Last Name fields - (refer screens "01D ~ Login (Salesforce, Workday)", "01E ~ Login (Salesforce, Workday)").
• -For any other email ids, show the validation error message as per the screen (01F ~ Login (Error)).
• -In case of error, allow user to re-enter email id for validation again.
• -Once user successfully logs in, then navigate user to home page (02A ~ Home).

2. Home Page:

• -Once user successfully logs in, navigate user to home page (02A ~ Home).
• -Click on action menu at header (top-right corner), show content menu as per screen (02B ~ Home Actions Context Menu).
• -Show Sales Announcements in carousel (rotating banner).
• -Click on 'Browse All Content', navigate user to browse page (03A ~ Browse (Everything)).
• -Click on 'My Collections', show user the My Collections results screen - (similar to Browse page with few doecument items which are added to my collections).
• -Click on 'My Items', show user the 'Saved Searches' results - (similar to Browse page with some pre-selected filters).
• -Use fully responsive web design for all pages.

3. Browse Page:

• -Once user select 'Browse All Content' from home page or left nav, show user the browse page (03A ~ Browse (Everything)).
• -Load all items from the json dataset using data binding (keep static data in javascript or json file).
• -Click on show filter button, display filter section (like screen "03B ~ Browse (Filter-Expand)").
• -Click on filter dropdown, show available/selected options as shown on screen (03C ~ Filter).
• -Load all dropdown data from provided "Filter Fields.txt" file - here 'Product' dropdown is dependent on 'Partner', but the 'Vertical' dropdown data is not dependent.
• -If user selects 'Salesforce' on Partner filter dropdown, then only the dependent products will be shown on Product filter dropdown and so on.
• -Click on hide filter button after filter, then hide the filter section (like screen "03I ~ Browse (Filter-Closed)").

4. Document Detail:

• -Once user selects the document from the browse page, navigate user to document details page (04A ~ Document-Detail).
• -Make the 'Add to My Collections', 'Share' button visible while page scroll (like screen "04B ~ Document-Scrolled").
• -Click on back button at header, allow user to navigate back to previous page.
• -Once user clicks the 'Share' button on document details page, show popup for native email share window.

5. Download Page:

• -Once user clicks the action menu icon, show user the action context menu (02B ~ Home Actions Context Menu).
• -Click on download manager, navigate user to the download manager page (05 ~ Downloads).
• -Show two tabs at top - such as 'Downloading' and 'Finished'.
• -Click on documents, show user the document details page.

6. Search Page:

• -Once user clicks the search icon at header (top-left corner), show user the search page (like screen "06A ~ Search (Blank)").
• -Show search results while user types the search textbox (refer screen "06B ~ Search (Results)").
• -Show two tabs at top - such as 'Folders' and 'Items'.
• -Click on any documents, show details on the document details page.

7. Navigation:

• -Once user clicks the top-left menu icon, show user the left side navigation panel (07 ~ Navigation) - here current page icon shows in white color which means active state.
• -Click on 'My Collections', show user the My Collections results screen - (similar to Browse page with few doecument items which are added to my collections).
• -Click on 'My Items', show user the 'Saved Searches' results - (similar to Browse page with some pre-selected filters).
• -Click on 'About Appirio', show user the filtered results - (similar to Browse page with 'Appirio' selected on 'Partner' filter field).
• -When a user selects ‘Contact Us’ it launches their native mail app and preloads the "To" field with "saleskit@appirio.com".

Specific HTML/CSS/JavaScript 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 lay out 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.

Font Requirements:

Use font - Arial.

JavaScript Requirements:

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. We would like to use following JavaScript libraries:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

We would like to support following desktop browsers on Windows/Mac (landscape) and mobile browsers on iPhone(portrait)/iPad(portrait & landscape).

• Latest Chrome Browsers
• Latest Safari Browsers
• iPhone 6 and iPad Safari Browsers

Documentation Provided:

Please register to see attached documents.