BONUS: 5‌ CHECKPOINTS AWARDED WORTH ‌$50‌ EACH

Register
Submit a solution
The challenge is finished.

Challenge Summary

Welcome to "Checkout Process UX Improvements Wireframes Challenge". In this challenge, we want to create a better UX for our checkout process, a purchase flow where "buyers" are directed to purchase an item on sale. At the end of this challenge, we expect an interactive wireframe to be produced where the user flows can bring significant improvements to our checkout process.

We need to see an intuitive and easy to use "wireframe concepts" that will let us design and build the final web interfaces. Think of what are the best UI/UX practices when creating the wireframe.

Good luck and let us know if you have any questions in the forum.

Round 1

Submit your initial wireframes for checkpoint review.
- Submit as much web application features as you can for early review
- Feel free to add any screens which are necessary to explain your concept.

Round 2

Submit your final wireframes
- Make sure to apply checkpoint review feedback in your final wireframe.
- Feel free to add any screens which are necessary to explain your concept.

Background Overview
Our Sellers (seller is a company or an individual which sells something online) are provided with an easy way to sell their digital (and sometimes tangible) goods and services by accepting variety of payment methods – including immediate (credit cards, paypal), cash based (Kanbini, Boleto) or "pay over time".  All payment related features will be managed through our services so that sellers can concentrate on creating value for their buyers while we handle all the "boring payment stuff", such as:

- Payment process (accepting credit card information and processing payment, allowing to checkout with PayPal etc). Sellers do not need to take care of their own merchant accounts, we do that.

- Compliance (Terms of Sale, Privacy Policy and additional check out requirements per country).

- Tax (collecting all applicable taxes and paying them on seller's behalf). Sellers do not need to register with all tax authorities and handle taxes.

- License generation and fulfillment.

We provide lots of features for sellers but those mentioned above are critical to understanding for the purposes of this project. 

Challenge Goals
Create a better checkout process for our sellers end user/buyer which can lead to improvements in User Experience 

Screen Size
We need to create both desktop and mobile for this web:
- Desktop: 1280px width with height adjusting accordingly
- Mobile: 375px width with height adjusting accordingly

Challenge Forum
https://apps.topcoder.com/forums/?module=ThreadList&forumID=614338

Existing Checkout Flow 
- To understand what we trying to improve, please check our existing flow. A good example for this can be simulated from http://daisydiskapp.com  (click 'Buy' button to start the checkout process)
- Once you simulated the existing checkout process, please read more details from “Pinhole Overhaul - Contextual Stores - Confluence.pdf” document
- Generally speaking, We provide sellers with the "online check out" – a URL to the seller's "store" where buyers can enter their payment details and receive the product at the end of the purchase.

Screen/Features Requirements:
When designing a better UX for this web app, you need to consider the following features improvement:

01) What is the best way to collect information from the buyer
- How to collect information if sellers don’t want to collect buyers information
- How to collect information if sellers want to collect buyers information
- What is the best flow so the buyer can easily and willing to enter their information?
- How can we manage all information like buyer personal information, cart/their shopping items, etc?   
- Note that no matter if sellers provide or do not provide that information, all buyers land to the same page which will look differently and have different fields based on the information provided (those fields and their conditions are outlined in the pdf).
- We see this as the biggest challenge – the UX improvement that you propose must account for all cases where fields are shown and not shown. 
- How to present the checkout page to the buyer if we need to collect all the informations (name, email, shipping address, etc)?
- How to present if we only need credit card details? 
- Both of those cases are served by the single screen which changes based on provided and required information. 
- We are looking for the best UX around these requirements to make sure that buyers are never confused and no matter what fields are required the page always looks good and clear
- Show us  the best flow to engage buyer to continue checkout process

02) How can we simplify buyer interactions to Initiate Checkout 
- What should be the best flow for the buyer when doing checkout so they can continue and finish all the process?
- The checkout process has a few distinct steps (https://vimeo.com/158247155):
-- Started on the seller website
-- Checkout window was shown
-- Validation (inline)
-- Completed
- How can we simplify buyer interactions when selecting payment method
- Simplification of Calculating Tax without making buyer confused and boring?
- How do we do data validation for the Buyer and provides a notification when something not right is happening without making buyer ran away from the checkout process? And how should we handle it if the data validation is a success? 
- You also need to cover all completion scenarios depending on the order flow and payment method, such as:
-- Order completed and fulfilled
-- Order completed but payment is still required
-- Order requires approval before it can be paid for

03) The UX improvements will be measured using the following factors: 
- Increased conversions from visit to purchase
- Improvements on payment method utilization, and 
- Reduction of the number of abandoned carts.

Target Audience
- Users are very diverse – given that our sellers sell goods for all audiences we serve "everyone", including Consumer Buyers and Business Buyers.

Learn Axure
- New to Axure? Here are some quick tutorials to help you get started: http://www.axure.com/support 

Judging Criteria
- User experience and information architecture
- Expanding upon and creating unique features for the provided concepts
- Visual-driven, clear, concise, and meaningful data display
- Capture all the required fields on every page
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent user flow

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 Plain HTML/CSS/JS or you can generate from Axure application. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.

Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file

Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • HTML
  • RP file created with Axure
  • Sketch

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30059023