To improve it, we should measure it.

For example, as a business owner, you have 100,000 monthly visitors to your site. Your average transaction is $50.
Your conversion rate is 0.75% (or 750 customers).

By increasing your conversion rate by just 0.25%, you could earn an additional $12,500 each month—or $150,000 each year.
It also decreases CAC (customer acquisition costs) helping to save ad budget.

As we know the checkout process consists of cart and checkout.
So, these pages contribute to our Global goal - Conversion Rate.

So, it's logical to set specific metrics to cart and checkout pages in our conversion funnel.
This way we can measure and estimate the bottleneck scope.

Let's split our goals into subgoals

To define them, let's find the answer to basic questions:

What impacts the conversion rate?- bounce rate- pricing (high / discounts)- page layout- seasonal factors or special occasions- regional- competitive environment- new / returning visitors- technical issues (page speed, bugs etc)- lots of other factors (separately or a combination of them)
Every factor is helpful to the extent it could be measured and applied for a particular page.
What are the reasons for cart and checkout abandonment?We'll check it out below.
What are the key metrics for the Cart and Checkout pages to avoid abandonment?We'll find the answer to this question after the research below.
Why these KPIs matter to focus on them?
If we impact on these metrics, all of them will eventually influence the conversion rate.

69.82% – average documented online shopping cart abandonment rate
This value is an average calculated based on these 41 different studies containing statistics on e-commerce shopping cart abandonment.

Wolfgang, lets our set our primary focus on what we can influence by Design and UX including instruments we have the time.
Extra costs too highMake it transparent: UIEg Shipping and return information make clear and easy to find.
The site wanted me to create accountThe way to avoid creating: UX
Too long/complected checkout processOptimize checkout (forms, typography, steps): UX
I couldn't see/calculate total order cost up/frontMake it transparent: UI
I didn't trust the site with my credit card informationMake it credible: UX / UI / Copywriting
The website had errors/crushedTracking errors and log them: Analytics, Avoiding mistakes: UX / UI
They were not enough payment methodsIntegration: UX / UI
The credit card was declinedAvoiding confusion and offer alternatives: UX / UI
Re-entering info (eg card, shipping)Avoiding confusion and offer saving: UX
Discount / Promo code doesn't workAvoiding confusion and offer another code or solution: UX
As well as 30+ reasons

Annette, the main metrics these pages have in common are:

% or number exit rates from the page

% or number of moving to different pages from the conversion funnel (eg. About us, Home page)

Seconds. Page load time

% Overall abandonment rate across desktop, mobile web, mobile app, or tablet to spot the difference. Calculation example: if 100 people added items to their carts but only 25 of them converted, the cart abandonment rate is: 100/(100+25)=0.8=80%

% Checkout abandonment email conversion rate: the percent of recovery emails that result in a completed payment and recovered checkout.


For the cart page

% Average abandoned order value - what we loose


For the Checkout page

% Checkout abandonment click-through rate: the percent of recovery emails/messengers opened that result in a customer clicking and returning to your site.
The text gets boring.

A better way to visualize it and share with other stakeholders to understand my approaches to optimize metrics.

Why to structurize?
It will help us keep in mind different edge cases to avoid or minimize issues in purchasing scenarios.
Here is mindmap to keep organized information.It helps to refer later while designing with restrictions.

"Have been trying, and trying, to reach Crocs to return 3 pairs of shoes. No one ever answers the phone OR responds to emails. When you spell everything out in an email, you immediately get a response due to a heavy load unable to response... With each passing day, I'm getting more frustrated but doesn't do me any good."Elon B. about returns

"I won't ever again buy Crocs from their website again. Paid 40$ for shoes too big and had to pay 15$ to send them back because they don't provide free returns, as most of big stores do. This is ridiculous. If you ever think of buying Crocs, do yourself a favor and go buy them in a retailers store that sell them as part of other collections. At least you'll be able to return them if they don't fit and won't be as penalized as I was, because even the Crocs stores won't take them back if they were bought online. Really disappointed in this customer service."Barbara S. about returns

