Challenge Summary
Welcome to the Hestia B2B 1-Click Purchase Design Contest. The goal of this contest is to create and design the user experience/click-path that allows a Hestia B2B customer to make an online purchase through a easier/more simple single click.
Round 1
Your submitted design solution for a review.
1). 1-Click Purchase Design(s)
2). Additional Flows of 1-Click Purchase Design(s)
Notes.jpg: Any comments about your design for the Client
Round 2
Final All requested items
1). 1-Click Purchase Design(s)
2). Additional Flows of 1-Click Purchase Design(s)
Notes.jpg: Any comments about your design for the Client
Contest Details
The Hestia UX team is now looking to improve the customer experience by allowing them the ability to check-out faster with a 1-Click Purchase Design. The goal is to go from their Shopping Cart to purchasing everything without needing to manually input their billing and shipping information. The customers billing and shipping information would already be saved from previous purchases.
Design Considerations
Click around and review at fol-prototype-merge/cart.html, please see "Checkout" Button and "Quote" text link.
1). 1-Click Purchase Design in Cart page
Image Reference: 1-click-purchase-sketch.jpg
- Use 0-Cart.psd as base of your submission.
- Please move "Is this special project? Get a Quote instead" to the left side of "CheckOut" button
- 1-Click Purchase area must consist of:
--- "Now you can place an order with just single click." text
--- Tooltips, hover at tooltips will let the customer know that the order will be shipped on the next delivery truck available and may be subject to back orders. Please show us better wording in tooltips content. You might need to create separate screen when hover at tooltips.
--- "Put these products on my account and send all items to my warehouse"
--- BUY NOW button
- All text in your design must be editable, DO NOT just crop image from screenshot.
- Remember, BUY NOW button should be of second importance button on the page. So, please show us what it should look like.
2). 1-Click Purchase Design in Draft Order page
- Please grab screens from fol-prototype-merge/draft_orders_review_order.html and put your NEW BUY NOW area in the bottom side below Submit Order button
- Your design should be consistent with your Cart design
3). 1-Click Purchase Design in Draft Quote page
- Please grab screens from fol-prototype-merge/draft_quotes_review_quotes.html and put your NEW BUY NOW area in the bottom side below Submit button
- Your design should be consistent with your Cart design
4). Additional Flow of 1 Click-Purchase
4.1). Click on BUY NOW > Success Message
- After click BUY NOW button it take our existing Success page (refer to checkout_order_confirm_page_account.html)
- Please create separate screens explaining the process flow.
4.2). Click on BUY NOW > Modal window "please enter your PO# and Job Name" > Success Message
- After click BUY NOW button it will load modals contains field of PO# and Job Name, refer to fol-prototype-merge/find_an_order_quote.html for PO# and Job Name fields.
- After submit form, it will take our existing Success page (refer to fol-prototype-merge/checkout_order_confirm_page_account.html)
- Please use existing Modal Windows style, refer to Hestia GUI Kit
- Please create separate screens explaining the process flow.
4.3). Click on BUY NOW > See confirmation page with editing capabilities > Success Message
- After click BUY NOW button it will take to our existing Confirmation page refer to fol-prototype-merge/draft_orders_review_order.html
- After submit form, it will take our existing Success page (refer to fol-prototype-merge/checkout_order_confirm_page_account.html)
- Please create separate screens explaining the process flow.
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 Hestia B2B Design Resource to help make your design consistent across the application.
Target User
- Potential Customer
- Current Customer
Judging Criteria
- How well you create the new 1-Click Purchase screens 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 or Adobe Illustrator and saved as layered PSD or AI 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.