Challenge Summary
Welcome to the Hestia B2B "Continue Shopping" Wireframe Contest.
We are looking for the Studio Wireframing community to help us modify/fix a usability issue within the Hestia B2B application. Please read the contest details below and help design a better "Continue Shopping" experience for the Hestia customer.
font color="#2A81B3">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. The Hestia B2B application doesn't work like a normal ecommerce B2C site where a user places items into a shopping cart, can begin the checkout process and then "continue shopping" for more products (within their existing shopping cart). Because of existing business rules Hestia "locks" the user into the "checkout process" and allows them to "continue shopping" by using a "modal window" experience. The user can still perform the same functions within the "modal window continue shopping" process but its cumbersome and not a very good use experience. The goal of this contest is for you to analyze the current situation, the rules around this process and to help design a better "continue shopping" experience. Wireframe Scenario Create your wireframes based on fol-prototype-credit-cards-v7/review_order.html (and any other pages you need to capture) Walk/click-through the prototype: 1) Shopping Cart /cart.html - This is the users Shopping Cart. They have been adding products to their cart so they can either "place an Order" or "Create a Quote" > Click on the green "Check Out" 2) Deliver To (step one of the checkout process) /ship_to.html - The user makes their shipping and date selections - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on "Continue Check Out" 3) Billing (step two of the checkout process) /billing_and_payment.html - The user makes billing selections - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on "Continue Check Out" 4) Review Order (step three of the checkout process) /review_order.html - The user reviews their order - On this screen they can now "Continue Shopping" if they forgot/need more products - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on the "Continue Shopping" green button > This POPS a Modal window that allows the user to Search for more products (Click on Search) > This shows products that you have search for > Now you can click on the "+ Cart" button to add this product to your EXISTING Order This is the EXISTING "Continue Shopping" user experience. As you can see its not very friendly and can be confusing: - Why am I now in a Modal window? - Why did I just not Continue Shopping for products like I had been doing earlier? The normal Search/Add product to cart process can be found here: /search_results_list.html - This is a search result page and you can add products to your cart - This is the normal search/select products process Problems we would like solved! - We would like the "Continue Shopping" experience to be the same if your within an order or not. (No Modal windows) - We would like the user to have the option to Continue Shopping within their current Order/Cart or start a new Order (and save their current Order as a Draft or even delete it) - How does a user know if they are in a live Order or not? - Does there need to be some kind of Current drafts widget? - What is some of the messaging the user will see? Do any of the buttons change? - Any other features to help create a better user experience? Important Notes about the current process: - Hestia B2B creates a "Draft" order when you begin your order process. You can save your Order and go find it later to complete it. - Once you create an Order your Shopping Cart is emptied - Once you leave the Order process any new products you add to your Cart would be for a new Order. Reference Prototypes We are providing 2 prototypes to show the current screens - they are the same application each is just focused on specific functionality fol-prototype-base - This shows the homepage - A user can find current order drafts in the "Check Your Online Order Status" - This is a pretty extensive prototype so you can click around and get a feel for the application fol-prototype-credit-cards-v7 This show the updated Checkout process: - Current Search - Add products to Cart - Shopping Cart - Checkout Process - Review Order (where the Continue shopping is triggered) - Order Complete IMPORTANT - Keep things consistent. We are looking for you to Wireframe us a solution. - Give us your thoughts/notes - and ask us any questions to clarify the issue! Target Audience - Potential Customer - Current Customer Judging Criteria - How well you create/update the Continue Shopping and it makes sense/helps the users - User Experience Submission & Source Files 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 Wireframes should be built in HTML, Axure, MS Visio or OmniGraffle. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow. Source Files All original source files of the submitted ideas. If you would like to submit notes please include ia notes.txt file. Final Fixes As part of the final fixes phase you may be asked to modify your wireframes.
Round 1
- Initial Continue Shopping Wireframes - Any notes for the Client to reviewRound 2
- FINAL Continue Shopping Wireframes - Any notes for the Client to reviewfont color="#2A81B3">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. The Hestia B2B application doesn't work like a normal ecommerce B2C site where a user places items into a shopping cart, can begin the checkout process and then "continue shopping" for more products (within their existing shopping cart). Because of existing business rules Hestia "locks" the user into the "checkout process" and allows them to "continue shopping" by using a "modal window" experience. The user can still perform the same functions within the "modal window continue shopping" process but its cumbersome and not a very good use experience. The goal of this contest is for you to analyze the current situation, the rules around this process and to help design a better "continue shopping" experience. Wireframe Scenario Create your wireframes based on fol-prototype-credit-cards-v7/review_order.html (and any other pages you need to capture) Walk/click-through the prototype: 1) Shopping Cart /cart.html - This is the users Shopping Cart. They have been adding products to their cart so they can either "place an Order" or "Create a Quote" > Click on the green "Check Out" 2) Deliver To (step one of the checkout process) /ship_to.html - The user makes their shipping and date selections - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on "Continue Check Out" 3) Billing (step two of the checkout process) /billing_and_payment.html - The user makes billing selections - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on "Continue Check Out" 4) Review Order (step three of the checkout process) /review_order.html - The user reviews their order - On this screen they can now "Continue Shopping" if they forgot/need more products - At this point you can "save" your order and it becomes a "draft" If you leave this screen your cart is now empty and to process this order you need to find the draft and continue the checkout steps. > Click on the "Continue Shopping" green button > This POPS a Modal window that allows the user to Search for more products (Click on Search) > This shows products that you have search for > Now you can click on the "+ Cart" button to add this product to your EXISTING Order This is the EXISTING "Continue Shopping" user experience. As you can see its not very friendly and can be confusing: - Why am I now in a Modal window? - Why did I just not Continue Shopping for products like I had been doing earlier? The normal Search/Add product to cart process can be found here: /search_results_list.html - This is a search result page and you can add products to your cart - This is the normal search/select products process Problems we would like solved! - We would like the "Continue Shopping" experience to be the same if your within an order or not. (No Modal windows) - We would like the user to have the option to Continue Shopping within their current Order/Cart or start a new Order (and save their current Order as a Draft or even delete it) - How does a user know if they are in a live Order or not? - Does there need to be some kind of Current drafts widget? - What is some of the messaging the user will see? Do any of the buttons change? - Any other features to help create a better user experience? Important Notes about the current process: - Hestia B2B creates a "Draft" order when you begin your order process. You can save your Order and go find it later to complete it. - Once you create an Order your Shopping Cart is emptied - Once you leave the Order process any new products you add to your Cart would be for a new Order. Reference Prototypes We are providing 2 prototypes to show the current screens - they are the same application each is just focused on specific functionality fol-prototype-base - This shows the homepage - A user can find current order drafts in the "Check Your Online Order Status" - This is a pretty extensive prototype so you can click around and get a feel for the application fol-prototype-credit-cards-v7 This show the updated Checkout process: - Current Search - Add products to Cart - Shopping Cart - Checkout Process - Review Order (where the Continue shopping is triggered) - Order Complete IMPORTANT - Keep things consistent. We are looking for you to Wireframe us a solution. - Give us your thoughts/notes - and ask us any questions to clarify the issue! Target Audience - Potential Customer - Current Customer Judging Criteria - How well you create/update the Continue Shopping and it makes sense/helps the users - User Experience Submission & Source Files 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 Wireframes should be built in HTML, Axure, MS Visio or OmniGraffle. The resulting files are not critical in this contest. The most important point is that all the content is listed and the pages are linked together to show page flow. Source Files All original source files of the submitted ideas. If you would like to submit notes please include ia notes.txt file. Final Fixes As part of the final fixes phase you may be asked to modify your wireframes.
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.