Challenge Summary
Welcome to the shopEZGO.com Checkout Redesign Wireframe Contest. The goal of this contest is to redesign the layout of current SHOPEZGO.com Checkout Flow to more better, improve the usability and User Experience.
Shopping cart optimization has always been a challenge for online retailers. To the end-user, it seems like a simple step to purchasing, however there are many factors that go into having a nicely designed shopping cart. Please do some research before design submissions regarding ecommerce site user experience, especially for this contest you need to focus on Checkout Flow.
This contest timeline is quickened. Please Jump in Now!!
Please read the contest details below, and feel free to post your questions in forums.
Contest Details EZGO.com is U.S. based manufacturing company selling aftermarket parts and accessories to customers based mainly in the US via the site. SHOPEZGO.com is our sub company, we're always looking to give their customers a better user experience by providing new and up-to-date features in our B2C Web Application. Please research http://www.shopezgo.com/ to experienced and get more familiar with the website application. Check this references to help you create great wireframe: - http://articles.sitepoint.com/article/wire-frame-your-site - http://thinkvitamin.com/design/20-steps-to-better-wireframing/ - http://articles.sitepoint.com/article/tools-prototyping-wireframing - http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ - http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ - http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/ - http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/ - http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/ shopEZGO.com need new layout of their Checkout Flow site. The goal for the contest is to create more user friendly of shopEZGO.com shopping cart process, and REDUCE 5 STEP PROCESS. Our customers complain that its too many steps, Help us make the experience easier for the customer. Remember you must considered to improve the User Experience while redesign the flow. Do research and plan clever way how to represent information, interactions etc to users for eCommerce website like. We need the site to be presented much better and more professional. Design Requirements - Show us how best layout gonna looks like. - Improve the usability. - Create the layout that will increase the User Experience. - Attentions to all details elements and layout will be benefits to your submissions. - Main layout of your design must stay within 960px like existing layout of shopEZGO.com - We're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience. So bring all your creative idea!! Current Checkout Flow Step Reference File: Shopping Cart Process-screen shots.docx 1). Product Details Page Info: Product Page- select quantity to purchase here Improvement to do list: - Improve the layout of this page more better. - Item # and value not look prominent - Table not well designed, please give the art touch for the style, but still have shopEZGO theme - You can re-arrange position of each boxes placed in this page - Make the "+ Add to cart" have more have "Call to Action" button feeling. You're free to add some graphic on it. - Show us alternative of "Zoom", "Print" and "Email" icons positions. - Design Full Size image more better, this triggered when click zoom icon - Update the "Additional Info" more better - Update the "Related Items" more better - Please think about Additional Images more better - Show us how "People who Bought this item also purchased:" best practices gonna look like. 2). Preview Shopping Cart Info: Once you select, this preview of shopping cart comes up. Improvement to do list: - Everytime user click "+ Add to Cart" will showing overlay popup contains product added to Cart - Design this popup more better - You're free to improve the positions of content - How if more than 1 product gonna looks like? 3). Checkout Step 1 (Review Shopping Cart) Info: At this point, you would either click "continue shopping" or "begin checkout" This is the first step of the 5 step check out process- you can edit qty or delete an item, check approximate freight cost based on your zip code in this screen, and also redeem "coupon code" if applicable then "begin secure checkout" to proceed to step 2 of 5. Improvement to do list: - This is Step 1 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - Design the table looks and feel more better - Improve all buttons to have more good Call to Actions - How if more than 1 product gonna looks like? - Is quantity already in good usage? Show us another solutions. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 4). Checkout Step 2 (Get Started) Info: Account Set Up or Log in as an existing user Improvement to do list: - This is Step 2 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve all buttons to have more good Call to Actions - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 5). Checkout Step 3 (Billing/Shipping Addres) Info: After logging in as an existing user, takes you to step 3 of 5 (billing/shipping address) Improvement to do list: - This is Step 3 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve "Continue to Payment" to have more good Call to Actions - How to make the message placed in top can tell the information more better. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 6). Checkout Step 4 (Payment/Shipping Info) Info: After you update, you go to "continue to payment"- which takes you to step 4 of 5. In this process, you are selecting your preferred dealer (system generates top 3 closest dealer based on customer address), choose freight method and select method of payment "PayPal or Credit Cards". Improvement to do list: - This is Step 4 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve all buttons to have more good Call to Actions - How if more than 1 product gonna looks like? - Pop Up Box Appears after you enter all your credit card information, please improve this - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 7). Checkout Step 5(Order of Complete) Info: Confirmation Page: Step 5 of 5 - This is Last Step of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 8). Find Year and Model - Improve "How to find the manufacturing code and serial and number" more informative. - Update the EZ-GO Model Description so it will become more have good proporsitions. Please show us how the Product title and Product Description flexibility that will be used for future contest. - How to make user more noticeable about the note? Target Audience - Potential Customer - Current Customer Judging Criteria - How well you update the navigation and it makes sense/helps the user - Consistency layout - 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
Submission design for client review Product Details Page(s) Simplified Checkout Flow Step(s) Find Year and Model(s) Please number your screens (01,02,03,04,05,06 etc)Round 2
Final Design Product Details Page(s) Simplified Checkout Flow Step(s) Find Year and Model(s) Please number your screens (01,02,03,04,05,06 etc)Contest Details EZGO.com is U.S. based manufacturing company selling aftermarket parts and accessories to customers based mainly in the US via the site. SHOPEZGO.com is our sub company, we're always looking to give their customers a better user experience by providing new and up-to-date features in our B2C Web Application. Please research http://www.shopezgo.com/ to experienced and get more familiar with the website application. Check this references to help you create great wireframe: - http://articles.sitepoint.com/article/wire-frame-your-site - http://thinkvitamin.com/design/20-steps-to-better-wireframing/ - http://articles.sitepoint.com/article/tools-prototyping-wireframing - http://sixrevisions.com/user-interface/10-tips-for-optimizing-web-form-submission-usability/ - http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/ - http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/ - http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/ - http://www.smashingmagazine.com/2007/10/09/30-usability-issues-to-be-aware-of/ shopEZGO.com need new layout of their Checkout Flow site. The goal for the contest is to create more user friendly of shopEZGO.com shopping cart process, and REDUCE 5 STEP PROCESS. Our customers complain that its too many steps, Help us make the experience easier for the customer. Remember you must considered to improve the User Experience while redesign the flow. Do research and plan clever way how to represent information, interactions etc to users for eCommerce website like. We need the site to be presented much better and more professional. Design Requirements - Show us how best layout gonna looks like. - Improve the usability. - Create the layout that will increase the User Experience. - Attentions to all details elements and layout will be benefits to your submissions. - Main layout of your design must stay within 960px like existing layout of shopEZGO.com - We're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience. So bring all your creative idea!! Current Checkout Flow Step Reference File: Shopping Cart Process-screen shots.docx 1). Product Details Page Info: Product Page- select quantity to purchase here Improvement to do list: - Improve the layout of this page more better. - Item # and value not look prominent - Table not well designed, please give the art touch for the style, but still have shopEZGO theme - You can re-arrange position of each boxes placed in this page - Make the "+ Add to cart" have more have "Call to Action" button feeling. You're free to add some graphic on it. - Show us alternative of "Zoom", "Print" and "Email" icons positions. - Design Full Size image more better, this triggered when click zoom icon - Update the "Additional Info" more better - Update the "Related Items" more better - Please think about Additional Images more better - Show us how "People who Bought this item also purchased:" best practices gonna look like. 2). Preview Shopping Cart Info: Once you select, this preview of shopping cart comes up. Improvement to do list: - Everytime user click "+ Add to Cart" will showing overlay popup contains product added to Cart - Design this popup more better - You're free to improve the positions of content - How if more than 1 product gonna looks like? 3). Checkout Step 1 (Review Shopping Cart) Info: At this point, you would either click "continue shopping" or "begin checkout" This is the first step of the 5 step check out process- you can edit qty or delete an item, check approximate freight cost based on your zip code in this screen, and also redeem "coupon code" if applicable then "begin secure checkout" to proceed to step 2 of 5. Improvement to do list: - This is Step 1 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - Design the table looks and feel more better - Improve all buttons to have more good Call to Actions - How if more than 1 product gonna looks like? - Is quantity already in good usage? Show us another solutions. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 4). Checkout Step 2 (Get Started) Info: Account Set Up or Log in as an existing user Improvement to do list: - This is Step 2 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve all buttons to have more good Call to Actions - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 5). Checkout Step 3 (Billing/Shipping Addres) Info: After logging in as an existing user, takes you to step 3 of 5 (billing/shipping address) Improvement to do list: - This is Step 3 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve "Continue to Payment" to have more good Call to Actions - How to make the message placed in top can tell the information more better. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 6). Checkout Step 4 (Payment/Shipping Info) Info: After you update, you go to "continue to payment"- which takes you to step 4 of 5. In this process, you are selecting your preferred dealer (system generates top 3 closest dealer based on customer address), choose freight method and select method of payment "PayPal or Credit Cards". Improvement to do list: - This is Step 4 of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - Improve all buttons to have more good Call to Actions - How if more than 1 product gonna looks like? - Pop Up Box Appears after you enter all your credit card information, please improve this - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 7). Checkout Step 5(Order of Complete) Info: Confirmation Page: Step 5 of 5 - This is Last Step of Checkout Process - Please redesign progress steps more better, do research of Progress Steps best practices. - is the boxes already in best layout? Show us how to improve them. - You're free to improve the layout using in checkout step. Remember we're looking for ideas and concepts around usability, functionality and ultimately, GREAT customer experience 8). Find Year and Model - Improve "How to find the manufacturing code and serial and number" more informative. - Update the EZ-GO Model Description so it will become more have good proporsitions. Please show us how the Product title and Product Description flexibility that will be used for future contest. - How to make user more noticeable about the note? Target Audience - Potential Customer - Current Customer Judging Criteria - How well you update the navigation and it makes sense/helps the user - Consistency layout - 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.