Challenge Overview
Project Overview:
Welcome to the eBay Get IT Help Mobile UI Prototype Update! The goal of this challange is to update the existing (provided) HTML5 Prototype based on NEW updated storyboard designs for eBay's "Get Help" Responsive Mobile App using Angular JS and Bootstrap frameworks.
As part of this contest 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 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 schedule the review timelines are very close. Reviewers please note the review timelines for further reference.
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 tasks of this competition is to update and develop a Responsive HTML5 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. 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. Please update the existing prototype pages with new storyboard designs/styles where ever it is required. You have to make sure to replace existing code with new code and also remove unused code in the submission.
1. Dashboard:
- Customer opens the application and will show the activation page (01-1a-Dashboard).
- Click on "Activate" button, navigate user to the success page (01-1b-Dashboard).
- Click on "Continue" button, navigate user to the landing page (01-1c-Dashboard).
- Click on "Get Help" button, navigate user to request selection page (01-2-Dashboard-ver2).
- User tap on by 'SMS' option will show the confirm screen (01-3-Dashboard) and click 'Yes' will show 'SMS Flow' screen (02-1-SMS_Flow).
- User tap on by 'OnSite' option will directly show 'OnSite Flow' screen (03-1-OnSite).
- User tap on by 'Phone' option will show the confirm screen (01-4-Dashboard) and click 'Yes' will show 'Phone Flow' screen (04-1-Phone_Flow).
- Click 'No' buttons will navigate back to available options (01-2-Dashboard-ver2).
- Click on camera icon, show user the device camera to capture photo/image (01-5a-Dashboard) - let us know in forum if you are facing any difficulties to implement these features in HTML5 browsers.
- After capturing photo/image, show in the page (01-5b-Dashboard) and also allow user to take another photo.
- Click on back buttons, navigate user to request selection page (01-2-Dashboard-ver2).
2. SMS Flow:
- This screen shows after customer selects on the 'SMS' option (02-1-SMS_Flow) and show waiting preloader (use provided gif file or use CSS3 features to implement this preloader).
- After few second, show user the response page (02-2-SMS_Flow).
3. OnSite Flow:
- This screen shows after customer selects on the 'OnSite' option (03-1-OnSite).
- On location buttons selection, show user corresponding pages (03-2-OnSite, 03-3-OnSite) - use updated screens.
- On selecting 'No' option on pages (03-2-OnSite, 03-3-OnSite), toggle these two pages.
- On selecting 'Yes' option, navigate user to waiting screen (03-4-OnSite) and show waiting preloader (use provided gif file or use CSS3 features to implement this preloader).
- In case of current location, show user the location details screen (03-3-OnSite-details, use text filed lebel as "Additional Details") and on send navigate user to waiting screen (03-4-OnSite) and on cancel navigate user to previous page (03-2-OnSite) - use updated screens.
- After few second, show user the response page (03-5-OnSite) with request received as active and after few seconds show other two items.
- After few second, show user 3rd item as active as on screen (03-6-OnSite).
- Click on "Visit Complete", navigate user to (03-7-OnSite) and allow user to rate this visit.
4. Phone Flow:
- This screen shows after customer selects on the 'Phone' option (04-1-Phone_Flow) and show waiting preloader (use provided gif file or use CSS3 features to implement this preloader).
- After few second, show user the response page (04-2-Phone_Flow).
5. Feedback Flow:
- Customer would receive a message to rate the service the technician gave during their encounter (05-1-Feedback_Flow) - use page url to load this page directly.
- On clicking the link received, show user the rating page (05-2-Feedback_Flow) and on submit show the success message - use page url to open this page from previous page.
6. Tech Flow:
- We have some updates on existing pages (06-2-Tech_Flow, 06-3a-Tech_Flow) with new designs/styles - use direct url to load this page.
- Click on "Rewards" button, show user the rewards page (06-3b-Tech_Flow).
- Click on "Accepted Request" button, show user the confirmation popup (06-4-Tech_Flow), on clicking 'Yes' show user the screen (06-5-Tech_Flow).
- Click on "Start" button, show user the request received page (06-6a-Tech_Flow).
- Click on "On My Way" button, show user the my way status page (06-6b-Tech_Flow).
- Click on "I'm here" button, show user the summary page (06-6c-Tech_Flow).
- Click on "Scan QR Code" button, navigate user to scan process as per existing prototype pages (06-7-Tech_Flow, 06-8-Tech_Flow) and also show successful summary page (06-9-Tech_Flow).
Notification Alerts:
- Show notification alerts on screen (01-1c-Dashboard) and click on notification alerts icon, show user the notification popup (01-1d-Dashboard) and on close button click close the popup - use alert icon same as 01-1c-Dashboard screen.
- All other pages, show up notification alerts icon dynamically after some configurable time and also should function same way to toggle the popup - if possible use common placeholder for this notification alerts icon.
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:
Browsers Requirements:
- Safari Browsers on iPhone
- Android 4.1+ Chrome Browsers on Mobile
- Windows Phone IE10+ Browsers on Mobile
Documentation Provided:
- Existing Prototype: Prototype.zip
- 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 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