Challenge Summary
Welcome to the “AutoGuys Visual Improvements Design Challenge”. We have an exciting new application design challenge for a large full-service and tire automotive aftermarket chain. In this challenge we are looking for you to review and understand their current online shopping/buying experience with an eye on improving the customer experience.
We are not looking for a complete redesign! We are just looking to improve the user experience while still keeping their current branding and overall look and feel. We are looking for you to suggest improvements with the page structure and flow - what flaws do you see and should be improved? What would make certain areas easier to use? What UX improvements could be impactful to the buying process?
Let us know if you have any questions!
1) Product Home Page
2) DIY Pages: Complete Flow
- Required: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Product Home Page
2) DIY Pages: Complete Flow
3) NTE Pages: Complete Flow
- Required: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The purpose of this “Visual Improvements Design Challenge” is to improve the user experience while still keeping/working within the current look and feel of the website.
The website is used daily by users looking to place online orders for aftermarket auto parts or to schedule service for their cars. We are looking for you to propose user and customer experience enhancements that might make the site easier to use, possibly less check out steps or even easier interactions using modern techniques.
In this challenge we are focused on 3 sections of the site:
1) Product Home Page
2) DIY Auto Parts (Do It Yourself Auto Parts)
3) NTE (New Tire Experience)
We want you to look at this from a Responsive design view and will ask you to include a couple of key mobile screens to capture the phone to desktop transition.
Adroc and Chekspir will be managing the challenge and helping with the design feedback. Please let us know if you have any questions!
Required Screens
Download the attached Word file for image references
1) Product Home Page (Desktop and Phone)
Overlay
- When navigating to the Product Home Page (by clicking on Products) it essentially opens a full width dropdown menu. (All of the main navigation items work like this)
- How can this be improved?
- What concepts might make this a better interaction (and better responsive design?)
- The user needs to be able to navigate these items - is there a better solution?
Page Content
This portion of the page is dedicated to highlighting products, quick links etc.
- If this is the main content (displayed below the navigation) how is the affected by your updates? This is essentially home page content.
- Just need to focus on the highlighted products.
- Banners and Advertisements do not need to be redesigned - but where should they live and be used in your design?
Footer
This is the footer of the entire website.
- As it is currently designed this might still work or can some of this be consolidated?
2) DIY Pages:
These DIY (Do It Yourself) Auto Parts pages are divided into 6 pages:
2.1) DIY Landing Page: (Desktop and Phone)
- This is the first thing a user will see after clicking on the “DIY Auto Parts” from the Products Main Navigation.
- This is where a user will search and find parts for their car - what can make this easier to understand and use?
- What are the steps or possible wizard to make this easier?
- This flow of this page could be improved.
2.2) DIY Product Result Page: (Desktop and Phone)
- Will display the results after a search. Refer to: “DIY PRP page top portion” (Page 9)
- What improvements to the gridview make sense?
2.3) DIY Product Detail Page: (Desktop and Phone)
- This is the detail view of each product.
- Refer to: “DIY PDP Page Overview” (Page 11)
- How would you improve the product detail page?
- We still need to include the marketing banner
2.4) DIY Mini-Cart Page:
- This is the Mini-cart view - a user will see this after adding something to their cart.
- Refer to: “DIY Mini-cart page” (Page 15)
- How would you improve this?
2.5) DIY Shopping-Cart Page:
- This is a full view of Cart information.
- Refer to: “DIY Shopping cart page overview screen” (Page 16)
- How would you improve this and the flow?
2.6) DIY Order Confirmation Page:
- This page will be shown just after the checkout process.
- Refer to: “DIY Order Confirmation Page Overview” (Page 19)
- How would you improve this and the flow?
3) NTE (New Tire Experience) Pages:
These “New Tire Experience” pages are divided into 7 pages:
3.1) NTE Landing Page:
- This is the first thing users will after clicking on “Tires” from the Products Main Navigation.
- We are looking to improve this experience
- The user can currently select tabs and select tires with different options
- You can leave the Banners and Advertising area as it is currently.
- to: “NTE Landing Page Overview” (Page 23)
3.2) NTE Product Results Page:
- Will display the results after a search. Refer to: “NTE PRP page overview” (Page 26)
- Similar to the DIY - what are your suggestions for improving this experience.
3.3) NTE Product Detail Page:
- This is the detail view of each product.
- Refer to: “NTE PDP Page Overview” (Page 29)
- Similar to the DIY - what are your suggestions for improving this experience.
3.4) NTE Compare Page:
- This screen will show products (Tires on this case) comparison.
- What are some comparison updates/techniques that can be used here?
- Refer to: “NTE Compare Page Overview 1” (Page 32) and “NTE Compare Page Overview 2” (Page 33)
3.5) NTE Mini-Cart Page:
- This is the mini-cart page
- Refer to: “NTE Mini Cart page” (Page 37)
- Similar to the DIY - what are your suggestions for improving this experience.
3.6) NTE Shopping-Cart Page:
- This is a full view of Cart information.
- Refer to: “NTE Shopping Cart Page Overview screen” (Page 38)
- Similar to the DIY - what are your suggestions for improving this experience.
3.7) NTE Order Confirmation Page:
- This page will be shown just after the checkout process.
- Refer to: “NTE Order Confirmation page Overview” (Page 41)
- Similar to the DIY - what are your suggestions for improving this experience.
Important:
- Please do not remove existing links from the current design (Navigation, Footer, etc).
- Banners and Advertising: No need to redesign these - focus on the flow and the user experience. Reuse the existing banners and advertising.
- Use “AutoGuys logo” where you need one. Do not design a logo on this challenge. Focus only on the UI/UX redesign.
- Keep things consistent. This means all graphic styles should work together.
- Focus on the user experience! Keeping consistent visual elements.
Screen Sizes:
- Design for Responsive Web Application (Desktop and Phone)
- Specific screen sizes: 1280px x 1024px or 2560px x 2048px if you work on a retina display.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding/Colors
- Please use current color palette from Word document provided. Request access to this document on forum.
- For logo use a placeholder for now or use AutoGuys
- Font “Roboto”
Target Audience:
- Current AutoGuys customers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall redesign for UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file. Sketch is also allowed.
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
We are not looking for a complete redesign! We are just looking to improve the user experience while still keeping their current branding and overall look and feel. We are looking for you to suggest improvements with the page structure and flow - what flaws do you see and should be improved? What would make certain areas easier to use? What UX improvements could be impactful to the buying process?
Let us know if you have any questions!
Round 1
Submit your initial designs for a checkpoint feedback:1) Product Home Page
2) DIY Pages: Complete Flow
- Required: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final designs:1) Product Home Page
2) DIY Pages: Complete Flow
3) NTE Pages: Complete Flow
- Required: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The purpose of this “Visual Improvements Design Challenge” is to improve the user experience while still keeping/working within the current look and feel of the website.
The website is used daily by users looking to place online orders for aftermarket auto parts or to schedule service for their cars. We are looking for you to propose user and customer experience enhancements that might make the site easier to use, possibly less check out steps or even easier interactions using modern techniques.
In this challenge we are focused on 3 sections of the site:
1) Product Home Page
2) DIY Auto Parts (Do It Yourself Auto Parts)
3) NTE (New Tire Experience)
We want you to look at this from a Responsive design view and will ask you to include a couple of key mobile screens to capture the phone to desktop transition.
Adroc and Chekspir will be managing the challenge and helping with the design feedback. Please let us know if you have any questions!
Required Screens
Download the attached Word file for image references
1) Product Home Page (Desktop and Phone)
Overlay
- When navigating to the Product Home Page (by clicking on Products) it essentially opens a full width dropdown menu. (All of the main navigation items work like this)
- How can this be improved?
- What concepts might make this a better interaction (and better responsive design?)
- The user needs to be able to navigate these items - is there a better solution?
Page Content
This portion of the page is dedicated to highlighting products, quick links etc.
- If this is the main content (displayed below the navigation) how is the affected by your updates? This is essentially home page content.
- Just need to focus on the highlighted products.
- Banners and Advertisements do not need to be redesigned - but where should they live and be used in your design?
Footer
This is the footer of the entire website.
- As it is currently designed this might still work or can some of this be consolidated?
2) DIY Pages:
These DIY (Do It Yourself) Auto Parts pages are divided into 6 pages:
2.1) DIY Landing Page: (Desktop and Phone)
- This is the first thing a user will see after clicking on the “DIY Auto Parts” from the Products Main Navigation.
- This is where a user will search and find parts for their car - what can make this easier to understand and use?
- What are the steps or possible wizard to make this easier?
- This flow of this page could be improved.
2.2) DIY Product Result Page: (Desktop and Phone)
- Will display the results after a search. Refer to: “DIY PRP page top portion” (Page 9)
- What improvements to the gridview make sense?
2.3) DIY Product Detail Page: (Desktop and Phone)
- This is the detail view of each product.
- Refer to: “DIY PDP Page Overview” (Page 11)
- How would you improve the product detail page?
- We still need to include the marketing banner
2.4) DIY Mini-Cart Page:
- This is the Mini-cart view - a user will see this after adding something to their cart.
- Refer to: “DIY Mini-cart page” (Page 15)
- How would you improve this?
2.5) DIY Shopping-Cart Page:
- This is a full view of Cart information.
- Refer to: “DIY Shopping cart page overview screen” (Page 16)
- How would you improve this and the flow?
2.6) DIY Order Confirmation Page:
- This page will be shown just after the checkout process.
- Refer to: “DIY Order Confirmation Page Overview” (Page 19)
- How would you improve this and the flow?
3) NTE (New Tire Experience) Pages:
These “New Tire Experience” pages are divided into 7 pages:
3.1) NTE Landing Page:
- This is the first thing users will after clicking on “Tires” from the Products Main Navigation.
- We are looking to improve this experience
- The user can currently select tabs and select tires with different options
- You can leave the Banners and Advertising area as it is currently.
- to: “NTE Landing Page Overview” (Page 23)
3.2) NTE Product Results Page:
- Will display the results after a search. Refer to: “NTE PRP page overview” (Page 26)
- Similar to the DIY - what are your suggestions for improving this experience.
3.3) NTE Product Detail Page:
- This is the detail view of each product.
- Refer to: “NTE PDP Page Overview” (Page 29)
- Similar to the DIY - what are your suggestions for improving this experience.
3.4) NTE Compare Page:
- This screen will show products (Tires on this case) comparison.
- What are some comparison updates/techniques that can be used here?
- Refer to: “NTE Compare Page Overview 1” (Page 32) and “NTE Compare Page Overview 2” (Page 33)
3.5) NTE Mini-Cart Page:
- This is the mini-cart page
- Refer to: “NTE Mini Cart page” (Page 37)
- Similar to the DIY - what are your suggestions for improving this experience.
3.6) NTE Shopping-Cart Page:
- This is a full view of Cart information.
- Refer to: “NTE Shopping Cart Page Overview screen” (Page 38)
- Similar to the DIY - what are your suggestions for improving this experience.
3.7) NTE Order Confirmation Page:
- This page will be shown just after the checkout process.
- Refer to: “NTE Order Confirmation page Overview” (Page 41)
- Similar to the DIY - what are your suggestions for improving this experience.
Important:
- Please do not remove existing links from the current design (Navigation, Footer, etc).
- Banners and Advertising: No need to redesign these - focus on the flow and the user experience. Reuse the existing banners and advertising.
- Use “AutoGuys logo” where you need one. Do not design a logo on this challenge. Focus only on the UI/UX redesign.
- Keep things consistent. This means all graphic styles should work together.
- Focus on the user experience! Keeping consistent visual elements.
Screen Sizes:
- Design for Responsive Web Application (Desktop and Phone)
- Specific screen sizes: 1280px x 1024px or 2560px x 2048px if you work on a retina display.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding/Colors
- Please use current color palette from Word document provided. Request access to this document on forum.
- For logo use a placeholder for now or use AutoGuys
- Font “Roboto”
Target Audience:
- Current AutoGuys customers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall redesign for UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file. Sketch is also allowed.
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
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.