Challenge Summary
Welcome to the Hestia B2B "Payment Process" Storyboard Contest. The goal of this contest is to update the current "Order Review" and "Check-Out" screens to enable capturing credit card information if customers opt to use it for their payment, as well as creating a better user flow and direction.
At the end of this contest the Client is looking to have a clean set of Storyboards capturing all the current page requirements and any new suggestions you might have to improve the User Experience.
Refer to the Hestia B2B Style Guide for standard colors, fonts, styles, etc.
Read the Contest Details carefully and let Hestia know if you have any questions.
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. For a future release, Hestia wants to offer their customers the ability to pay with Credit Cards alongside their current payment method of using a preset billing account. We are looking for you to use your creative talents and experience in e-commerece to help polish this User Experience. Contest Requirements We are providing the current page design for the order review/checkout screens, please refer to the Order_Review.jpg and Order_Review_Shipping.jpg screens. We need you to update the current order review and check-out screens to enable capturing credit card information and shipping information. The flow of the pages and moving to a 1,2,3 process might be required (looking for your help here). We are also attaching wireframes (based on how the application currently uses modal windows) - The wireframe is one idea - we are looking for alternative ideas to this solution. DO NOT copy the wireframe - use it as a starting point. Do some research on popular e-commerce websites on how they handle payments options, tax and shipping options. Please show us what/how/where to capture the credit cards payments as an alternative option to a users normal billing account. Show us what fields needs to put on the screen, how many screens we might need and how the user interacts with them. The payment process needs to be reworked and what is the best solution for: - Accepting Credit Cards - Capturing Credit Card information and a Users Credit Cart information and Billing Address - Providing a user with estimated Shipping options (Next day, 2-Day etc) - Showing estimated Tax based on zip code - Can this all be provided in a 1 page solution? or does it go to a 2 page or a 3 page solution? Current Payment Flow - Every user who is signed up on B2B has a billing account associated with their account. - When a user clicks on the Create Order button from their shopping cart they see the "Review Order" screen - They have to input when their order is needed (Date Needed Field) - They click on an Available Address (all available ship-to addresses are added by an Admin) or create a new ship-to address. - They can then review their ship-to address - They can review the products they are purchasing - Submit Order. New Payment Idea - Every user who is signed up on B2B has a billing account associated with their account. - When a user clicks on the Create Order button from their shopping cart they see the "Review Order" screen - They have to input when their order is needed (Date Needed Field) - They pick their preferred payment, whether using current billing account (active) a saved Credit Card or use a new credit card. - If a user selects Credit Card - we need to capture the credit card information, user information, billing address etc. (We would like to avoid using the Modal window solution). - Customers will have the option to save their credit card information for future use. - They need to select their Ship-To Address - They need to review their list of products - They need to select a shipping option (Next day, 2-Day etc) - They Submit their Order Information needed for this contest. 1) Order information 2) Billing Information 3) Credit Card Information 4) Ship-To Information 5) Product Summary 6) Tax 7) Shipping Options Plus additional screens/options you think would help the order/payment workflow. Research popular e-commerce website like Amazon, eBay, Apple, Dell, and Zappos (and any others you can find/normally use). How do they handle capturing Credit Cards? How do they refer to capturing Tax? How do they offer Shipping services? see what is best for the Hestia B2B customer. Remember - keep it simple! Resources & Requirements - Please refer to the provided GUI PSD Kit if you need any Hestia B2B Application items. - DO NOT redesign the site (layout/colors/whitespace) - keep things consistent. This means all graphics styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. - Start with looking to the current flow and rework it with your new flow idea. - A major goal would be to keep it to a minimal amount of screens/steps, but a better work flow process with great user experience is expected. Please show us a better and efficient work flow. Target User - Users of the Hestia B2B Application - Assume Users know how to use the Application but are not necessarily web savvy. Judging Criteria - How well you create and update the requested Hestia B2B pages - Cleanliness of your graphics, design and ability to stay within the given design reference. - Usability enhancements (if needed) Contest Deliverables Round One New Payment Screens - your submitted design solution for a review Any additional pages you would like feedback on. NUMBER YOUR FILES Round Two All Requested Pages = Final Design 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.
Round 1
At the end of Round 1, the Client will choose five (5) Round 1 winners, each will win $50 as Round 1 Milestone Winners. These winners and any member who had a passing submission in round one will be eligible to compete in Round 2 for the additional $1000 in prizes.Round 2
Round 2 will start with the announcement of the Five (5) $50 Round 1 winners and their design review from the Client.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. For a future release, Hestia wants to offer their customers the ability to pay with Credit Cards alongside their current payment method of using a preset billing account. We are looking for you to use your creative talents and experience in e-commerece to help polish this User Experience. Contest Requirements We are providing the current page design for the order review/checkout screens, please refer to the Order_Review.jpg and Order_Review_Shipping.jpg screens. We need you to update the current order review and check-out screens to enable capturing credit card information and shipping information. The flow of the pages and moving to a 1,2,3 process might be required (looking for your help here). We are also attaching wireframes (based on how the application currently uses modal windows) - The wireframe is one idea - we are looking for alternative ideas to this solution. DO NOT copy the wireframe - use it as a starting point. Do some research on popular e-commerce websites on how they handle payments options, tax and shipping options. Please show us what/how/where to capture the credit cards payments as an alternative option to a users normal billing account. Show us what fields needs to put on the screen, how many screens we might need and how the user interacts with them. The payment process needs to be reworked and what is the best solution for: - Accepting Credit Cards - Capturing Credit Card information and a Users Credit Cart information and Billing Address - Providing a user with estimated Shipping options (Next day, 2-Day etc) - Showing estimated Tax based on zip code - Can this all be provided in a 1 page solution? or does it go to a 2 page or a 3 page solution? Current Payment Flow - Every user who is signed up on B2B has a billing account associated with their account. - When a user clicks on the Create Order button from their shopping cart they see the "Review Order" screen - They have to input when their order is needed (Date Needed Field) - They click on an Available Address (all available ship-to addresses are added by an Admin) or create a new ship-to address. - They can then review their ship-to address - They can review the products they are purchasing - Submit Order. New Payment Idea - Every user who is signed up on B2B has a billing account associated with their account. - When a user clicks on the Create Order button from their shopping cart they see the "Review Order" screen - They have to input when their order is needed (Date Needed Field) - They pick their preferred payment, whether using current billing account (active) a saved Credit Card or use a new credit card. - If a user selects Credit Card - we need to capture the credit card information, user information, billing address etc. (We would like to avoid using the Modal window solution). - Customers will have the option to save their credit card information for future use. - They need to select their Ship-To Address - They need to review their list of products - They need to select a shipping option (Next day, 2-Day etc) - They Submit their Order Information needed for this contest. 1) Order information 2) Billing Information 3) Credit Card Information 4) Ship-To Information 5) Product Summary 6) Tax 7) Shipping Options Plus additional screens/options you think would help the order/payment workflow. Research popular e-commerce website like Amazon, eBay, Apple, Dell, and Zappos (and any others you can find/normally use). How do they handle capturing Credit Cards? How do they refer to capturing Tax? How do they offer Shipping services? see what is best for the Hestia B2B customer. Remember - keep it simple! Resources & Requirements - Please refer to the provided GUI PSD Kit if you need any Hestia B2B Application items. - DO NOT redesign the site (layout/colors/whitespace) - keep things consistent. This means all graphics styles should work together. - All of the graphics should have a similar feel and general aesthetic appearance. - Start with looking to the current flow and rework it with your new flow idea. - A major goal would be to keep it to a minimal amount of screens/steps, but a better work flow process with great user experience is expected. Please show us a better and efficient work flow. Target User - Users of the Hestia B2B Application - Assume Users know how to use the Application but are not necessarily web savvy. Judging Criteria - How well you create and update the requested Hestia B2B pages - Cleanliness of your graphics, design and ability to stay within the given design reference. - Usability enhancements (if needed) Contest Deliverables Round One New Payment Screens - your submitted design solution for a review Any additional pages you would like feedback on. NUMBER YOUR FILES Round Two All Requested Pages = Final Design 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.