Challenge Overview
Welcome to the Procter and Gamble Customer Portal UI Prototype challenge! The goal of this challenge is to add to the existing HTML5 application using the provided "Proctor and Gamble Customer Registration / Profile" 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 add to the existing HTML5 prototype, while maintaining clean code and css and matching the provided storyboards for the new sections. Your prototype must work properly in all the required browsers and you are responsible for maintaining the integrity of the existing prototype / not creating any new issues there.
Key Requirements:
- We would like you to use bootstrap and add your new work to the exisitng sample prototype, to create one single prototype, which contains: registration, profile, samples and orders.
- 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 and original sample prototype
- 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).
- Some very minor changes have been made to PNG screens which are not reflected in the PSD source files. The source files are provided ONLY for slicing graphics and grabbing hex values, as needed - The PNG screens are the FINAL designs that you need to match.
Required Pages:
0) Global Tasks / Notes:
- Please remove the current “home” main menu tab in the current prototype and add the new “profile” main menu tab, like new screens (please see 04-01-DentalCare-Profile.png).
- When the user first enters the proto (index) he will see the registration screen (01-PG-DentalCare-Registration.png) and there will be no main menu visible -- ie no view of “samples, orders, profile and logout” menu items until user completes registration.
- Use three (3) “acme picklist option” for picklist options, where applicable. The exception to this is “Country” picklist, where you should use a standard “all countries” picklist, with “Canada” shown as the default country option.
- If user clicks “support desk” text link in “need help?” section, use standard email link (mailto: me@mydomain.com) and pre-populate the subject line with “Support Request”
1A) REGISTRATION PAGE - GENERAL:
Reference: 01-PG-DentalCare-Registration.png & 03-01-DentalCare-Registration-Form.png
- User will see the the registration screen (no menu) by default.
- On tap in text input field which contains any default gray text, clear default text and make sure user entered text is black (#000)
- User cannot tap “register until at least one affiliate has been successfully added to the registration form (see screen for dialog on this)
- Personal Info Section:
-- All fields are required, except where noted as “optional”.
-- on click of “Date of Birth” calendar icon element, show a standard js element (date picker) for date of birth selection (styled in a manner which matches the existing form look and feel)
--- The default state for the email opt in / opt out element is the gray version and “I do not want to receive occasional emails, based on my sample choices” text. On click of anywhere inside the colored box, this will change to the colored version (see 03-01-DentalCare-Registration-Form.png) and text will change to “I do want to receive occasional emails, based on my sample choices”. Revert to gray version / related text on click again. Make the entire box clickable, and not just the checkmark icon,
- Login Info Section:
-- primary email and confirm email fields MUST match and contain consist of standard email address format (x@x.com, xx@x.org, etc)
-- user can enter text for username OR click “use my email for this”. If user selects “use my email for this”, populate field with user email. If user then edits or clears the username field, uncheck “use my email for this”.
- Affiliate Info Section:
-- user will tap button here to launch modal screens fo adding affiliate (see next section)
-- user cannot tap “register” until at least one affiliate has been successfully added to the registration form (see related notes below on error styling)
1B) REGISTRATION PAGE - ADD AFFILIATE:
Reference: 02-01-Add-New-Affiliation-Popup.png through 02-04-Add-New-Affiliation-Popup.png
User may add as many affiliates as they want, but must add at least ONE affiliate in order to register.
- Search:
Reference: 02-01-Add-New-Affiliation-Popup.png
-- user will enter text and click “search” button to go to results. Please make text color “#000 for user entered search text (default text user sees is gray)
- Search Results:
Reference: 02-02-Add-New-Affiliation-Popup.png
-- on search input element, same notes here as listed immediately above (in ”search” notes)
-- user may see one result or many. Show four (4) results here but code so that more may be easily displayed.
-- if user taps “select” button on a result, jump to view 02-03
-- if user taps “create new affiliate” button on result, jump to 02-04
-- if user enters a new search text and hits “search”, results will be replaced with n ew results on this screen
- Add New Affiliate:
Reference: 02-03-Add-New-Affiliation-Popup.png
-- on search input element, same notes here as listed immediately above (in ”search” notes)
-- tap on “cancel / search again” button returns user to previous screen (search results - 02-02-Add-New-Affiliation-Popup.png)
-- tap on “save & find next affiliate” button returns user to first popup screen (search - 02-01-Add-New-Affiliation-Popup.png)
-- tap on “save & complete registration” button closes the popup and takes user back to registration screen, where we now see an affiliate has been added (see 03-01-DentalCare-Registration-Form.png)
- Create New Affiliate:
Reference: 02-04-Create-New-Affiliation-Popup.png
-- tap on “cancel / search again” button returns user to previous screen (search results - 02-02-Add-New-Affiliation-Popup.png)
-- tap on “save & find next affiliate” button returns user to first popup screen (search - 02-01-Add-New-Affiliation-Popup.png)
-- tap on “save & complete registration” button closes the popup and takes user back to registration screen, where we now see an affiliate has been added (see 03-01-DentalCare-Registration-Form.png)
1C) REGISTRATION PAGE - SUBMIT:
Reference: 03-01-DentalCare-Registration-Form.png and 03-02-DentalCare-Registration-Form.png
-- user can edit any information before tapping submit
-- edit of existing affiliate will function as shown in 03-02-DentalCare-Registration-Form.png
-- tap on “add new affiliate” will launch the related modal flow again
-- IF user taps “register” and a required form field has not been completed: highlight error with style as shown in 05-DentalCare-Form-Error-Style.png
---- note that the email opt in / out will simply default to opt out (no / gray) if user does nothing to this element, so there is no related error state)
-- IF user taps “register” and an affiliate has not been added, display related error as shown in 05-DentalCare-Form-Error-Style.png
-- IF user taps “register: and the form is complete, jump to profile (04-01-DentalCare-Profile.png)
-- IF user taps “cancel”, clear the form
2) PROFILE SECTION:
Reference: 04-01-DentalCare-Profile.PNG through 04-05-DentalCare-Profile.png
-- once the user has successfully completed registration, he now sees the main menu (samples, orders, profile)
-- user can now edit his profile, if he wants to
-- by default, the “personal information” accordian panel is open and all others are closed
-- if user taps another accordion section header (login or affiliate), the tapped panel will open and the other panels will be closed (only ONE panel may be open at any time)
-- NOTE: if a user is in edit mode on any open panel, he cannot open any other panel until he either cancels or saves the edit / leaves the edit view.
- Profile - Personal Info:
Reference: 04-01-DentalCare-Profile.png
-- by default, the “personal information” accordian panel is open and all others are closed
-- all content is NON-editable until user taps “edit”, including the email opt in / opt out element
- Profile - Edit Personal Info:
Reference: 04-02-DentalCare-Profile.png
-- if user tries to save edits without a required field completed, same error process as in registration form (red label text and border on incomplete required element)
- Profile - Login Info:
-- MISSING SCREEN: please show read only version by default (where password is “xxxxxxx” and editable version (same as seen in registration form) for edit view
- Profile - Affiliate Info:
Reference: 04-03-DentalCare-Profile.png through 04-05-DentalCare-Profile.png
-- only one affiliate can be marked as “primary” affiliate and a primary affiliate cannot be removed (ie user must always have at least ONE affiliate), so this is why we see “remove” on one affiliate edit but not the other
-- IF editing an affiliate, user cannot click “add affiliation” button until he saves or cancels the edit
-- tap on “add new affiliate” will launch the related modal flow again (this time shown over the active profile screen)
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+
- Mobile browsers
Documentation Provided:
- Storyboard Screens, PSD files and the original Sample Prototype 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.