Challenge Summary
Contest Summary
Welcome to the 20 Hour "Hestia B2B Checkout Flow Design Updates 3" Contest. The goal of this contest is to Update the provided screens and PSD files based on the listed requirements.
This contest has a FAST! (20 hour!) Deadline - Expect at least 1 Round of Final Fixes!
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 new user interface for the B2B Application. This contest is updating the Hestia B2B Users "Checkout" and Credit Card payment process. Hestia B2B User Profile - The Hestia B2B User is a customer who has established credit with Hestia. - Hestia would now like to offer this customer the opportunity to pay with a Credit Card. Contest Deliverables We have been working on the user flow the last few months - this contest is an update/reworking of the provided user flow. Reference the provided prototype and update the provided PSD files. - Open the prototype files and start on "cart.html" - click on the "order" button - You are taken to "review_order.html" - We now want the user to see the items we have have listed under Step 2 (Billing & Shipping) - Billing & Shipping becomes "Step 1" Step 1: Billing & Shipping shipping_and_billing.html - Update this page so its now Step 1 Files and screens to be updated/renamed: 1. step2_shipping_billing_avail_address.psd 2. step2_shipping_billing_counter_pickup_and_saved_credit_card.psd 3. step2_shipping_billing_default_account.psd 4. step2_shipping_billing_new_address.psd - Swap Checkout Step 2 Designs from Billing & Shipping to Order Information Designs. - Updates steps and terminology to other screens. Right Column Update shipping choices to: - Pickup $0 should be seen - Regular shipping $50 should be seen - Second Day $100 should be seen - Next Day $150 should be seen - LTL shipping (icon) $200 should be seen Note 1: We need an icon to indicate special shipping for products over 125 lbs. (maybe something with "LTL" and truck combination) Note 2: Shipping choices are only shown when the user selects a shipping address Step 2: Review Order order_information_review_order.html - Update the page so its now Step 2 - All items except "Order Information" have the "edit" button - Order Information should look like the "Order Information" on this page (review_order.html) Files to be updated/renamed: step1_order_information.psd - Swap Checkout Step 1 Design from Order Information to Billing & Shipping Designs. - Updates steps and terminology to other screens - Make sure the calendar icon is being used. Right Column - Please re-use existing designs Order Detail Product Table: (bottom of the page) order_information_review_order.html - When the user arrives on this page they need to be alerted to what products in their cart cannot be purchased with a Credit Card. - NonStock Products and Products that have Notes cannot be purchased using a Credit Card. - Separate the "Order Details" table into 2 tables. The top table shows items that need to be purchased using their "Account" the bottom table shows products that need to be purchased using their "Credit Card" - What are the graphics/indicators used to show how these 2 items are different? - IF the user doesn't modify any of their NonStock products- when they click Submit Order they will be presented with a modal window asking them if they want to: - "Pay with my Account", - "Move Non Credit Card items to another Order" - "Delete Non Credit Card items and pay with my Credit Card" (You can update the wording on these items) Checkout Step 3: Thank you Submission File : step4_thank_you.psd - Updates steps and terminology like other updated screens - Update Order Details table like Billing and Shipping changes Miscellaneous Update search_results_list.html - We need an icon to indicate a "Product can be purchased with a Credit Card". - The icon needs to work with the current icons shown on the search results page (the leaf, truck etc) Resources & Requirements 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. Judging Criteria - How well you update & create the new merchandising graphics and keep things consistent with the current site design. - Cleanliness of your graphics and design - User Experience Contest Deliverables Checkout Step 1 - Shipping & Billing Checkout Step 2 - Review Order Checkout Step 3 - Thank You 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, images (sizes or colors) or modify overall colors.
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 new user interface for the B2B Application. This contest is updating the Hestia B2B Users "Checkout" and Credit Card payment process. Hestia B2B User Profile - The Hestia B2B User is a customer who has established credit with Hestia. - Hestia would now like to offer this customer the opportunity to pay with a Credit Card. Contest Deliverables We have been working on the user flow the last few months - this contest is an update/reworking of the provided user flow. Reference the provided prototype and update the provided PSD files. - Open the prototype files and start on "cart.html" - click on the "order" button - You are taken to "review_order.html" - We now want the user to see the items we have have listed under Step 2 (Billing & Shipping) - Billing & Shipping becomes "Step 1" Step 1: Billing & Shipping shipping_and_billing.html - Update this page so its now Step 1 Files and screens to be updated/renamed: 1. step2_shipping_billing_avail_address.psd 2. step2_shipping_billing_counter_pickup_and_saved_credit_card.psd 3. step2_shipping_billing_default_account.psd 4. step2_shipping_billing_new_address.psd - Swap Checkout Step 2 Designs from Billing & Shipping to Order Information Designs. - Updates steps and terminology to other screens. Right Column Update shipping choices to: - Pickup $0 should be seen - Regular shipping $50 should be seen - Second Day $100 should be seen - Next Day $150 should be seen - LTL shipping (icon) $200 should be seen Note 1: We need an icon to indicate special shipping for products over 125 lbs. (maybe something with "LTL" and truck combination) Note 2: Shipping choices are only shown when the user selects a shipping address Step 2: Review Order order_information_review_order.html - Update the page so its now Step 2 - All items except "Order Information" have the "edit" button - Order Information should look like the "Order Information" on this page (review_order.html) Files to be updated/renamed: step1_order_information.psd - Swap Checkout Step 1 Design from Order Information to Billing & Shipping Designs. - Updates steps and terminology to other screens - Make sure the calendar icon is being used. Right Column - Please re-use existing designs Order Detail Product Table: (bottom of the page) order_information_review_order.html - When the user arrives on this page they need to be alerted to what products in their cart cannot be purchased with a Credit Card. - NonStock Products and Products that have Notes cannot be purchased using a Credit Card. - Separate the "Order Details" table into 2 tables. The top table shows items that need to be purchased using their "Account" the bottom table shows products that need to be purchased using their "Credit Card" - What are the graphics/indicators used to show how these 2 items are different? - IF the user doesn't modify any of their NonStock products- when they click Submit Order they will be presented with a modal window asking them if they want to: - "Pay with my Account", - "Move Non Credit Card items to another Order" - "Delete Non Credit Card items and pay with my Credit Card" (You can update the wording on these items) Checkout Step 3: Thank you Submission File : step4_thank_you.psd - Updates steps and terminology like other updated screens - Update Order Details table like Billing and Shipping changes Miscellaneous Update search_results_list.html - We need an icon to indicate a "Product can be purchased with a Credit Card". - The icon needs to work with the current icons shown on the search results page (the leaf, truck etc) Resources & Requirements 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. Judging Criteria - How well you update & create the new merchandising graphics and keep things consistent with the current site design. - Cleanliness of your graphics and design - User Experience Contest Deliverables Checkout Step 1 - Shipping & Billing Checkout Step 2 - Review Order Checkout Step 3 - Thank You 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, images (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.