From checkout to framework

Crocscheckout optimization

Sit back and get ready for the e-commerce journey.Story from simple redesign to checkout framework

Imagine a scenario

The project manager informs me that they are receiving several complaints from customers about how the checkout process page is performing bad and it's difficult to complete, compared to other companies that offer the same solution.

Let's break our goal into tasks. They will help me to work on scope.
● Identify the usability issues and analyze them to offer a better UX.● Provide improvement suggestions that solve the customers' problems and affect the conversion rate.● Clearly explain the way I reached conclusions about the usability issues I found.● Visualize solutions by means of wireframes with the improved checkout process to make it less painful for the user.● Make your proposal clear so that anyone can understand it.


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.

A bit of UX research

Let's dig deeper and check out for usability and online retail studies

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.


It's obvious that we can not influence on some of the business processes like too slow delivery or return policy.

Kyrylo, our CPO is concerned about conversion. What we can influence?

Wolfgang Meiers
Marketing manager bei InnoTrack, Dusseldorf

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


Let's dig deeper and check out for usability and online retail studies

Let's get back to the question regarding checkout abandonment process.
What are the metrics to track for the Cart and Checkout pages?

Annette Liebl
CMO bei Tess Machines, Berlin

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.


Before analysing checkout experience from UX and UI point of view, let's structure all information above.

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.

What are the typical complaints from Crocs' customers? Our goal is to determine the pain points on a way to the successful purchase.

Samuel Stromer
CEO bei LoveMyShoes, Bremen

"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 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

How would you design the better UI? We need consistent solution that could be scalable within our platform

Veronika Berg
CPO bei GiantPayment, Stuttgart

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.


US Cart


US Checkout

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.

Scenario seems reasonable. How you approach the design consistency within multiple possible scenarios and edge cases?

Martin Langers
CPO bei GiantPayment, Stuttgart

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

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

- Shipping address
- Billing address
- Order total

- Different carts depending on the country

- 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:


I've reviewed the same way: Neiman Marcus, J.C. Penney, Foot Locker, Victoria's Secret, Nordstrom, Ann Taylor, H&M, Adidas, Zalando, GAP, Marks & Spencer, ASOS, Sears, Nike and Urban Outfitters.

Time to roll the sleeves up and design for Sophie

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)

Seems interesting. Why did you combine cart and checkout together?

Miranda Mayers
CPO bei GiantPayment, Stuttgart

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.

% 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

Hope so. Tell me specifically what elements should affect final conversion rate.

Wolfgang Berg
VC bei SmartRetails, Dusseldorf


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.

Ok, I see. What are you going to do next in UX design process?

Wolfgang Berg
VC bei SmartRetails, Dusseldorf

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.

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

Just one more question. What are the benefits of your solution to deploy it?

Wolfgang Berg
VC bei SmartRetails, Dusseldorf

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.


My work with brands of different scale and prominent figures resulted in more than 4356 projects and ads campaigns.


I'm open to the possibility of cooperation with brands and artists. Let's create something great together!