Challenge Summary
Welcome to the Hestia B2B "Mini Cart and Preloader" Design Contest. The goal of this contest is to redesign the Hestia "Mini Cart" and to help introduce design options for a Hestia visual "Preloader" to help improve the overall Hestia B2B user experience (UX).
Contest Details 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. Over the last few months the Studio Community has helped Hestia create a completely new user interface for the B2B Application. For this contest we have two items we need you to help design or rework. 1) We would like you to redesign and update the Hestia "Min-Cart" functions and how it displays within the Hestia application. 2) We would like you to design a visual "Preloader" to help Hestia customers understand that while they are waiting the server is actively working. (example: when a user hits Search - they see a visual preloader that tells them the application is searching) Submission Requirements: Current Hestia Mini Cart Scenario: A user can view their "mini shopping cart" if they click on the "Cart" link at the top of the B2B Application. The current "mini shopping cart" is anchored to the "Cart" link. We would like to move this to a Modal window design/function. If a user searches for a product and clicks on the "+ Cart" button the current "mini shopping cart" pops open and shows the user that the product has been added to their cart. This user experience is not ideal if you need to scroll a long list of products and want to add them to your Shopping Cart. We are looking for a new and improved "mini cart" user experience. 1). Create New Mini Cart Modal The Mini Cart Modal Window should show when "+ Cart" clicked in search_results_list.html and search_results_grid.html or if a user clicks on the "Cart" link at the top of the page. Image Reference: cart-example.jpg These elements should be in your new Mini Cart Modal Window: 1. Modal Window Title 2. Product Image (75px x 75px) 3. Product Name 4. Product Item Number 5. Quantity 6. Price 7. Extended Price 8. Continue Shopping Button 9. Go to Order Form Button - For Submission, please put your Mini Cart design into a screenshot of search_results_list.html and search_results_grid.html from attached prototype. - Reference the GUI Kit - this should look like its part of the Hestia application. 2). Create New Preloader - We need you to create a preloader design that we can use as part of the Hestia B2B GUI design. Preloader Scenario: There are situations within the Hestia B2B application where a user clicks a button/link and there is no visual cue to let them know that the application is processing their request. This can sometimes happen on the initial "sign-in" to the application or when the user clicks on "search" and the application needs to return thousands of product. We are looking for you to design how a preloader would help the Hestia user experience. - When a user clicks on "sign-in" do they see the preloader as part of the "sign in" button or next to the button? - When a user clicks on "search" where is the preloader presented to the user? - When a user clicks on "+ Cart" where is the preloader resented to the user? - When a modal window (like your new mini-cart) loads - how is the preloader presented to the user? - Preloader Reference: http://preloaders.net/ & http://ajaxload.info/ - Take a look at the provided prototypes - Your design must display smooth in every background color. - For your preloader design - send us your design plus an animated .gif or any animation extension file type to show how it works. 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 new "Mini Cart" and "Preloader" 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. 1) Mini Cart(s)- design options for review 2) Preload(s) - design options for review Notes.jpg: Any comments about your design for the ClientRound 2
Final All requested items 1) Mini Cart(s) 2) Preload(s) Notes.jpg: Any comments about your design for the ClientContest Details 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. Over the last few months the Studio Community has helped Hestia create a completely new user interface for the B2B Application. For this contest we have two items we need you to help design or rework. 1) We would like you to redesign and update the Hestia "Min-Cart" functions and how it displays within the Hestia application. 2) We would like you to design a visual "Preloader" to help Hestia customers understand that while they are waiting the server is actively working. (example: when a user hits Search - they see a visual preloader that tells them the application is searching) Submission Requirements: Current Hestia Mini Cart Scenario: A user can view their "mini shopping cart" if they click on the "Cart" link at the top of the B2B Application. The current "mini shopping cart" is anchored to the "Cart" link. We would like to move this to a Modal window design/function. If a user searches for a product and clicks on the "+ Cart" button the current "mini shopping cart" pops open and shows the user that the product has been added to their cart. This user experience is not ideal if you need to scroll a long list of products and want to add them to your Shopping Cart. We are looking for a new and improved "mini cart" user experience. 1). Create New Mini Cart Modal The Mini Cart Modal Window should show when "+ Cart" clicked in search_results_list.html and search_results_grid.html or if a user clicks on the "Cart" link at the top of the page. Image Reference: cart-example.jpg These elements should be in your new Mini Cart Modal Window: 1. Modal Window Title 2. Product Image (75px x 75px) 3. Product Name 4. Product Item Number 5. Quantity 6. Price 7. Extended Price 8. Continue Shopping Button 9. Go to Order Form Button - For Submission, please put your Mini Cart design into a screenshot of search_results_list.html and search_results_grid.html from attached prototype. - Reference the GUI Kit - this should look like its part of the Hestia application. 2). Create New Preloader - We need you to create a preloader design that we can use as part of the Hestia B2B GUI design. Preloader Scenario: There are situations within the Hestia B2B application where a user clicks a button/link and there is no visual cue to let them know that the application is processing their request. This can sometimes happen on the initial "sign-in" to the application or when the user clicks on "search" and the application needs to return thousands of product. We are looking for you to design how a preloader would help the Hestia user experience. - When a user clicks on "sign-in" do they see the preloader as part of the "sign in" button or next to the button? - When a user clicks on "search" where is the preloader presented to the user? - When a user clicks on "+ Cart" where is the preloader resented to the user? - When a modal window (like your new mini-cart) loads - how is the preloader presented to the user? - Preloader Reference: http://preloaders.net/ & http://ajaxload.info/ - Take a look at the provided prototypes - Your design must display smooth in every background color. - For your preloader design - send us your design plus an animated .gif or any animation extension file type to show how it works. 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 new "Mini Cart" and "Preloader" 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.