Challenge Overview
Welcome to the Procter and Gamble Customer Portal UI Prototype challenge! The goal of this challenge is to create the HTML5 application using the provided "Proctor and Gamble Customer Portal" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
NOTE: This challenge will leverage Bootstrap (http://getbootstrap.com/getting-started).
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
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 an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements:
- We would like you to use bootstrap.
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of HTML and CSS Validation errors and warnings.
- You are provided with the storyboards.
- This is as responsive / bootstrap, focus is on desktop but it must also work on mobile per standard bootstrap.
- Layout needs to be fixed width, you can repeat the colors on either side and center align the content as shown in storyboards. (no need to use the shadow shown on either side of the storyboards).
Required Pages:
1) Header and Navigation (1.png):
- Please create the header and navigation as shown in the 1.png
- "Samples" will be the active (selected) in the navigation, follow the active style as shown in the storyboard.
2) Samples (1.png):
- Samples page (1.png) will be shown by default.
- Below the navigation, we have two button that will allow the user to do further actions
- When user clicks on the “red” button in 1.png (Next Consent from Due Date), we show this modal window as shown in 3.png
- When users clicks on "Park Dental Clinic" in 1.png, we show the drop-down with different address available for selection (please see 2b.png), clicking on it shows the selected address in the drop-down collapsed view.
- - - Add New Affiliate shown with the address drop-down is not in scope for this challenge, for now just have it as a dead link.
- Clicking on each of the “product” will allow the user to select the quantity, which is a drop-down that will allow them to choose the appropriate quantity. (2a.png)
- At the bottom, we have 2 buttons “Cancel” and “Place Sample Order”
- Cancel: Make this a dead link
- Place a Sample order: On Clicking in this, we need to show the Review your order (6.png).
3) Consent Form Modal Window (3.png):
- Please create the modal window as shown in the storyboard.
- Leave a placeholder for docusign.
- We have two action buttons here “Cancel and Submit Consent Form”
- - Cancel: This will close the modal window
- - Submit Consent Form: This will need to show the success message as shown in 4.png
Success Message (4.png):
- This will show the success message and on clicking “Ok” will close the modal window and change the color of the “Next Consent from Due date” Red button (in 1.png below navigation in the default samples page) to blue with the text as “Next Consent from due date December 21, 2016” as shown in 5.png
4) Review your order (6.png):
- When user clicks on "Place Sample Order" in Samples page or when the click on "Reorder" button in Orders page...we show this "My Order Summary" modal window!
- This page will allow the user to review the products and quantities that were selected.
- We will have the ability to change the address with the help of the "address drop-down" works the same way as mentioned under "2) Samples (1.png)" but we won't have "+ Add New Affiliate" option (it just shows the already added address).
- They will have the ability to change the order quantity of each of the product and be able to remove them from their order.
- We have two action buttons here “Cancel and Submit Sample Order”
- - Cancel: This will close the modal window
- - Submit Sample Order: This will need to show the success message as shown in 7.png
Success Message (7.png):
- This will show the success message and on clicking “Ok” will close the modal window.
5) Orders (8.png):
- This page is shown on clicking the "order" link in navigation
- By default, all rows in this page will be collapsed and when a user clicks on a order, we expand to show the list of products in that order (page 8.png with 2nd row
expanded to show the products).
- Make the “Reorder” button clickable and show the same workflow of “Review your order”, (see example images 9 and 10.pn)
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.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any 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.
- You are allowed to use JQuery (MIT License) for this contest.
Browsers Requirements:
- Latest Safari, Mozilla, Chrome Browsers.
- Internet Explorer 10+
Documentation Provided:
- Storyboard Screens and PSD files can be found in forums.
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.