7/31/19 I ordered these shoes online at Crocs.com in my size. They should have shipped out 8/2/19, so I called last night the customer service number from their site (I thought they would've been closed but they were open). The guy told me they were out of stock. I wanted a supervisor and never got a callback. There is never a supervisor available. So I call this morning wanting a supervisor, one girl tells me I'm to get my shoes I ordered then I get a different answer from another girl that I won't. Then I get this email saying my order cancelled. The site is still showing my size women's 6/men's 4 is still in stock and the shoe isn't sold out! I want my shoes! If they are all sold out then they need to update the site to show that."Sandra B. about stock problems while purchasing

"Placed order on 7/23, paid $15 for 2-day shipping. Order didn't ship until 7/25 and tracking shows it isn't due to arrive until 7/29. Not sure in what country 23-29 equals 2-days, but that was not worth the $15 extra I ...
and lots and lots of reviews like these

Good question! Here is my approach.

Let's overview CROCS cart and checkout pages from different regions with the goal to find patterns and differences.

Let's try to stay in the customers' hat like the complaints above.

Consider I landed on German version with English language, and I want to buy a pair of Crocs to my cousin with shipment to London. Her birthday is soon.

Let's check out several regional Crocs websites and see how their functionality meets my scenario.

From these examples we see that there are variations on design elements in cart and checkout.

On one hand the "same size" doesn't fit all.

On the other hand, the design consistency will help to manage all the elements and shape the same UX, avoiding extra costs on website maintenance and branding consistency.

Note: we should also take into account specific use cases.

Remember above scenario:
Our customer Lives in Germany and want to buy a pair of shoes for a cousin to ship in the UK. Now our customer landed on German website.

While making purchase this customer wants easily change language, currency, shipping method and payment option.

As a designer, my aim is to make this experience as seamless as possible while optimizing conversion.

Before making it happen one needs to break down customers' expectations.

To maintain design consistency we should take into account common elements across all countries and specific elements regarding the particular country.

Common modules
Cart
- Navigation
- Estimated subtotal
- Cross sale items
- Footer

Checkout
- Shipping address
- Billing address
- Order total

Regional
Cart
- Different carts depending on the country

Checkout
- Currency
- Language
- Shipping methods
- Payment methods

Best practices
As we already know different edge cases, user pain points, defined our customers buying intentions. let's see solutions and recommendations from usability experts based on hundreds of studies.

Experts have specific recommendations and explain potential pains and gains.This is no silver bullet that can be applied and work in our project.

We will use these recommendations to apply most relevant ones according to our business, design and payment constraints.

I have chosen Baymard premium.
My constraints were: cart and checkout pages of similar products.These include shoes and clothes.

How the recommendations look like:

Who is Sophie?
Let's make her the Hero oh the day.
She well look and feel new design before anyone else would see )

What is she supposed to do?
She wants to buy a pair of shoes with delivery to London for her cousin's upcoming birthday. Sophie lives in Munich, prefers English interface and pays in EUR for the order.

Similar online purchasing experience
We assume that our Sophie has been making online purchases in local and global websites including in-store pickup. This means that we should also keep in mind certain purchasing patterns.

Overall shopping experience
Sophie doesn't buy using impulse triggers. She reads reviews (like above) as she wants to make a gift outstanding for her cousin. Saves the items for later considerations. Compares other items before purchase.

She is actively using mobile to shop for items and doesn't like to make more steps in purchase process than needed. Returns to website several times across mobile and web.

Possible flow on the current website
SHOW FLOW (wait a bit, I'm going to update)

Optimized flow
SHOW FLOW (wait a bit, I'm going to update)

Let's s see changes in detail.
Every next step is a possible conversion killer

I've experiences many analytics reports with visualization funnel.
Unfortunately, at every step I've seen so far, our customers leave cart or checkout page.

My idea is to minimize steps to goal. Success page in our case.
Specifically I mean is to provide all the necessary

From tech point of view, we can save our resources in the long run to develop and maintain 2 pages.

From product owner point of view, we can optimize these metrics:

These data is based on my 8 years experience.
-10% or number exit rates from the page

-5-10% or number of moving to different pages from the conversion funnel (eg. About us, Home page)
-10 % Overall abandonment rate across desktop, mobile web, mobile app, or tablet.

-15-20%
% Checkout abandonment click-through rate: the percent of recovery emails/messengers opened that result in a customer clicking and returning to your site.

% Average abandoned order value - Should test

Possible pain points after redesign.

While redesign we should be aware of existing returning customers.
When number of existing customers over 40% they can be sensitive to big changes in UI

Ideally redesign step by step to applying A/B test on 10% of audience (small segment)

If we have statistically significant outcomes that our conversion are down, so we manage a quick roll back to previous version.

Due to time constraints, more to come in the next few days:

User Flows
But not ordinary as everyone used to see.
I want to show user flows within goal metrics.

Interactions
I want to show how our customer interacts with elements like:
- Customer care
- Show more information by clicking on icon in relative block
- Show how user can interact with cart in the same page

More tests
- Basic accessibility testing
- Eye-tracking
- User testing on real prototype
- Gather feedback

Scalability
Solution can be applied on major e-commerce platforms and websites.
It meets major UX and usability guidelines based on my previous case studies.
Minimum integration efforts.

UI adapts perfectly to major screen sizes on PC, laptops and across a range of smartphones.
User friendly
All the best practices in UX combined on one page.
Business friendly
- All elements eventually impact on boosting metrics and conversion rate

- Less efforts on customer support. Flexible to content-in-context without leaving the page.

- Save money on development. Customizable to localization specific requirements.