Challenge Overview

Project Overview:

Welcome to the FAST!! 24 Hours - WGL Mobile App UI Prototype Update! The goal of this challenge is to update existing Responsive HTML5 Mobile App Prototype based on updated 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 this is FAST challenge 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 update existing Responsive HTML5 Mobile App prototype based on the updated 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).

Required Pages:

Below are the required pages in both Portrait and Landscape orientations. This prototype should support retina display, please follow existing prototype implementations.

1. Dashboard Page:

  • Update the tab background as per new design (02B_dashboard).
  • Add status to each row on my open looks (02B_dashboard).
  • Show initial status as "Please Set Status".
  • Use warning icon against status issues as shown in storyboard design.
  • Click on status of a Look, show user status popup (02A_2_dashboard) - use following statuses.
    • Completion within due date - (without icon)
    • Completion outside of due date
    • Appointment Scheduled - (without icon)
    • Contact unreachable
    • Address issue
    • Issue-Contact Me
    • Oops! - Un-assign Mel
  • On popup, show currently selected status as shown in screen (02A_2_dashboard).
  • Add close icon 'X' at top-right corner to close the status popup.
  • Once user has changed their status, show another popup with message "Successfully updated the status and an email sent to supportteam@wegolookpro.com." with "OK" button.
  • Click on "OK" button navigate to dashboard page.

2. Look Questions Review:

  • On Photos section (07_Look_details_review), show previous/next images on swapping to left/right of current image.
  • Show all images uploaded in step "Look Photos" with text as "m/n name of the image" (Example in storyboard - 2/30 Left Side).
  • Disable "Submit Report" button until user has checked the checkbox at buttom.
  • Follow the disable color style on this prototype for the "Submit Report" button.
  • On submit show successful message with "OK" button.
  • Click on "OK" button navigate to dashboard page.

3. Settings Page:

  • Remove “Open Look Push Notifications” as this is not relevant to the first phase (09_settings).

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:

Follow existing prototype.

JavaScript Requirements:

Follow JavaScript libraries used in the existing prototype.

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
  • Existing prototype file: Prototype.zip


Final Submission Guidelines

Submission Deliverables:

Final Submission:

ELIGIBLE EVENTS:

2014 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30041277