The first low hanging fruit to tackle was modifying the visual design to reduce noise while still successfully chunking related pieces of content. The second was to provide shipping and tax information as early as possible. Shipping and tax relies on a zip code, and in our case shipping sometimes required an exact street address. A project to capture the zip code earlier in the funnel was ultimately brought into scope, but initially we sought to provide a teaser so the customer didn't think it was just missing.
One of the next goals was to play with the psychology of the user flow. We experimented with the idea of a tab structure, a pseudo one page checkout, and a horizontal timeline. These wireframes were shared for feedback to further guide us. Another pain point with the existing checkout at the time was that we asked customers for their email address right off the bat, which didn't bode well with customers so we moved it to the end of the personal information section. Lastly, you might notice that another goal was to draw greater awareness around customer service and return policies to provide assistance and reassurance to the customer.
You might have noticed in previous mockups that we were inviting users to sign in on the address information step of the checkout. The biggest problem that came from this was that a cart from previous logged in sessions would be merged with the current one and for some customers, this went unacknowledged. Market research showed a clear pattern towards having a individual page to sign in on. Little did I know, this was exactly what Academy used to have implemented, except they required the customers to enter their email address even when checking out as a guest. We reverted back to the sign in page, but simply eliminated the email address field making customers more at ease.
As mentioned previously, some customers failed to realize that their cart had grown when logging in on the first step of the checkout. Although we attempted to solve this by changing the point at which customers log in, we thought it would be best to reinforce what was in the customers cart by providing a visual cart summary within the checkout experience.
In the end, we combined the cart summary and the cost summary to provide on holistic view of your order -- something very similar to a store receipt. Additionally, we attempted to reduce the number of steps by combining both the shipping address and shipping method step. However, we soon discovered that we had technical limitations which required us to separate the shipping address from the shipping method so that the call to the shipping prices was isolated.
We came to agreement on a Beta product that I ended up developing a prototype for to complete moderated user testing in partnership with Usability Sciences. The feedback was overall positive and what little needed to be changed was updated in time for our second round of testing to validate. It wasn't long after testing that the engineers commenced development, referencing this prototype through fruition.View Prototype
With Checkout being the key to any ecommerce, we made sure to keep the momentum of testing month-after-month to monitor customer expectations.
Contributed to achieving a record-high conversion of 3.3% during Thanksgiving weekend. Also increased pass-through rate from Shipping Address to Shipping Method, and decreased checkout abandonment.
Always be planning ahead
Make the UI more touch-friendly and introduce concrete shipping estimates
Explore usability of one-page checkout and feasibility from a business perspectiveOne Page Checkout w/ Bootstrap