From checkout to framework
Crocs checkout 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.
Goal is to increase conversion rate by improving the checkout process.
Let's break our goal into tasks. They will help me to work on scope.

  1. Identify the usability issues and analyze them to offer a better UX.
  2. Provide improvement suggestions that solve the customers' problems and affect the conversion rate.
  3. Clearly explain the way I reached conclusions about the usability issues I found.
  4. Visualize solutions by means of wireframes with the improved checkout process to make it less painful for the user.
  5. Make your proposal clear so that anyone can understand it.
Global Goal is conversion rate
That's our North Star in E-commerce space
cover from gosquared blog
To improve it, we should measure it.

Disclaimer: I don't have any real statistics, as well as tech and design constraints.
I'll set them myself to find the optimal solutions within limitations.
Let's set the average conversion rate to 1.6% from non-branded organic search traffic.

This number is estimated by Google Analytics benchmark data for Jan through March 2019 for B2C eCommerce websites.


This report is a baseline as we have to understand the similar online store conversion rate data. "Online retailers whose data was benchmarked include Donald Russell, Margaret Howell, Christopher Ward, Loake Shoes, Micro-Scooters, Van Dal Shoes, Herdy, Perfect Moment, Force 4, Bella di Notte, Auree Jewellery and This Works."


For example, if we had 139,492 visitors and 2,305 conversions (successful page after the transaction) last month, our CR is 1.6%

Calculations for CR
(conversions / total visitors) * 100% = (%) conversion rate
(2,305 conversions / 139,492 total visitors) * 100% = 1.6% conversion rate
Why increasing conversion is important?

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 sub-goals

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

  1. 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.


  2. What are the reasons for cart and checkout abandonment?
    We'll check it out below.


  3. 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.

  4. Why these KPIs matter to focus on them?
    If we impact on these metrics, all of them will eventually influence the conversion rate.

«Kyrylo, why we ask these questions?»
Katharina Wiedelberg
Project manager bei Welfare Desicions, Munich
We ask these questions to generate the hypothesis on how to improve the UX and UI.
A bit of UX research
Let's dig deeper and check out for usability and online retail studies
cover from fowlam
Cart and checkout abandonment is astonishing
69.57% – 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 high
    Make it transparent: UI
    Eg Shipping and return information make clear and easy to find.

  • The site wanted me to create account
    The way to avoid creating: UX

  • Too long/complected checkout process
    Optimize checkout (forms, typography, steps): UX

  • I couldn't see/calculate total order cost up/front
    Make it transparent: UI

  • I didn't trust the site with my credit card information
    Make it credible: UX / UI / Copywriting

  • The website had errors/crushed
    Tracking errors and log them: Analytics, Avoiding mistakes: UX / UI

  • They were not enough payment methods
    Integration: UX / UI

  • The credit card was declined
    Avoiding confusion and offer alternatives: UX / UI

  • Re-entering info (eg card, shipping)
    Avoiding confusion and offer saving: UX

  • Discount / Promo code doesn't work
    Avoiding confusion and offer another code or solution: UX

  • As well as 30+ reasons
DATA is the FUEL
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.
Connecting payment platform with the checkout
Now we have a starting point to optimize our customer experience.

We should also pay attention to optile solutions to meet our users' expectations.


Goal: combine optile solutions with UX best practices to reach our main goals


Payment processing


At optile we state the following in terms of this design challenge:scale faster to new markets

  • freedom in choosing your payment setup, ie variety of localized payment options to their international customers

  • unrestricted number of payment methods and providers

  • desired payment mix and smooth one-click payments


unify all payment-related processes

  • streamlined payment processes via open APIs

  • one-time implementation for all payment providers worldwide


provide intelligent optimization tools to boost conversion

  • personalized checkout experience

  • making each payment go through – no technical errors or expired credit card dates should stand in the way of successful payments

  • payment data is safely stored for their next purchase

  • Dynamic Payment Page & Personalization

  • One-Click & Express Checkout

  • Smart Registrations, Secure Storage & Tokenization


For now we have defined Goals, metrics and optile's main capabilities.

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

Also, we should include payments, different issues that may occur, and purchasing context of customer.
Structurizing
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 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 paid."
Peter C. about deilvery expectations problems
"I have purchased a few pair of Crocs and really enjoy them. I decided to go straight to Crocs and purchase, same size. A little different style. Came to me too short and not wide enough. So I sent them back. $7.95 to send back, no more online purchase for Crocs. Not my fault they made them different than the other pairs I have. Good Bye Crocs online. Donna **"
Donna. about sizing issue
" I was so happy when placing my first order, that the next day I went ahead and bought more and more. I was planning to visit my family in Puerto Rico and was happily surprised to learn Crocs delivers to Puerto Rico through FedEx. I figured I could buy gifts for my family members and have them sent to my mom's address. To my frustration, upon my arrival packages were not received, even when I bought them one month in advance. Shipping is slow because they ship by boat and not by plane. And like Trump said, is an island surrounded by water a lot of water, an ocean a big ocean.

I stayed for two weeks and two of my three packages arrived, but at this time I had already spent money buying presents for my family. The third package was delivered but I had already left the island. I tried to get customer service for help, at least to get a refund for the order I did not receive, but is very hard to come to an understanding... they asked the same questions again and again and were not eager to help. So just be aware that free shipping takes forever... be ready to wait and wait as you were ordering from China."
Martin L. about Shipping to another address
"Worst customer service I have encountered. Purchased two pairs of kids Crocs, one pair was out of stock but you wouldn't know by looking at the invoice they sent. Still charged for two pairs. Called twice never had a call answered after 45+ minutes. Emailed, first response stated don't worry you haven't been charged however that was incorrect, provided proof that I was invoiced and the paypal receipt proving. Agreed to a refund another 14+ days to go through and 16 days later still nothing. I have lodged a dispute with paypal they didn't bother responding. I have now escalated to Fair trading seems that they feel it's ok to take money that isn't rightfully theirs."
Anabella G. about Shipping to another address
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' shoes" 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
Australia Cart
Australia Checkout
Germany Cart
Germany Checkout
Brazil Cart
Brazil 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
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:
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.

  • -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
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.

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
Just one more question. What are the benefits of your solution to deploy it?
Wolfgang Berg
VC bei SmartRetails, Dusseldorf
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.
Share your thoughts
I love to hear your experience and to discuss possible improvements to this solution
Comments
E-mail
Made on
Tilda