Challenge Overview
CHALLENGE SUMMARY
Welcome to the “AutoGuys Checkout Pages UI Prototype Challenge 3”. This is the third 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 Checkout Process. This HTML Prototype is focused on finishing a series of screens for the “New Tire Experience” and the “Checkout Process” 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 the 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 finishing the AutoGuys “New Tire” Pages and the "Checkout Process". We are looking to create this screen as Responsive (Desktop/Tablet/Phone)
https://marvelapp.com/7f6jg94/screen/25648668
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
Previous Challenges for your reference:
AutoGuys New Tire Experience
AutoGuys Product Pages Challenge 2
Prototype Updates
- Phone: We need to add the side menu navigation to the entire application. Right now there is a "Hamburger" icon on mobile view but is a deadlink. So we need you to create this code. Please see the "06-01_Side Menu.png" as a reference for this design.
- On "tires-prp.html" we need to add a small section for the mobile view. Please see this file for reference "05-04_Tires_PRP.png". Basically, the update is to add on each product the gray section with the radio buttons and checkboxes, "Installation in Store" and "Pick up in store". Currently, this is on desktop view but is missing on the mobile view. Let me know if you as questions about this.
1) Desktop Screens
1.1) New Tire Experience (Finishing screens)
05-07_Tires_Comparison.png & 05-08_Tires_Comparison_Customer Rating.png
- This is the main comparison screen, where basically two or more items will be compared.
- This screen can be linked from previous “tires-prp” page by clicking on “Compare tires” button.
- We are looking for this page to be Responsive (Responsive using Bootstrap).
- There is no need to show the real comparison information as this will be handled on the backend. You just really need to focus on creating a great HTML/CSS layout.
- 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 on the site. You will need to work using the same layout and code from previous challenges.
1.2) Cart and Minicart
04-03_DIY PDP_Mini Cart.png & 06-02_Tires_PDP_Mini Cart.png
- Basically, this new website will have two differents detail pages for two main sections: “New Tire Screen” and “Do it yourself” (DIY). Already coded on previous challenge, you will need to focus now on the mini cart view.
- This minicart modal view es shown once users click on “Add to cart” button on both pages.
- “Quantity” field should be a number only field.
- 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).
04-04_DIY_Cart.png & 06-03_Tires_Cart.png
- This is the full view of the shopping cart with all buying items on it. Users will get to this screen after clicking on “View Cart” green button from the previous modal view with the minicart.
- “Quantity” field should be a number only field.
- 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).
04-05_DIY_Order Confirmed.png & 06-04_Tires_Order Confirmed.png
- Once users check out their orders by clicking on “Pay Online” green button will get into this screen.
- Your code should match the look and feel from the provided storyboards.
- 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).
2) Mobile 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 under the Mobile folder for look and feel reference:
- - 05-06_Tires_Comparison.png
- - 04-02_DIY PDP_Mini Cart.png
- - 04-03_DIY_Cart.png
- - 04-04_DIY_Order Confirmed.png
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 only of this libraries on this challenge:
- - Bootstrap 3 (Mandatory)
- - Grunt (Mandatory)
- - Less (Mandatory)
- - JQuery 2.1.1 (Mandatory)
- - 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 Checkout Pages UI Prototype Challenge 3”. This is the third 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 Checkout Process. This HTML Prototype is focused on finishing a series of screens for the “New Tire Experience” and the “Checkout Process” 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 the 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 finishing the AutoGuys “New Tire” Pages and the "Checkout Process". We are looking to create this screen as Responsive (Desktop/Tablet/Phone)
https://marvelapp.com/7f6jg94/screen/25648668
Current Live MarvelApp Prototypes
Prototype Desktop Link: https://marvelapp.com/7f6jg94
Prototype Mobile Link: https://marvelapp.com/322fj8b
Previous Challenges for your reference:
AutoGuys New Tire Experience
AutoGuys Product Pages Challenge 2
Prototype Updates
- Phone: We need to add the side menu navigation to the entire application. Right now there is a "Hamburger" icon on mobile view but is a deadlink. So we need you to create this code. Please see the "06-01_Side Menu.png" as a reference for this design.
- On "tires-prp.html" we need to add a small section for the mobile view. Please see this file for reference "05-04_Tires_PRP.png". Basically, the update is to add on each product the gray section with the radio buttons and checkboxes, "Installation in Store" and "Pick up in store". Currently, this is on desktop view but is missing on the mobile view. Let me know if you as questions about this.
1) Desktop Screens
1.1) New Tire Experience (Finishing screens)
05-07_Tires_Comparison.png & 05-08_Tires_Comparison_Customer Rating.png
- This is the main comparison screen, where basically two or more items will be compared.
- This screen can be linked from previous “tires-prp” page by clicking on “Compare tires” button.
- We are looking for this page to be Responsive (Responsive using Bootstrap).
- There is no need to show the real comparison information as this will be handled on the backend. You just really need to focus on creating a great HTML/CSS layout.
- 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 on the site. You will need to work using the same layout and code from previous challenges.
1.2) Cart and Minicart
04-03_DIY PDP_Mini Cart.png & 06-02_Tires_PDP_Mini Cart.png
- Basically, this new website will have two differents detail pages for two main sections: “New Tire Screen” and “Do it yourself” (DIY). Already coded on previous challenge, you will need to focus now on the mini cart view.
- This minicart modal view es shown once users click on “Add to cart” button on both pages.
- “Quantity” field should be a number only field.
- 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).
04-04_DIY_Cart.png & 06-03_Tires_Cart.png
- This is the full view of the shopping cart with all buying items on it. Users will get to this screen after clicking on “View Cart” green button from the previous modal view with the minicart.
- “Quantity” field should be a number only field.
- 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).
04-05_DIY_Order Confirmed.png & 06-04_Tires_Order Confirmed.png
- Once users check out their orders by clicking on “Pay Online” green button will get into this screen.
- Your code should match the look and feel from the provided storyboards.
- 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).
2) Mobile 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 under the Mobile folder for look and feel reference:
- - 05-06_Tires_Comparison.png
- - 04-02_DIY PDP_Mini Cart.png
- - 04-03_DIY_Cart.png
- - 04-04_DIY_Order Confirmed.png
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 only of this libraries on this challenge:
- - Bootstrap 3 (Mandatory)
- - Grunt (Mandatory)
- - Less (Mandatory)
- - JQuery 2.1.1 (Mandatory)
- - 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.