Checkout Flow Design
STUDENT PROJECT BY JACLYN LENEE ANDERSON & PHOEBE YANG !!
About True&CoTrue and Company is an online lingerie boutique that offers a free home try-on experience for their customers. Unlike department stores, users are sized for bras without the invasiveness of in-person measurements. Once the user completes a short fit quiz, a personal shop is created and they are given the opportunity to try before they buy.
About the projectAs part of a student project for General Assembly’s UX Design program, we met with client True&Co to discuss real challenges they face in their business. True&Co was seeing a large drop off at step 2 in the checkout process. We were tasked with determining possible causes for this drop off and designed two solutions that best address those issues.
True & Co is losing ⅔ of their customers in the final step of their checkout flow. Our goal was to optimize the process for their users in order to increase conversions.
THE CHALLENGE
Why do users abandon carts?
• Presented with unexpected costs!
• Return Policy hidden!
• Required to create account before checkout!
• Too many steps or clicks
Competitive analysisSOMA!
" 2-step process (+)!
" Bold call-to-action draws the eye to the right to place the order, above the fold (+)!
" Order is editable throughout the flow (+)!
" Users may continue shopping throughout the flow (+)
A
A A
Competitive analysisADORE ME!
" 1-step process is simple and may result in more conversions (+)!
" Return policy clearly stated under “place order” button (+)!
" Users are unable to edit/remove items in order summary (-)
D
E
A
A
Existing checkout flowWHAT’S WORKING!" 2-step flow!
" Clicks are minimized!
" Cart view after adding item shows up unobtrusively !
" Responsive website works well on mobile
A
A
VIEW EXISTING SITE
A
A
User research findings" 20 users interviewed!!Majority of users:!" 16 would like to edit items in cart before checkout!" 8 did not know upon first glance how many steps checkout would be!" 7 would like to checkout without registering for account!" 6 remarked on payment info being the first form fields (unusual)
“I really like the idea of having a personal shop!”
“If I’m editing my cart and it takes me back to home page, I think there is a bug in the website.”
“I always edit my cart before I checkout.”
“(Step 2) looks like an order success page.”
Shopping cart (13 in. monitor)
Home try-on cart
DESIGN GOALS
1. Reassure users 2. Enable users to complete tasks easily
Suggested solutions" Provide the option to remove/edit things in the cart (on a separate page) before placing order!
" Add reassuring message when hitting “Continue” on step 1 (“You will review your order details before placing your order on the next page)!
" Show the cart summary clearly on each step of the process!
" Move all call-to-action buttons and order details (shipping and billing addresses) above the fold
" Easily remove unwanted items from cart!
!" Switch to home try-on if
customer happens to be in “shopping cart” view !
!" Option to review shipping and
tax charges; prevent surprise upon seeing total charges.
Proposed Solution 1: View cart
VIEW WEB PROTOTYPEVIEW MOBILE PROTOTYPE
" Clear “place order” button above the fold!
!" Reassuring messaging!!" 1-step flow minimizes clicks
1
VIEW WEB PROTOTYPE VIEW MOBILE PROTOTYPE
A
B
A
B
Proposed Solution 2: One-Step
Recommended
