Challenge Summary
Welcome to the Hestia B2B "Continue Shopping" Merge Design Storyboard Contest. We are looking for the Studio Design community to help us modify/fix a usability issue within the Hestia B2B application. Read the contest details below and help design better "Continue Shopping" experience for the Hestia customer.
Round 1
- Initial "Continue Shopping" Storyboards with your updated flow
- Any notes for the Client to review
Please number your screens (01,02,03,04,05,06 etc)
Round 2
- FINAL "Continue Shopping" Storyboards
- Any notes for the Client to review
Please number your screens (01,02,03,04,05,06 etc)
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 (Business to Consumer) 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/pop up 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 user experience.
The goal of this contest is for you to analyze the current user experience, the rules around this shopping process and to help design a better "continue shopping" experience. This is a continuation of a previous Studio contest. We would like you to review the provided Wireframes and Storyboards and help refine and create a better "Continue Shopping" experience (without modal/pop up windows!!)
Reference Files
Continue-Shopping-Wireframe (attached)
- We like the idea of the Order Status widget that appears during your "continue shopping experience" (see Product Search Results Live Order)
- How should this work? Can this be integrated in a better Continue Shopping Experience
Continue-Shopping-Storyboard (attached)
- We like how this flow but can the Order Status widget be added in? Can this be simplifeid even more where the user is very aware that they are in their current or new order?
FOL-Homepage-NEW.psd (attached)
- Use this design for any new homepage updates
Design Scenario
Create your Storyboards based on the provided files:
- fol-prototype-merge (reference prototype/steps)
- Continue-Shopping-Storyboard (storyboards from previous contest)
- Continue-Shopping-Wireframe (wireframes from pervous contest)
- FOL-Homepage-NEW.psd (homepage update from previous contest)
Walk/click-through the prototype:
1) Updated Home /homepage.html
- How will the widget work/display on this page?
2) 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"
- How will the widget work/display on this page?
3) Deliver To (step 1 of the checkout process) /checkout_order_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) /checkout_order_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) /checkout_order_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 (at the bottom) > 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. (We want to improve this!!)
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
- We would like the "Continue Shopping" experience to be the same if your within an order or not. (No Modal/Pop 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?
- Review the attached files from the previous contest - we want you to expand/fix/refine/design based on these winning submissions.
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
- A user can find current order drafts in the "Check Your Online Order Status" (Homepage right side)
IMPORTANT - Keep things consistent.
- This means your elements should work together within Checkout Flow.
- All of the graphics should have a similar feel and usability with Checkout Order.
Target Audience
- Potential Customer
- Current Customer
Judging Criteria
- How well you create/update the Continue Shopping and it creates a better user experience
- Consistency Layout
- 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.