Challenge Overview
CHALLENGE SUMMARY
Welcome to the “AutoGuys Product Pages UI Prototype Challenge 2”. This is the second challenge in a series of challenges to complete the AutoGuys UI. In this challenge, we are looking to create the responsive page flow (Desktop, Tablet, Mobile) for the AutoGuys Product Pages. This HTML Prototype is focused on the “New Product Page” and the “Product Detail Page” of the AutoGuys website.
Let us know if you have any questions!
Background information
This challenge is focused on continuing to creating the Responsive experience (Desktop, Tablet, Phone) for the new AutoGuys website. We want customers to be inspired and enjoy the (simple) experience of searching, selecting and buying products and tires.
Competition Task Overview
The main task of this competition is to create the Responsive HTML5 prototype based on the provided storyboard designs, working and updating the current code from previous challenge. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required 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.
- Test in all the required browsers.
Required Screens
This challenge will be focused on the AutoGuys “Product Page”, "Product Detail Page" and updates to the current provided code (Detailed below). We are looking to create this screen as Responsive (Desktop/Tablet/Phone)
https://marvelapp.com/7f6jg94/screen/25648656
Desktop: 01-01_Product Page.png
Mobile: 01-01_Product Page.png
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
Previous Challenge for your reference:
AutoGuys New Tire Experience
Important: Code Updates & Fixes
- The HTML/CSS code base should be fully responsive (with bootstrap framework). To achieve the responsiveness, we are suggesting not to use width/height sizes in pixels, rather the sizes should be in %ages of the screen.
- jQuery: We need you to change/update the current jQuery version to jquery-2.1.1. (This is what is used by Hybris)
- Design Styles: Review and update all styles elements (fonts, colors, icons) to the designs provided (Note we have updated some items based on the companies style guide)
- We need to show the menu icon on the mobile view. Please refer to "01-01_Product Page.png" in mobile folder.
- Horizontal scroll bar appears, need to fine-tune the css for responsiveness.
- The list view of the PRP results may need little more working to reduce the size of each row.
- Alignment issues if any of the content is changed. (eg. Product name is longer and occupying 2 lines, if there is no installation option but only Pick-up-in-Store is there or if there is one more option like Ship To Home).
- For this challenge we need to create the Tablet breakpoint; 1024px can work. We can just show a desktop view with elements adjusting accordingly.
1) Desktop Screens
01-01_Product Page.png workflow (01-01 to 01-05)
- This is the main Product Page, where a user can search for DIY parts or easily click into the listed categories
- We are looking for this page as both Desktop and Phone (Responsive using Bootstrap)
- Create the Search bar only - no need for the search action.
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages in the site. You will need to work using the same layout and code from previous challenge.
04-01_DIY PDP.png
- This is the Product Detail Page for each product.
- Number on “quantity” field need to be able to update on this prototype.
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Only the Tabs “Overview” and “Description” need to show content (but all tabs should work) Please use the content provided on the storyboards. Refer to: "04-02_DIY PDP_Description.png". If there is more content it should naturally push downward.
06-01_Tires_PDP.png
- Similar to DIY Product detail page, but focused to New Tire Experience.
- Please use the content provided on the storyboard.
2) Phone Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens from “01-01_Product Page.png” to “01-03_Product Page_Vehicle- Search.png” and “04-01_DIY PDP.png” - "06-01_Tires_PDP.png" under the Mobile folder for look and feel reference.
3) Tablet Screens
- We need the Desktop views to adjust for the Tablet break points.
- We will have additional Tablet design updates in future challenges.
Image Requirements
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You must use LESS for CSS pre-processing (Required)
- 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can use any of this libraries on this challenge:
- - Bootstrap 3
- - Grunt
- - Less
- - JQuery 2.1.1
- - Enquire.js
- - OWL Carousel
- - BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- Storyboards and All necessary documents with flow for this challenge can be found in in the challenge forum.
Platforms
- HTML
Technologies
- CSS
- HTML
- HTML5
- JavaScript
- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip
- For each member, the final submission should be uploaded to the Online Review Tool.
Welcome to the “AutoGuys Product Pages UI Prototype Challenge 2”. This is the second challenge in a series of challenges to complete the AutoGuys UI. In this challenge, we are looking to create the responsive page flow (Desktop, Tablet, Mobile) for the AutoGuys Product Pages. This HTML Prototype is focused on the “New Product Page” and the “Product Detail Page” of the AutoGuys website.
Let us know if you have any questions!
Background information
This challenge is focused on continuing to creating the Responsive experience (Desktop, Tablet, Phone) for the new AutoGuys website. We want customers to be inspired and enjoy the (simple) experience of searching, selecting and buying products and tires.
Competition Task Overview
The main task of this competition is to create the Responsive HTML5 prototype based on the provided storyboard designs, working and updating the current code from previous challenge. Your prototype must work properly in all the required browsers.
Key Requirements
- Replicate the design of the approved Storyboards (PSD Files) for all required 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.
- Test in all the required browsers.
Required Screens
This challenge will be focused on the AutoGuys “Product Page”, "Product Detail Page" and updates to the current provided code (Detailed below). We are looking to create this screen as Responsive (Desktop/Tablet/Phone)
https://marvelapp.com/7f6jg94/screen/25648656
Desktop: 01-01_Product Page.png
Mobile: 01-01_Product Page.png
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
Previous Challenge for your reference:
AutoGuys New Tire Experience
Important: Code Updates & Fixes
- The HTML/CSS code base should be fully responsive (with bootstrap framework). To achieve the responsiveness, we are suggesting not to use width/height sizes in pixels, rather the sizes should be in %ages of the screen.
- jQuery: We need you to change/update the current jQuery version to jquery-2.1.1. (This is what is used by Hybris)
- Design Styles: Review and update all styles elements (fonts, colors, icons) to the designs provided (Note we have updated some items based on the companies style guide)
- We need to show the menu icon on the mobile view. Please refer to "01-01_Product Page.png" in mobile folder.
- Horizontal scroll bar appears, need to fine-tune the css for responsiveness.
- The list view of the PRP results may need little more working to reduce the size of each row.
- Alignment issues if any of the content is changed. (eg. Product name is longer and occupying 2 lines, if there is no installation option but only Pick-up-in-Store is there or if there is one more option like Ship To Home).
- For this challenge we need to create the Tablet breakpoint; 1024px can work. We can just show a desktop view with elements adjusting accordingly.
1) Desktop Screens
01-01_Product Page.png workflow (01-01 to 01-05)
- This is the main Product Page, where a user can search for DIY parts or easily click into the listed categories
- We are looking for this page as both Desktop and Phone (Responsive using Bootstrap)
- Create the Search bar only - no need for the search action.
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Header, navigation, content and footer should be separated out properly to be used across many pages in the site. You will need to work using the same layout and code from previous challenge.
04-01_DIY PDP.png
- This is the Product Detail Page for each product.
- Number on “quantity” field need to be able to update on this prototype.
- Anything that should be a hyperlink/action should be coded as such and set to a dead link (so the developers can modify as needed)
- Only the Tabs “Overview” and “Description” need to show content (but all tabs should work) Please use the content provided on the storyboards. Refer to: "04-02_DIY PDP_Description.png". If there is more content it should naturally push downward.
06-01_Tires_PDP.png
- Similar to DIY Product detail page, but focused to New Tire Experience.
- Please use the content provided on the storyboard.
2) Phone Screens
- As this is a responsive application, your coding must follow all responsive techniques such like: media queries and showing/hiding elements for different devices.
- Please refer to the screens from “01-01_Product Page.png” to “01-03_Product Page_Vehicle- Search.png” and “04-01_DIY PDP.png” - "06-01_Tires_PDP.png" under the Mobile folder for look and feel reference.
3) Tablet Screens
- We need the Desktop views to adjust for the Tablet break points.
- We will have additional Tablet design updates in future challenges.
Image Requirements
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Test in all the required browsers.
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- You must use LESS for CSS pre-processing (Required)
- 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. Please ask in forums for confirmation if you are planning to use external libraries.
- You can use any of this libraries on this challenge:
- - Bootstrap 3
- - Grunt
- - Less
- - JQuery 2.1.1
- - Enquire.js
- - OWL Carousel
- - BBC Imager
Browsers Requirements:
- IE11 above
- Latest Firefox, Safari & Chrome Browsers
- Android, Chrome, Firefox Browser for Mobile phone
- Mobile Safari
Documentation Provided:
- Storyboards and All necessary documents with flow for this challenge can be found in in the challenge forum.
Platforms
- HTML
Technologies
- CSS
- HTML
- HTML5
- JavaScript
Final Submission Guidelines
Final Submission Guidelines:- All pages of the UI prototype developed according to the provided design as described above
- Any standard Topcoder documentation for a web UI prototype challenge
- All source code from your project uploaded as a zip
- For each member, the final submission should be uploaded to the Online Review Tool.