Increased checkout completion by 29%
Increased checkout completion by 29%
Enabled users to view and edit their cart content with a side cart
Increased checkout completion by 29%
Enabled users to view and edit their cart content with a side cart
Context:
GolfAvenue in an online marketplace selling new and used golf equipment. The website was built fast and had many usability issues. Over the course of a year I designed and proposed improvements to the checkout experience and worked closely with the team to implement changes.
This case study is about part of the revamp, were we implemented a side-cart to improve checkout completion.
Results:
29%
Checkout completion rate
20%
Lower cart drop offs
10%
Increase in checkout speed
Industry
E-commerce
Team
Senior designer, PM, Devs
Platforms
Web and mobile
Timeline
1 year
Industry
E-commerce
Team
Senior designer, PM, Devs
Platforms
Web and mobile
Timeline
1 year
Context:
GolfAvenue in an online marketplace selling new and used golf equipment. The website was built fast and had many usability issues. Over the course of a year I designed and proposed improvements to the checkout experience and worked closely with the team to implement changes.
This case study is about part of the revamp, were we implemented a side-cart to improve checkout completion.
Results:
29%
Checkout completion rate
20%
Lower cart drop offs
10%
Increase in checkout speed
Industry
E-commerce
Team
Senior designer, PM, Devs
Platforms
Web and mobile
Timeline
1 year
PROBLEM
The company was estimating an annual $1M revenue loss from cart drop offs.
After optimizing the checkout experience and seeing results, we noticed there's still a lot of drop offs from cart to checkout. So it was time to focus on the cart.
WHAT WE INITIALLY ASSUMED
We initially assumed that users are dropping off because the cart looks messy
cleaning up and polishing the components was part of the plan however, looking into user behaviour revealed more.
WHAT USER BEHAVIOUR REVEALED
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.
Heatmap of the old cart showing a high number of users going back to the shopping journey
Users were dropping off because of long loading times
Whe 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.
Long load times couldn't be easily reduced
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.
Long load times when users left entered or left the checkout
Strategy
Giving users a side cart so they can easily review cart contents while browsing and avoid going back and forth between checkout and browsing.
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: 20s on average load time
Before: 20s on average load time
Browse
Load cart
Check, remove, adjust
Load catalog
continue browsing
After: Side card loads quickly
Browse
Open Side card
Check, remove, adjust
continue browsing
The shopping flow - From add to cart to checkout
The shopping flow - From add to cart to checkout
The shopping flow - From add to cart to checkout
DESIGN DECISIONS AND TRADEOFFS
Excluded Express Checkout CTAs from the side cart
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. Having these options only presented at checkout was the trade-off I decided to go with.
Option 1
Express checkout available on the side cart
Not enough space for more than 2 products
Cluttered interface
Option 2
Express checkout not available on the side cart
More space for products - easier decision making
Less cluttered- easier decision making
One more click and page load before user can use express checkout
Placed specs behind a tooltip
Based on user insight and data I knew users usually know the specs they need and it's unlikely for users to add the same product twice to cart with different specs. so specs are secondary information that can be hidden behind a tooltip. Also user testing showed users were easily able to find product specs by pressing on the tooltip.
Option 1
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Option 2
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Placed specs behind a tooltip
Based on user insight and data I knew users usually know the specs they need and it's unlikely for users to add the same product twice to cart with different specs. so specs are secondary information that can be hidden behind a tooltip. Also user testing showed users were easily able to find product specs by pressing on the tooltip.
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Specs available when clicking on the tooltips
Less cluttered
Focus on product title and decision making
Option 1
Specs available at all times
Cluttered interface
Too many focus points, not easy to make a decision
Option 2
Express checkout available on the side cart
Not enough space for more than 2 products
Cluttered interface
Option 1
Express checkout not available on the side cart
More space for products - easier decision making
One more click and page load before user can use express checkout
Option 2
FINAL DESIGNS
The side-cart : Giving quick access to the cart
Side cart - Desktop and mobile
Side cart - Desktop and mobile
Side cart - Desktop and mobile
Add to cart notification on mobile
Add to cart notification on mobile
Add to cart notification on mobile
Cart icon to side cart interaction on mobile
Cart icon to side cart interaction on mobile
Cart icon to side cart interaction on mobile
Add to cart notification on mobile
Cart icon to side cart interaction on mobile
IMPACT
User Impact:
Users compare and adjust cart content easily without any load times
Decisions happen in the shopping flow, not after leaving 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.
Business Impact:
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
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.
+29%
Checkout completion rate
-20%
Lower cart drop offs
10%
Increase in checkout speed
What I would measure next
Sales increased in the first couple of months I would track sales and compare them with previous years. Also I'd check whether moving express checkout behind one extra step cost anything at the payment stage.
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.
View next project
Redesign
E-commerce
Responsive web
14% higher conversion with design
Optimized the Trade-in flow while navigating risk and technical constraints.
Read case study
14% higher conversion with design
14% higher conversion with design
Optimized the Trade-in flow while navigating risk and technical constraints.
Optimized the Trade-in flow while navigating risk and technical constraints.
Redesign
E-commerce
Responsive web
14% higher conversion rate with design
Optimized the Trade-in flow while navigating risk and technical constraints.
Redesign
E-commerce
Lead designer
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.
Technical limitation: Long load times couldn't be easily reduced
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.
TECHNICAL LIMITATION
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.
TECHNICAL LIMITATION
Long load times when users leave the cart to go back to the shopping journey.
Long load times when users leave the cart to go back to the shopping journey.
Long load times when users left entered or left the checkout
Users were dropping off because of long loading times
Whe 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.
Long load times couldn't be easily reduced
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.
PROBLEM
The company was estimating an annual $1M revenue loss from cart drop offs.
After optimizing the checkout experience and seeing results, we noticed there's still a lot of drop offs from cart to checkout. So it was time to focus on the cart.
WHAT WE INITIALLY ASSUMED
We initially assumed that users are dropping off because the cart looks messy
cleaning up and polishing the components was part of the plan however, looking into user behaviour revealed more.
cleaning up and polishing the components was part of the plan however, looking into user behaviour revealed more.
WHAT USER BEHAVIOUR REVEALED
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.
Heatmap of the old cart showing a high number of users going back to the shopping journey
PROBLEM
The company was estimating an annual $1M revenue loss from cart drop offs.
After optimizing the checkout experience and seeing results, we noticed there's still a lot of drop offs from cart to checkout. So it was time to focus on the cart.
Heatmap of the old cart showing a high number of users going back to the shopping journey
Long load times when users left entered or left the checkout
Users were dropping off because of long loading times
Whe 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.
Long load times couldn't be easily reduced
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.
PROBLEM
The company was estimating an annual $1M revenue loss from cart drop offs.
After optimizing the checkout experience and seeing results, we noticed there's still a lot of drop offs from cart to checkout. So it was time to focus on the cart.
WHAT WE INITIALLY ASSUMED
We initially assumed that users are dropping off because the cart looks messy
cleaning up and polishing the components was part of the plan however, looking into user behaviour revealed more.
WHAT USER BEHAVIOUR REVEALED
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.