Procter and Gamble Customer Portal Design challenge

Welcome to the Procter and Gamble Customer Portal Design challenge.

Procter and Gamble project team members are excited to launch their first challenge in our community! They are adding a new section to one of their sub-sites and are looking to you for a clean and easy to use interface for their users.

Note that there are only two (2) full / unique website screens in this challenge - The other three (3) screens are simple modal overlays.

Good luck on this challenge!

Round 1

Submit your initial design concepts storyboards for the Checkpoint:

1) SAMPLE SCREEN
5) ORDERS SCREEN

- Notes.jpg: Please include any comments about your design for the Client
- Make sure all pages have a logical flow / Use correct file numbering (00, 01, 02, 03)

Round 2

Your final storyboard designs, based on the provided R1 winning design concept(s) / PSD(s), with all Checkpoint Feedback implemented.

1) SAMPLE SCREEN
2) SAMPLE SCREEN WITH CONSENT FORM OVERLAY
3) SAMPLE SCREEN WITH CONSENT FORM SUCCESS MESSAGE OVERLAY
4) ORDERS SCREEN WITH ORDER SUCCESS MESSAGE OVERLAY
5) ORDERS SCREEN

- Notes.jpg: Please include any comments about your design for the Client
- Make sure all pages have a logical flow / Use correct file numbering (00, 01, 02, 03)

Design Notes:
- You must use the provided PSD template for your design. Details around what can be edited / what cannot be edited are in the PSD Template notes, below.
- The provided base design is not very modern. Try to make the content feel more modern, while still making it work with the provided header and navigation.
- Use Arial or Helvetica font families.

- Allowed colors:
— navy blue: 012f6d
— mid blue: 094d9c
— bright blue: 008cd2
— any color taken from the header or navbar
— error red (for errors / negative warning states only): da191a
— green (for success message): any shade that works well with the design
— shades of gray: nothing darker than #333 / nothing lighter than #ccc

PSD NOTES
YOU MUST USE THE PROVIDED PSD TEMPLATE FOR YOUR DESIGN WORK.
The provided PSD is based on the existing website and can only be altered as noted below.
- HEADER: Do not alter the header background - You are free to add content above the logo placeholder on the right side, only
- NAVBAR: Do not alter the overall style of the navbar, but :
—— You are free to change the color of the navbar background (active tab background must remain gray!)
—— You are free to change the color of the navbar tab text
—— Show the correct active navbar tab for both your “samples” and “orders” screens!

- CONTENT AREA: Do not alter the color of the white background area / The overall content area must remain white.
- FOOTER: Do not edit the content of style of the footer, though you are free to move it up higher on the screen where it makes sense for PNGs
- EMPTY SPACE (LEFT / RIGHT OF CONTENT AREA): Please add a color overlay to the overall background of the screen (behind the content area). You may choose the color for this, but it must work with the colors seen in the header and navbar.

Wireframe Notes:
The wireframes are only meant to roughly illustrate the required content for screens, they are NOT meant to determine layout or styling!
- Do not only look at the wireframes - You must read content requirement notes below, as they cover some items which are not seen in the wireframes!
- DO NOT just copy (“skin”) the wireframes -  Layout in the content area is up to you. For one thing, the “ship to” element cannot live where it is in the wireframes (logos exist in that area in the template).
- The wireframes contain six (6) views, but you are only required to submit the ones detailed below in “required screens”.
- Spend the time to think about the design / layout and how it will work best for the users.

Content Requirement Notes
1) BACKGROUND STORY:
The user is logged into a larger / main website but wants to order product samples, so he clicks “order samples” and is brought to THIS mini-site, which looks similar to the main site, but not exactly the same.

The “home” tab on our mini site will return the user to the main site.

2) CONSENT FORM ELEMENT:
The user must have a valid consent form on file in order to process a request for samples. The user must re-submit this form each year. We need an element on the page which :
- shows the due data of their next consent form signing
— color should be used on this element to indicate when it is past due. i.e. if the form is past due, this element will show red color (important on the page!) and act as a link to launch the modal for signing the form.
— if the form is up to date, the text will appear some shade of gray (not important on the page)
— if the user tries to order samples when the consent form is past due, he will get the modal requiring him to sign before the order can be completed.

2) SAMPLES:
The “Samples” tab on our mini site is the default landing view for the user. He will see six (6) samples and he will decide which samples he wants to order. Each product sample has an available order quantity of 1-10 cases (100 product samples per case). NOTE that the wireframe does not show the word “case(s)” after the QTY pick list, but please add it in order to make this more clear to the user.

Samples which have been selected should be visibly different from samples which the user has not selected, so it is easy for him to see hich ones he is ordering. The wireframe shows “add” changing to “order” and they look like buttons, but the idea is that he taps “add” and now has to enter the quantity for all before clicking “place sample order” - so the concept of “order” as button on each item may be confusing (user thinks he needs to tap “order” button to order, which is incorrect). Please design this in a way that is clear / simple to understand and NOT as shown in wireframes.

Once a product is selected, the user MUST enter a quantity.
Once he has entered quantity for all selected products, he can tap “place order sample” to order OR “cancel” to clear all selections.
Once the order is submitted successfully, he will be moved to the “ORDERS”  page and see a pop up success message.

3) ORDERS:
- The orders tab shows the user’s current order as well as all past orders.
- The current order should be separate from the old orders.
- User can tap on an order to view the details of that order.  Show one order as “open” to show details

Each PAST order (not current order) will show a “reorder” option. NOTE that the open order in the wireframes is missing this button but it should be here!

Required Screens (5):
1) SAMPLE SCREEN (#1 in wireframe)

2) SAMPLE SCREEN WITH CONSENT FORM OVERLAY (#2 in wireframe)

3) SAMPLE SCREEN WITH CONSENT FORM SUCCESS OVERLAY (#3 in wireframe)

4) ORDERS SCREEN WITH ORDER SUBMISSION “SUCCESS” OVERLAY (#5 in wireframe)

5) ORDERS SCREEN (#6 in wireframe)

Target Audience:
- English speaking professionals

Judging Criteria:
- Completeness (design includes all required elements).
- Cohesiveness (how well all elements work together seamlessly with the existing screens).
- Cleanliness (successfully engage users in a simple way / ease-of use).
- UI Best Practice (how well your elements follow the IOS Human Interface Guide).
- Source File Best Practice (how well your PSD source file is labeled and organized).

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in the provided Adobe Photoshop template and saved as layered PSD file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.