FAST!! 96 Hours - WGL Mobile App UI Prototype

Project Overview:

Welcome to the FAST!! 96 Hours - WGL Mobile App UI Prototype! The goal of this challenge is to create a Responsive HTML5 Mobile App Prototype based on provided storyboards using AngularJS framework and Bootstrap.

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 use 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.

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

Competition Task Overview:

The main tasks of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required Mobile browsers and also make sure existing functionality should not break. This prototype should support retina display. The MOST IMPORTANT browsers (what you should test in first!) being Safari Mobile, Android Mobile & Windows Mobile Browsers (example: iPhone, Android Smart Phones, Windows Smart Phones).

PhoneGap: We will need the mobile app to be packaged using PhoneGap (http://phonegap.com). Please make sure your code should meet the PhoneGap coding standards.

Required Pages:

Below are the required pages in both Portrait and Landscape orientations. This prototype should support retina display. We would prefer to use single page app using AngularJS templates.

1. Login Page:

• User opens the application and will show the login page (01_login).
• Allow user to login and for other links use dead links for now.

2. Dashboard Page:

• Once user logs in from (01_login), navigate user to dashboard page (02_1_dashboard) with "My Open Looks" tab selected.
• User can switch the tab to "Open Looks" like the page (02_2_dashboard).
• Use "Accept" button instead on "Register", click on accept button move the entry to "My Open Looks".
• Correct the contact at fooer "Contact WeGoLook Pro Team" as "Contact WeGoLook PRO Team".
• Click on any look (Look #2911234), navigate user to look details screen (03_Look_details_info).
• Click on left navigation icon (at header top-left corner), show user menu screen (10_menu).
• Click on refresh icon (at header top-right corner), allow user to repopulate content data.
• Make sure header and footer of the screens are fixed and content will be scrollable.

3. Menu:

• Once user clicks left navigation menu icon at header, navigate user to menu screen (10_menu).
• Last page where user comes from, show that item as active menu item.
• Click on each menu item, navigate user to corresponding page.
• Click on "Log Out" from manu item, navigate user to login screen (01_login).
• Remove "My Profile" item from the menu.

4. Look Info:

• Once user selects any look from dashboard page, navigate user to look details info (03_Look_details_info).
• Show user the full content view with default scrollbar (04_Look_details_info_full).
• Click on "Next" button, allow user to navigate to look details photos screen (05_1_Look_details_photo).
• Click on back button, navigate user to previous screen.
• Allow user to navigate using top navigation buttons (Look Photos, Look Questions, Look Review).

5. Look Photos:

• Once user clicks next button on look details info or selects look photos navigation item at header, navigate user to look details photos screen (05_1_Look_details_photo).
• Click on image icon of a row, show user the view in popup (05_2_Look_details_photo) and click on continue button close the popup.
• Click on camera icon of a row, allow user to open device camera and allow user to load photo on screen (05_4_Look_details_photo).
• On this screen (05_4) allow user to add comment, show user a popup (similar to 05_2_Look_details_photo) with "Add a Comment" as title, a textbox and "Add" button.
• On this screen (05_4) allow user to retake photo and click on "Use", show user the screen (05_1_Look_details_photo) with image icon & tick mark icon against selected row.
• On this screen (05_4) allow user to cancel (at header) and show user the screen (05_1_Look_details_photo) without any changes.
• Enable the "Next" button once user selects atleast two images (for demo purpose) and allow user to navigate to next screen (06_Look_details_question).
• Click on "Previous" button navigate user to previous screen.

6. Look Questions:

• Once user completes look details photo, navigate user to look details questions screen (06_Look_details_question).
• Enable the "Next" button once user enters atleast two fields (for demo purpose) and allow user to navigate to next screen (07_Look_details_review).
• Click on "Previous" button navigate user to previous screen.
• Correct the typo on words "Additional Comment".

7. Look Review:

• Once user completes look details questions, navigate user to look details review screen (07_Look_details_review).
• Click on "Submit Report" button, navigate user to dashbaord screen (02_1_dashboard).
• Click on "Previous" button navigate user to previous screen.
• In "Photos" section show the image selected on the screen (05_4_Look_details_photo).
• Use sliced image from storyboard with text "2/30 Left Side" for demo purpose.
• Correct the typo on words "Additional Comment".
• By submitting this report…. - the L in Look is always capitalized.

8. Contact Page:

• Once user selects "Contact Support" from left navigation menu (10_menu), navigate user to contact screen (08_contact).
• Click on left navigation icon (at header top-left corner), show user menu screen (10_menu).
• Correct the title "Contact WeGoLook Pro Team" as "Contact WeGoLook PRO Team".

9. Settings Page:

• Once user selects "Settings" from left navigation menu (10_menu), navigate user to contact screen (09_settings).
• Click on left navigation icon (at header top-left corner), show user menu screen (10_menu).
• Correct the word "WIFI" as "Wi-Fi".

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 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.
• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

Font Requirements:

Use font - Arial.

JavaScript Requirements:

Use following libraries:

• jQuery
• AngularJS
• Bootstrap 3

Browsers Requirements:

• Safari Browsers on iPhone
• Android 4.1+ Chrome Browsers on Mobile
• Windows Phone IE10+ Browsers on Mobile

Documentation Provided:

Storyboard screens and PSD files: Storyboard.zip

Final Submission Guidelines

PROTOTYPE GOALS:
- The design should work with fluid/flexible nature, so the prototype supports both Portrait and Landscape orientations.
- We need clean documentation of the code as possible please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please note, the prototype should support PhoneGap implementations.
- Please use Bootstrap 3 for mobile development.
- Please use AngularJS framework for data binding.

TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.

2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.

3. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
- Please use Bootstrap 3 and AngularJS for mobile development.

4. ANGULAR JS
- Angular models are plain old JavaScript objects. Use JSON objects for data binding with view.
- Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
- Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form.
- Use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) to populate JSON data.

5. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference