Streamlining the checkout
Streamlining the checkout
Streamlining the checkout
Increasing checkout completion rates by 29%
Streamlining the checkout
Increasing checkout completion rates by 29%
My role:
I led the designs for a revamp of the cart/checkout experience that included 3 flows of buying, selling and trading. Below you can find parts of the buying experience.
I lead the designs for a revamp of the cart/checkout experience that included 3 flows of buying, selling and trading. Below you can find some designs from the buying experience.
Results:
29%
Checkout completion rate
20%
Lower cart drop offs
10%
Increase in checkout speed
Industry
E-commerce
Team
Product manager, 3 devs
Platforms
Web and mobile
Timeline
3 months
Industry
E-commerce
Team
Product manager, 3 devs
Platforms
Web and mobile
Timeline
4 months
My role:
I led the designs for a revamp of the cart/checkout experience that included 3 flows of buying, selling and trading. Below you can find parts of the buying experience.
Results:
29%
Checkout completion rate
20%
Lower cart drop offs
10%
Increase in checkout speed
Industry
E-commerce
Team
Product manager, 3 devs
Platforms
Web and mobile
Timeline
4 months
Opportunity: How might we reduce cart drop offs
Analytics showed we had 75% drop offs from our cart. Even-though cart drop offs are common but this number was higher than the industry average.
User observation: Users were using the cart as a "wish list" and going back and forth
Observing user behavior showed us a pattern:
Shoppers adding all their “maybe” options to the cart, then navigating back and forth between the cart and product pages to compare, delete, and rethink.
Heatmap of the old cart showing a high number of users going back to the shopping journey
User friction: Long load times between cart and shopping
This back and forth created friction for users and led to high drop offs from the flow.
This could not be easily fixed because the checkout was part of a different platform integration.
Long load times when users left the cart to go back to the shopping journey.
Strategy
Users often go back and forth between browsing and their cart due to decision difficulty. Since checkout is on a separate platform, this process is slow. Allowing users to access their cart or wishlist during browsing could streamline their shopping journey.
The side-cart
Through brainstorming with stakeholders, 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.
The shopping flow - Add to cart to checkout
The shopping flow - Add to cart to checkout
The shopping flow - Add to cart to checkout
The shopping flow - Add to cart to checkout
Side cart - Desktop and mobile
Side cart - Desktop and mobile
Side cart - Desktop and mobile
Side cart - Desktop and mobile
Design Tradeoffs
Not showing express checkout on the side cart, showing them 1 step later at the cart instead.
We had some discussions with stakeholders around showing express checkout methods like Apple pay on the side cart. After analyzing pros and cons we 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, and having these options presented at checkout was the trade-off we decided to go with.
We had some discussions with stakeholders around showing express checkout methods like Apple pay on the side cart. After analyzing pros and cons we chose to leave out express payment options from the side cart and 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, and having these options presented at checkout was the trade-off we decided to go with.
We had some discussions with stakeholders around showing express checkout methods like Apple pay on the side cart. After analyzing pros and cons we chose to leave out express payment options from the side cart and 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, and having these options presented at checkout was the trade-off we decided to go with.
Express checkout options being present on the first step of the checkout process instead of the side cart
Express checkout options being present on the first step of the checkout process instead of the side cart
Express checkout options being present on the first step of the checkout process instead of the side cart
Express checkout options being present on the first step of the checkout process instead of the side cart
Keep specs or hide
Another decision made was to show product specs on hover on mobile, instead of showing them at all times. Reducing noise but allowing users to easily view them to make a decision.
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Keep specs or hide
Another decision made was to show product specs on hover on mobile, instead of showing them at all times. Reducing noise but allowing users to easily view them to make a decision.
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Keep specs or hide
Another decision made was to show product specs on hover on mobile, instead of showing them at all times. Reducing noise but allowing users to easily view them to make a decision.
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Impact : Fewer drop offs, More sales
The streamlined side cart experience—designed for speed and clarity—made it easier for users to review their selections and proceed with confidence.
Cart drop-offs decreased, and while fewer users started checkout, a higher percentage completed it.
I lead the designs for a revamp of the cart/checkout experience that included 3 flows of buying, selling and trading. Below you can find some designs from the buying experience.
Results:
29%
Checkout completion rate
20%
Lower cart drop offs
10%
Increase in checkout speed
Opportunity: How might we reduce cart drop offs
Observing user behavior showed us a common pattern:
Shoppers adding all their “maybe” options to the cart, then navigating back and forth between the cart and product pages to compare, delete, and rethink.
This back and forth created friction for users and led to high drop offs from the flow.
So we asked: how might we support decision-making earlier, without disrupting the shopping flow?
Analytics showed we had 75% drop offs from our cart. Even-though cart drop offs are common but this number was higher than industry average of 55%.
Analytics showed we had 75% drop offs from our cart. Even-though cart drop offs are common but this number was higher than industry average of 55%.
Analytics showed we had 75% drop offs from our cart. Even-though cart drop offs are common but this number was higher than industry average of 55%.
Heatmap of the old cart showing a high number of users going back to the shopping journey
Heatmap of the old cart showing a high number of users going back to the shopping journey
User observation: Users were using the cart as a decision making step and going back and forth
Observing user behavior showed us a common pattern:
Shoppers adding all their “maybe” options to the cart, then navigating back and forth between the cart and product pages to compare, delete, and rethink.
User friction: Long load times between cart and shopping
This back and forth created friction for users and led to high drop offs from the flow.
This could not be easily fixed because the checkout was part of a different platform integration.
Long load times when users leave the cart to go back to the shopping journey.
User friction: Long load times between cart and shopping
This back and forth created friction for users and led to high drop offs from the flow.
This back and forth created friction for users and led to high drop offs from the flow.
This could not be easily fixed because the checkout was part of a different platform integration.
This back and forth created friction for users and led to high drop offs from the flow.
This could not be easily fixed because the checkout was part of a different platform integration.