Challenge Overview
Project Overview:
Welcome to the eBay YJMMD Responsive UI Prototype Challenge! The goal of this challenge is to create HTML5 Prototype based on provided storyboards for eBay's "You Just Made My Day" Responsive Application using Angular JS and Bootstrap frameworks.
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 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.
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:
Below are the required pages for both Desktop and Mobile.
Note: We need everything wrapped inside a DIV as we will be dropping this application into an existing site.
Desktop:
1. Dashboard:
- User opens the application and will see landing page (desktop_01.png).
- Clicking on "Share the Love" button will take the user to select a card page (desktop_02-1.png).
- Clicking on "Need Inspiration?" button will navigate user to inspiration gallery page (desktop_05.png).
- Clicking on "How Does it Work" button will navigate user to how does it work page (desktop_06-1.png).
- Clicking on "News Feed" button will navigate user to news feed page (desktop_07.png).
- Notice that we have a sticky footer.
2. Select a Card:
- This screen (desktop_02-1.png) is shown after user clicks on "Share the Love" button in landing page.
- Clicking on the arrows will show/hide the accordion tabs (desktop_02-2.png)
- Clicking on one of the cards will take the user to edit your card page (desktop_03-1.png)
- Clicking on “You Just Made My Day” logo will open the application menu (desktop_08.png), note that this functionality should be implemented for all pages.
3. Edit Your Card:
- This screen (desktop_03-1.png) is shown after user selects a card from select a card page.
- Clicking inside “Click here to write your message” will turn the area into a text area (desktop_03-2.png)
- When you click “Done” button the text area will disappear and the message will no longer be editable unless you click inside dashed square again (desktop_03-3.png)
- When a user types the name of the post card receiver inside TO input field, then it should show all the possible matches (desktop_03-3.png)
- When a user finishes the recipient names he can delete any recipient by clicking on the x icon (desktop_03-4.png)
- Clicking on “Send” button will take the user to thank you page (desktop_04.png)
- Clicking on “Cancel” button will take the user back to select a card page (desktop_02-1.png)
4. Thank You:
- This screen (desktop_04.png) is shown after user sends a card from edit your card page.
- Clicking on “Send Another” button will take the user to select a card page (desktop_02-1.png).
5. Need Inspiration:
- This screen (desktop_05.png) is shown after user clicks on “Need Inspiration?” button in footer.
6. How Does it Work:
- This screen (desktop_06-1.png) is shown after user clicks on “How Does it Work?” button in footer.
- This page will contain a carousel that explains how this application works (desktop_06-1.png, desktop_06-2.png, desktop_06-3.png)
7. News Feed:
- This screen (desktop_07.png) is shown after user clicks on “News Feed” button in footer.
8. Main Navigation:
- This screen (desktop_08.png) is shown after user clicks on “You Just Made My Day” logo.
- Select a Card should link to select a card page (desktop_02-1.png).
- How it Works should link to how does it work page (desktop_06-1.png).
- Inspiration Gallery should link to need inspiration page (desktop_05.png)
Note: The workflow for Desktop and Mobile is almost the same with small different functionalities, so please read the requirements carefully.
iPhone & iPad:
1. Dashboard:
- User opens the application and will see landing page (mobile01.png).
- Tapping on "Share the Love" button will take the user to select a card page (mobile02-1.png).
- Tapping on "Need Inspiration?" button will navigate user to inspiration gallery page (mobile05.png).
- Tapping on "How Does it Work" button will navigate user to how does it work page (mobile06-1.png).
- Tapping on "News Feed" button will navigate user to news feed page (mobile07.png).
- Notice that we have a sticky footer.
2. Select a Card:
- This screen (mobile02-1.png) is shown after user tabs on "Share the Love" button in landing page.
- User can swipe left or right to see other card options under the same category (mobile02-2.png)
- User can scroll up and down to see other cards categories (mobile02-3.png).
- Tapping on one of the cards will take the user to edit your card page (mobile03-1.png)
- Tapping on “You Just Made My Day” logo will open the application menu (mobile08.png), note that this functionality should be implemented for all pages.
- Tapping the back arrow next to the logo will take the user to the previous page he was viewing. (This should be implemented right for all pages)
3. Edit Your Card:
- This screen (mobile03-1.png) is shown after user selects a card from select a card page.
- Tapping inside the text area will allow the user to write his message (mobile03-2.png)
- A user would be able to swipe left or right to change card designs without losing what they've typed in the card.
- When a user types the name of the post card receiver inside TO input field, then it should show all the possible matches (mobile03-3.png)
- When a user finishes the recipient names he can delete any recipient by clicking on the x icon (do it the same way we did it for desktop)
- Tapping on “Send” button will take the user to thank you page (mobile04.png)
4. Thank You:
- This screen (mobile04.png) is shown after user sends a card from edit your card page.
- Tapping on “Send Another” button will take the user to select a card page (mobile02-1.png).
5. Need Inspiration:
- This screen (mobile05.png) is shown after user taps on “Need Inspiration?” button in footer.
6. How Does it Work:
- This screen (mobile06-1.png) is shown after user taps on “How Does it Work?” button in footer.
- This page will contain a carousel that explains how this application works (mobile06-1.png, mobile06-2.png, mobile06-3.png)
7. News Feed:
- This screen (mobile07.png) is shown after user taps on “News Feed” button in footer.
8. Main Navigation:
- This screen (mobile08.png) is shown after user taps on “You Just Made My Day” logo.
- Select a Card should link to select a card page (mobile02-1.png).
- How it Works should link to how does it work page (mobile06-1.png).
- Inspiration Gallery should link to need inspiration page (mobile05.png)
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.
- Please follow the Web Accessibility Checklist provided by the client (WebAccessibilityChecklist.PDF)
Font Requirements:
- Use font - Arial.
JavaScript Requirements:
- jQuery
- AngularJS
- Bootstrap 3
Browsers Requirements:
- IE9
- IE10
- Safari 5.*
- Firefox 18.*
- Chrome 24
- Safari Browsers on iPad
- Safari Browsers on iPhone
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 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