Problem identification
Micro-interactions
Usability testing
Improved Checkout completion by 29%
Enabled users to view and edit their cart content with a side cart
We initially assumed users are dropping off because the cart looked cluttered and overwhelming
Cleaning up and polishing the components was part of the plan however, looking into user behaviour revealed more.
Looking at heatmaps, I discovered users leaving the cart to go back to the shopping journey
Shoppers were adding all their “maybe” options to the cart, then navigating back and forth between the cart and product pages to compare, delete, and rethink. The real issue was the journey.
Users were dropping off because of long loading times
When users went back and forth between cart and product listing pages, they faced long loading times and some of them dropped off because of the frustration.
The checkout was built on a different platform than the rest of the website. Because of this, moving between the site and the checkout was sometimes slow, and it wasn’t something we could easily fix.
Strategy:
Let shoppers review and edit their cart without leaving the shopping experience.
The Side cart : Giving quick access to the cart
Through brainstorming with stakeholders and analyzing competitors, we introduced a Side cart that could be opened at any time, giving users the opportunity to check and adjust the contents of their cart without leaving the shopping journey. So they could move to checkout only when their decision was made.
Before: 10s on average load time
Browse
Load Cart
Check, remove, adjust
Load Catalog
Continue browsing
After: 0s load time
Browse
Open Side card
Check, remove, adjust
Continue browsing
Prioritized cart decisions on mobile.
After analyzing edge cases on mobile, I chose to leave out express payment options to keep the side cart focused on decision-making. Including them would have required adding coupon code fields as well. That was too much for a clean mobile experience. I chose to keep the side cart focused on reviewing and editing items, leaving express checkout for the full checkout page.
This added an extra step for shoppers who wanted express payment, but kept the side cart simpler and better suited to its main purpose.
Not enough space for more than 2 products
Cluttered interface
One more click and page load before user can use express checkout
Placed specs behind a tooltip
Based on user insights and data, I hypothesized that club specifications didn’t need to be visible at all times, since users were unlikely to add the same club to their cart with different specs. I proposed making specs secondary information, accessible through a tooltip.
I ran a usability test on maze with 12 users asking them to find "TaylorMade Qi10 regular. left-handed, New" on mobile, in a side cart filled with 4 items. The option with tooltips performed better.
Less cluttered
Focus on product title and decision making
Too many focus points, not easy to make a decision
Option 1
Option 2
The side-cart :
Giving quick access to the cart
Micro-interactions
Outcome and Impact
Users compare and adjust cart content easily without any load times
Decisions happen in the shopping flow, not after leaving it
Checkout conversion increased because users who enter checkout were more ready to purchase
initial 3 month Sales increased because of a cleaner checkout and a more streamlined experience
