Challenge Summary
Important: 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 (and document) improvements within 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 (Desktop)
2) DIY Pages: UX Improvements (Desktop)
3) NTE Pages: UX Improvements (Desktop)
4) Presentation Document or Visual Map with your UX updates and notes
- 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 (Desktop & Mobile)
2) DIY Pages: UX Improvements (Desktop & Mobile)
3) NTE Pages: UX Improvements (Desktop & Mobile)
4) Presentation Document or Visual Map with your UX updates and notes
- 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 goal of this “UX Improvement Challenge” is to use the winning designs from the previous challenge and to continue improving the user experience. We will need you make some updates based on our requirements and to also keep your designs within the current look and feel of the website. We are planning to present your Checkpoint designs next Thursday so it is important to have your designs/presentations ready for review and critique!
Website Details
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 checkout steps or even easier interactions using modern design/website shopping techniques. What are the experiences you like when purchasing things online? Do those techniques make sense on this site?
We are currently 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)
Process Note: Important
1) UX Improvement Documentation
- It was very hard to track the improvements, concepts, and ideas in the first challenge
- We would like you to create a document or visual map to show us what you have improved so we can think about the improvement, provide feedback on the improvement (and also give you credit for it!!). If we don't know about the improvement it is hard to evaluate it.
- 236160 did a good job of this with their UX Hypothesis document. It might also be useful to have a version of your screen with UX notes/boxes on it.
2) Existing Features
- Do not remove features! We must still keep the same site features, tools, functionality… just improve it.
~
UX Elements to capture and continue with from the first challenge
- Download the previous challenge files
01-236144 (Desktop)
- Make sure your designs look professional and have the crispness of UI and overall graphics.
- Header Search: This has been condensed (almost hidden) this is not an improvement and is still needed. Search is very important in e-commerce website (Do not hide it)
01-01_Product Page.png
- We like the idea for the quick DIY Search while also including the products so the user can choose either path. Remember "visual" cues are useful for an online shopper.
- The messaging can be improved or removed or a better banner for this page for the user to understand what to do.
- Also that the navigation is no longer in the flyout window
- We like how the search is easier to find the car details (and bringing in more "smart" technology)
01-02_Product Page_Search Part_Year Fill.png
01-03_Product Page_Search Part_Make Fill.png
01-04_Product Page_Search Part_Model.png
- We like how the search is easier to find the car details (and bringing in more "smart" technology)
- How can this be even smarter? (not more complicated) but what type of items could appear here?
02-01_DIY PRP.png
- Nice clean presentation here
- A lot of space up top is taken up before the user sees the results - is there a solve for this?
- Double check to make sure there is not missing functionality
02-02_DIY_Blank Page.png
- We would not have a blank page - this would have some messaging
02-04_DIY_PDP.png
- Very clean design and presentation!
- DO NOT add extra "lines" or boxes.. (everyone is adding more lines, outlines, boxes etc. only use where needed). This adds extra visual clutter and more coding!
- Option 1: "Guests who Bought this Item Also Bought" - is there room to bring this up higher on the page? Is it possible for the 3rd column to be this? Current site has it higher up… so this design is actually not improving this part of the UX.
- Option 2: "Guests who Bought this Item Also Bought" - is there room to place it below the product (for the user to scroll - similar to Amazon?) - Research placement of this as it is a key thing for users to know.
02-5_DIY_Mini Cart.png
- The red header is not an improvement as it seems to be more of an alert
- Buttons are too big and they do not focus the user
- Too many gray lines/boxes/outlines
- We are looking for better improvements, concepts for the Mini Cart!
02-6_DIY_Cart.png
- Overall graphics/presentation/sizing is great - but the UX has some issues
- Selecting quantity seems to be harder now (select box is easier)
- "Guests who Bought this Item Also Bought" seems to be hidden now... And it is important to show the user this.
- Too many gray lines/boxes/outlines
- Continue to improve this page! What else might help the Shopping Cart?
03-01_Tires.png
- Please use the provided design (word file) on how to Shop for tires
- You can look to improve how this looks but the functionality/tabs must stay the same
- Focus on other UX improvements in this flow!
03-04_Tires_PRP.png
03-05_Tires_PDP.png
- Similar to the product comments - look to optimize space!
01-236144 (Mobile)
- Make sure your updates work/flow on mobile
- Continue to refine the mobile view
- Focus on Desktop updates first.
02-236160 (Desktop)
ag_00-notes.png
- This was very useful! You do not need to copy this version but you need to submit a visual guide/visual map to what improvements/suggestions you have. We will be using this to guide our review/discussions!
ag_1-1-home.png
- Simple ideas for improving this
- Needs to be graphically executed better
- How might color help this?
ag_2-1-4-select-category.png
- Very important to still have the left column categories - this is hard to follow
ag_2-2-results.png
- Good job with the space utilization to show 4 products.
03-236143 (Desktop)
- Overall very clean but the soft gray might not meet ADA requirements. Make sure your colors work for ADA
- Too many gray lines, outlines, boxes… this is just visual clutter
02_DIY_B_Results_Grid
- We like the concept around this results page with multiple sections/products
02_DIY_B_Results_Lists_Mini_Cart.png
02_DIY_B_Results_Lists.png
- Clean design but you need to be consistent with your buttons/placement etc.
02_DIY_E_Checkout_A_Billing.png
02_DIY_E_Checkout_B_Delivery.png
02_DIY_E_Checkout_C_Payment.png
02_DIY_F_Review.png
- Very clean presentation and easy to follow
- Too many gray boxes and also hard to read
- Wizard steps are useful but too small/hard to read.
~
Next Steps
We would like you to continue to refine the UX (taking the best of each one and adding your own thoughts.) This is a continuation and refinement! We are not asking to just merge submissions into a new one; please DO NOT do this.
Required Screens
- Download the attached Word file for image/content references
- Download the sources from previous winning submissions.
Additional UX Items
- Space: Maximize the page! Watch what is above the fold etc.
- Need a search box to be able to search by Vehicle or Parts.
- Categories should be visible all the time.
- Reward points for buying parts etc - how does this stand out to the user?
- What other items do you see that can be improved?
Details from Previous Challenge (things to think about!)
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?
- See Notes above on what is working in the source files
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 modern search or AI technique might be useful here?
- 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 grid view 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:
- 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
- Use the current color palette from Word document provided.
- For logo use a placeholder for now or use AutoGuys
- Font “Roboto”
Target Audience:
- Current AutoGuys customers.
Judging Criteria:
- UX Improvements! You will win based on what creative solutions you are thinking about and how well you explain them.
- 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.