* BACKGROUND - Latest studies have shown that 60% of all checkouts on an ecommerce store ends with no conversions. As the industry evolved and enough time has elapse, many companies have the data which allows them to focus in on how to improve and optimize their checkout process for their particular industry. Aside from product cost and shipping cost, the checkout process is a major contributing factor when trying to convert on a sale.

* QUESTIONS - Why are users filling their shopping cart and not completing the purchase? How can the checkout process flow be changed to allow for a much better conversion rate? What are the areas to the checkout process that’s distracting users away from completing the purchase?

* GOALS - ease the usability of the current checkout system. Eliminate any visual cues that has no bearing to the Checkout process. Reduce duration for checkout process. Decrease shopping cart abandonment which ultimately leads to increase conversion rates on shopping bags.

* METHODOLOGY - implement the 1 page AJAX checkout flow to create a linear experience that many ecommerce companies have recently implemented which has been proven to increase their conversion rates.


User Flow Chart

This User Flow chart displays the experience flow that the user goes through from first browsing the website through completing the Checkout.




Below are the various log in state and descriptions that is specific for that particular section. Also, I’ve included various links to the log-in states. However, I’ve made certain buttons activated links so that you can navigate from one Log-in state to another. However, in a real world environment, if you click on any log in state, JavaScript will refresh the form fields without refreshing the page. Everything happens in live time, but as mentioned, this low level comp is to just navigate and compare log in states. On the shopping cart page, I’ve made both Checkout buttons (top and bottom) activated to lead you to the checkout page. Once on the Checkout page, you can click on any 3 options in the first part of the form to see how each user’s form will appear. Also, you can click on the “Edit Bag button” above the Order Summary on the right to navigate back to the Shopping bag.




( Click on either top or bottom “Checkout” Buttons to lead you to the Checkout Page. )

Once the user has entered the Shopping Bag Page, the High-Level Goal is to lead the user to finishing their shopping experience by verifying what they have gathered in their bag and then proceeding to the Checkout Page.

I have made several changes to your existing design in favor of usability and creating a conversion funnel leading to the Checkout page. Changes that I’ve made:




Once the user has entered the Checkout Page, they have made the decision to complete the sale with hopes of it being as simple and efficient as possible. The easier the usability the less stress the user has in completing the goal.

Upon arriving on the Checkout page, the user first automatically scans the page to see how difficult it would be in completing the checkout process and the security and trust factor. With the 1 Page checkout, the user can easily scan the whole process within a 1 page environment unlike what is currently on the existing site.

A major change that you will notice is the elimination of the main navigation and footer, along with the “Recommended items module”. As mentioned earlier, once the user has entered the Checkout Process, the goal is not to advertise other products, but to complete the goal of purchase, hence creating a conversion funnel environment. The only navigation that will lead to other pages would be the “Keep Shopping” link at the top and or the “Edit Bag” Link above the Order Summary on the right which will lead back to the shopping bag. All other links, such as the helpful links to the right and the shipping info, would all be popup windows so the user can get the info they need without having to navigate away from the page. Once the user has got the info they need, the popup goes away and appears the Checkout Page as they had last seen it and can continue with their process. This allows for a seamless process without breaking the experience of the checkout by having to navigate elsewhere on the site.


Log-in State


The Sign-in state is for users that already have an account. This option will be already activated once the user has arrived on the Checkout page. This saves the existing members one click to having to activate that radial button. Once the user completes typing in their password, they normally click anywhere outside the form field to activate the verifying process. Once it’s verified, AJAX will then transition in the stored info to its respective placement in the form. Once the info has been displayed, the user still has the option to correct their info or add new info by clicking on their respective links pertaining to updating their info. Once they click on the Edit buttons, The proper form fields will reappear via JavaScript.


NEW USER Log-in State


The New User Log- in state is for new shoppers that want to sign up for an account to receive promotional deals and offers. This log-in state has the most form fields to fill out based on the criteria that’s needed in creating a new account.

To reduce the amount the user has to type in, the option to ship the items to the billing address is automatically activated based on the data that most shipments are normally shipped to the billing address. The less fields the users see, the less stress they feel about the process. However, if the user would like to add a different shipping address, once they change the radial button to “Ship to different address”, the form fields will reappear and look just as the billing address form fields appear, but in the shipping section.


GUEST USER Log-in State


The Guest User Log-in State is similar to New User(Register) State with the exception that there is no need to create a password. And also gives this guest user the option to receive promotions just as you would if you were a member. The Guest can opt out by clicking the radial button to turn off this option.

Once the Guest has seen the Checkout form, they can then decide to change their log-in state and opt for creating a new account since its very much similar and the benefits of receiving future deals and promotion as well as having an Express checkout experience if their info was stored in the database, all these are enticing factors that will convert guest users to new members.



As you can see, with the 1 page checkout, the process for completing the checkout form has been reduced and optimized to alleviate the stress that the consumer may often go through when dealing with extensive forms. The overall work that I've done thus far is just a start of analyzing the checkout process from a User Experience point of view. I still have yet to display indepth the transition states for the form fields along with incorporating Brand colors, and refining the typography. The wireframe / low level comp that I present to you is to illustrate the new structure pertaining to content hierarchy and usability. This is no means a finished product that you would deploy but a starting point for discussion amongst the key stakeholders.

Also, this presentation was based on my knowledge and research on User Experience Designs and information architecture for the Ecommerce industry. To refine and hone these comps at an even greater advantage for the company would be to analyze the existing data from the website and see where the users are abondoning their shopping carts, and see exactly how the users are using the site.

All the best,
Huy "Wee" Tran