Challenge Overview
Welcome to "PMI Pet Foods Responsive UI Prototype Challenge". In this challenge, we need your help to create responsive HTML5 prototype for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations. Read more details below and Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive HTML5 prototype for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) for our PMI Pet Food website.
- We'll focus on Desktop and Mobile version in this challenge.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
01. Home Screen
Desktop Reference: "01_home_full.png", "02_1_home_screen_height.png to 02_5_home_screen_height.png" / alternative desktop "13_Home_option.png"
Mobile Reference: "08_1_mobile_home.png to 08_6_mobile_nav.png" / alternative mobile "14_1_Mobile_home_option.png to 14_6_Mobile_home_option.png"
- In this page we are looking to provide information on our brand.
- This screen should be create using parallax style.
- This screen will be split into 5 differents section, where user will be able to view it everytime they scroll down the homepage. Also, notice the right side of navigation in this page.
- Please provide 2 version of homepage:
-- The original homepage : 01_home_full.png / 08_1_mobile_home.png to 08_6_mobile_nav.png
-- The alternative homepage : 13_Home_option.png / 14_1_Mobile_home_option.png to 14_6_Mobile_home_option.png
- From this page the user will be able to view all sub brands related to our brand:
-- Red Flannel.
-- Exclusive.
-- Infinia.
- Clicking on a sub brand will take the user to sub brand details page.
02. Sub Brand Screen
Desktop Reference: "03_1_sub_brand_product_slide_view.png to 03_2_sub_brand_product_grid_view.png", "04_sub_brand_list_view.png"
Mobile Reference: "09_mobile_sub_brand.png"
- In this page we are looking to provide information on sub brand.
- From this page the user will be able to view all products related to this sub brand.
- Please provide variety of screen to view the products (Slide, Grid, List)
- Clicking on a product will take the user to product details page.
03. Product Details Screen
Desktop Reference: "05_1_product_detail.png to 05_3_product_detail.png"
Mobile Reference: "10_mobile_product_detail.png"
- In this page we are looking to provide information on product.
- Please make sure capture and provide tab view for "Guaranteed Analysis, Ingredients, Feeding Guideline"
- From this page we will have an input field with a label saying "Find a Retailer near you":
-- There are two input field, use placeholder text "Zip Code" (textbox) and "Radius" (selectbox).
-- "Search" button that will take user to Retailer Locator page.
04. Retailer Locator Screen
Desktop Reference: "06_1_Retailer_Locator.png to 06_2_Retailer_Locator.png"
Mobile Reference: "11_1_mobile_retailer_locator.png to 11_2_mobile_retailer_locator.png"
- In this page, show all possible/near retailors on Google map.
- Upon hovering on each pin provide store information:
-- Name.
-- Address.
-- Telephone Number.
-- Website.
-- What else we can show here? A placeholder for photo?
- Also show the results as a table under the map.
- Above the table we need the same input field used in product details page for the ability to search for a different address.
05. Contact Us Screen
Desktop Reference: "07_contact_us.png"
Mobile Reference: "12_mobile_contact_us.png"
- Show a Google map with our location on it; any place for now.
- We need a form:
-- Full Name.
-- Email Address.
-- Subject.
-- Your Message.
-- "Send Message" button.
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 ue Bootstrap for this challenge.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet should share same layout like desktop storyboard
Documentation Provided:
- Storyboards
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.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive HTML5 prototype for our new platform to inform customers, potential customers, and dealers of the product features, benefits, ingredients, guaranteed analysis of PMI Pet Foods along with product recommendations
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) for our PMI Pet Food website.
- We'll focus on Desktop and Mobile version in this challenge.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
Screen Requirements
01. Home Screen
Desktop Reference: "01_home_full.png", "02_1_home_screen_height.png to 02_5_home_screen_height.png" / alternative desktop "13_Home_option.png"
Mobile Reference: "08_1_mobile_home.png to 08_6_mobile_nav.png" / alternative mobile "14_1_Mobile_home_option.png to 14_6_Mobile_home_option.png"
- In this page we are looking to provide information on our brand.
- This screen should be create using parallax style.
- This screen will be split into 5 differents section, where user will be able to view it everytime they scroll down the homepage. Also, notice the right side of navigation in this page.
- Please provide 2 version of homepage:
-- The original homepage : 01_home_full.png / 08_1_mobile_home.png to 08_6_mobile_nav.png
-- The alternative homepage : 13_Home_option.png / 14_1_Mobile_home_option.png to 14_6_Mobile_home_option.png
- From this page the user will be able to view all sub brands related to our brand:
-- Red Flannel.
-- Exclusive.
-- Infinia.
- Clicking on a sub brand will take the user to sub brand details page.
02. Sub Brand Screen
Desktop Reference: "03_1_sub_brand_product_slide_view.png to 03_2_sub_brand_product_grid_view.png", "04_sub_brand_list_view.png"
Mobile Reference: "09_mobile_sub_brand.png"
- In this page we are looking to provide information on sub brand.
- From this page the user will be able to view all products related to this sub brand.
- Please provide variety of screen to view the products (Slide, Grid, List)
- Clicking on a product will take the user to product details page.
03. Product Details Screen
Desktop Reference: "05_1_product_detail.png to 05_3_product_detail.png"
Mobile Reference: "10_mobile_product_detail.png"
- In this page we are looking to provide information on product.
- Please make sure capture and provide tab view for "Guaranteed Analysis, Ingredients, Feeding Guideline"
- From this page we will have an input field with a label saying "Find a Retailer near you":
-- There are two input field, use placeholder text "Zip Code" (textbox) and "Radius" (selectbox).
-- "Search" button that will take user to Retailer Locator page.
04. Retailer Locator Screen
Desktop Reference: "06_1_Retailer_Locator.png to 06_2_Retailer_Locator.png"
Mobile Reference: "11_1_mobile_retailer_locator.png to 11_2_mobile_retailer_locator.png"
- In this page, show all possible/near retailors on Google map.
- Upon hovering on each pin provide store information:
-- Name.
-- Address.
-- Telephone Number.
-- Website.
-- What else we can show here? A placeholder for photo?
- Also show the results as a table under the map.
- Above the table we need the same input field used in product details page for the ability to search for a different address.
05. Contact Us Screen
Desktop Reference: "07_contact_us.png"
Mobile Reference: "12_mobile_contact_us.png"
- Show a Google map with our location on it; any place for now.
- We need a form:
-- Full Name.
-- Email Address.
-- Subject.
-- Your Message.
-- "Send Message" button.
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 ue Bootstrap for this challenge.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
*Tablet should share same layout like desktop storyboard
Documentation Provided:
- Storyboards
Final Submission Guidelines
Final Submission GuidelinesSubmission 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.