Challenge Summary
Welcome to the Hestia B2B "Product Details" Redesign Contest.The goal of this contest is to update the Product Details page based on the provided requirements.
Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. For this contest we have provided the old design source for the Hestia "Product Details" page. We would like you to update the design based on our new requirements. Always check the PSD GUI Kit to make sure your being consistent with the Hestia design theme Design Requirements: 1). Updates - Update Top Header Area into the current Hestia header design - Notice the "Location" link removed from the current layout - Notice the "Username" color difference. - "Current Branch" label has different color. - Update to the correct logo - Notice the Top Navigation is updated into "Orders", "Site Tools", "Profile" and "Help". - Update the "Product Search" Bar, "Cart" and "My Lists" bar into new look and feel. - Update the breadcrumb style, notice the updated look of home icon and the arrow. - Update the footer area into the new style. - You can re-use all NEW look and feel UI Elements list stated above from New-Design/Search-Bar-Filter/search_results_update.psd - We might miss some elements, please refer to our latest GUI Kit to help you upgrade the look and feel for every UI elements in all submissions screens. 2). Enhancements - Please create separate screens for all new pages, that will help us explain correct flow. - Update the tab looks and feel on this page ( You can re-use the updated style from New-Design/Search-Bar-Filter/search_results_update.psd) - We need to place product/company logos for the "product details" - where should the product logos go? - Switch the "Product #" and the "Product description" - Update the new style for email/print icons ( You can re-use the updated style from New-Design/Memo-Email-Print/Email-Print.UX.Improvement.v2.psd ) - We need to update/fix the "availability" (look at the 02_review_tab.jpg - it doesn't make a lot of sense). - Update to the correct "Green", "ADA Complaint", "Lead Law" icon ( You can re-use the updated style from GUI-Kit03_GUI_Page_layout_elements.psd) - In the right column "Also Interested In" needs an updated title = "People Who Bought This Also Bought". And please limit the list to 5 items - Update the Quantity input into new looks like in New-Design/Search-Bar-Filter/search_results_update.psd. Make sure the input can support 6 characters - In the right column top placed a Product Video, we need a way when click the modal window, it will show in modal style and also help use create the navigation to show additional/related videos - Bottom carousel becomes "recently viewed items" - use correct tab and design. - Update the "Catalog Page No. 12345" We need a dropdown or some function around this, the product might be in multiple catalogs so the user should be able to select the catalog they want to go see or download. - We're looking for user friendly solutions that will also improve the usability for this page. IMPORTANT - Keep things consistent. This means all graphic styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. - Please reference the provided GUI PSD Kit to help make your design consistent across the application. Target User - Potential Customer - Current Customer Judging Criteria - How well you update & create the Product Details graphics and keep things consistent with the current site design. - Cleanliness of your graphics and design - 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file. Final Fixes As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Round 1
Your submitted design solution for a review.
Enhanced looks of Product Details(s)
Notes.jpg: Any comments about your design for the Client
Round 2
Final All requested items
Enhanced looks of Product Details(s)
Notes.jpg: Any comments about your design for the Client
Hestia is always looking to give their customers a better user experience by providing new and up-to-date features in their B2B Web Application. For this contest we have provided the old design source for the Hestia "Product Details" page. We would like you to update the design based on our new requirements. Always check the PSD GUI Kit to make sure your being consistent with the Hestia design theme Design Requirements: 1). Updates - Update Top Header Area into the current Hestia header design - Notice the "Location" link removed from the current layout - Notice the "Username" color difference. - "Current Branch" label has different color. - Update to the correct logo - Notice the Top Navigation is updated into "Orders", "Site Tools", "Profile" and "Help". - Update the "Product Search" Bar, "Cart" and "My Lists" bar into new look and feel. - Update the breadcrumb style, notice the updated look of home icon and the arrow. - Update the footer area into the new style. - You can re-use all NEW look and feel UI Elements list stated above from New-Design/Search-Bar-Filter/search_results_update.psd - We might miss some elements, please refer to our latest GUI Kit to help you upgrade the look and feel for every UI elements in all submissions screens. 2). Enhancements - Please create separate screens for all new pages, that will help us explain correct flow. - Update the tab looks and feel on this page ( You can re-use the updated style from New-Design/Search-Bar-Filter/search_results_update.psd) - We need to place product/company logos for the "product details" - where should the product logos go? - Switch the "Product #" and the "Product description" - Update the new style for email/print icons ( You can re-use the updated style from New-Design/Memo-Email-Print/Email-Print.UX.Improvement.v2.psd ) - We need to update/fix the "availability" (look at the 02_review_tab.jpg - it doesn't make a lot of sense). - Update to the correct "Green", "ADA Complaint", "Lead Law" icon ( You can re-use the updated style from GUI-Kit03_GUI_Page_layout_elements.psd) - In the right column "Also Interested In" needs an updated title = "People Who Bought This Also Bought". And please limit the list to 5 items - Update the Quantity input into new looks like in New-Design/Search-Bar-Filter/search_results_update.psd. Make sure the input can support 6 characters - In the right column top placed a Product Video, we need a way when click the modal window, it will show in modal style and also help use create the navigation to show additional/related videos - Bottom carousel becomes "recently viewed items" - use correct tab and design. - Update the "Catalog Page No. 12345" We need a dropdown or some function around this, the product might be in multiple catalogs so the user should be able to select the catalog they want to go see or download. - We're looking for user friendly solutions that will also improve the usability for this page. IMPORTANT - Keep things consistent. This means all graphic styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. - Please reference the provided GUI PSD Kit to help make your design consistent across the application. Target User - Potential Customer - Current Customer Judging Criteria - How well you update & create the Product Details graphics and keep things consistent with the current site design. - Cleanliness of your graphics and design - 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 All Requested Contest Submission Requirements stated above. Source Files All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file. Final Fixes As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.