Checkout Redesign

Identify Pain Points

  • Looking for help
  • Process too long
  • Stuck on an error
  • Forced registration
  • Security concerns
  • Repetitive data entry
  • Problem retrieving account credentials
  • Missing navigation to edit cart
  • Missing navigation to keep shopping
  • Wants to see products purchasing
  • Missing preferred payment type
  • Required to provide personal information
  • Return policies missing/not accessible
  • Shipping options not clear
  • Unclear delivery dates
  • Shipping address not recognized
  • Problems applying gift card
  • Unclear how much is getting charged to credit card
  • Problems applying promo code
  • Unclear how much I saved due to promo code
  • Billing address error
  • Order reviews is another step
  • Order confirmation is a dead end

Iterative Design circa October 2011

Visual Cleanup

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.

Explore Mental Models of UI Elements

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.

Chunking Steps

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.

Flesh Out Cart Summary

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.

Iterate, Iterate, Iterate

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.

User Testing

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.

Selling Change

Always be planning ahead

Make the UI more touch-friendly and introduce concrete shipping estimates

Silver Bullet

Explore usability of one-page checkout and feasibility from a business perspective

One Page Checkout w/ Bootstrap