{"id":7786,"date":"2019-07-11T15:36:37","date_gmt":"2019-07-11T14:36:37","guid":{"rendered":"https:\/\/uxstudioteam.com\/?p=7786"},"modified":"2022-11-30T12:01:36","modified_gmt":"2022-11-30T11:01:36","slug":"web-checkout","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/","title":{"rendered":"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate"},"content":{"rendered":"<p><span>Want to improve shopping cart abandonment rates in your online store? Not sure why your customers leave the site before the last step? A question we often hear: what are some web checkout page best practices? Are there some rules to follow? So many articles cover the rules. For us, Rule Number One is: Don\u2019t just blindly follow these. Always study the audience and design your web checkout process specifically to their needs. Here&#8217;s our detailed UX guide.\u00a0<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-7800\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-720x450.png\" alt=\"\" width=\"720\" height=\"450\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-720x450.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-768x480.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-1024x640.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-400x250.png 400w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured-1080x675.png 1080w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured.png 1600w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><!--more--><\/p>\n<p><span>Maybe the future of e-commerce lies with no checkout at all. Uber replaced the painful web checkout process by automatically charging the credit card when the customer receives the service or product. Not every product has got there yet. We still fear the \u201cshopping cart abandonment rate\u201d, an acute problem in e-commerce. <\/span><\/p>\n<h2><span>5 research methods to improve\u00a0<\/span><span>web checkout\u00a0<\/span><span>conversion rates<\/span><\/h2>\n<p><span>Don\u2019t fret a high abandonment rate \u2014 a large portion of this simply follows naturally from user behavior while shopping and browsing e-commerce sites.<\/span><\/p>\n<p><span>Many users just go window shopping, comparing prices, saving items for later, exploring gift options, or just playing around while they check the latest fashion or gadget trends. We can\u2019t avoid it. But you can do something to improve it. <\/span><\/p>\n<p><span>These <a href=\"https:\/\/uxstudioteam.com\/ux-research\/\">UX research<\/a> methods can help you with this, and these tips can help you better react to user frustration during the whole process.<\/span><\/p>\n<h2><span>1. Quantitative metrics for identifying the problem <\/span><\/h2>\n<p><span>Here at <\/span><a href=\"https:\/\/uxstudioteam.com\/\" target=\"_blank\" rel=\"noopener\"><span>our UX company<\/span><\/a><span>, we hold sessions with our clients about metrics. We decide which data to gather to determine the direction and assess the value of what we create. Informed in part by metrics, we make critical decisions around content, design and product development. <\/span><\/p>\n<p><span>But what do metrics tell us about the success or failure of checkout, the user experience, or design? Which metrics should we rely on? <\/span><\/p>\n<h3><b>Vanity metrics vs actionable metrics<\/b><\/h3>\n<p><span>Croll and Yoskovitz, the authors of <\/span><span><em>Lean <\/em>Analyics,<\/span><span> tell us to<\/span><span> definitely avoid <\/span><b>vanity metrics<\/b><span>. These numbers make you feel good but can also seriously mislead. Some examples:<\/span><\/p>\n<ul>\n<li><b>Total signups or total active users<\/b><span>: That will automatically rise over time, almost entirely unrelated to what you do.<\/span><\/li>\n<li><b>Time spent on product site \/ number of pages and hits:<\/b><span> If people spend time complaining on the support page or sorting through too many items on your page, those numbers say nothing about what to change. <\/span><\/li>\n<\/ul>\n<p><b>Actionable metrics<\/b><span>, on the other hand, help you react and take action. Check these out, although more come up in the book:<\/span><\/p>\n<ul>\n<li><b>Average shopping cart size: <\/b><span>The amount of money spent on a purchase. If shopping cart size averages \u20ac15 on a food ordering site, adding an extra \u20ac5 as delivery cost during web checkout could logically make people change their mind and abandon the order.<\/span><\/li>\n<li>The <b>effectiveness of recommendation engines:<\/b><span> How likely will a visitor add a recommended product to the shopping cart during checkout?<\/span><\/li>\n<li><b>Mailing list effectiveness: <\/b><span>Measures click-through rates and the ability to make buyers return and buy.<\/span><\/li>\n<li><span>More sophisticated retailers care about other metrics such as the <\/span><b>number of reviews written after buying a product<\/b><span> or of those who considered it helpful. <\/span><\/li>\n<li><b>Abandon rate during each phase of the web checkout funnel: <\/b><span>Does it occur while reviewing the cart or entering billing details?<\/span><\/li>\n<\/ul>\n<p>If you don\u2019t have data yet because you have just started to design your website, then do benchmarking. Baymayrd\u2019s site<span>, for example, gathers cart abandonment rate statistics of 40 different online retailers. This can make for a good start, but cultural differences in user behavior in different markets can also occur. <\/span><\/p>\n<p><span>Metrics paint only part of the picture: <\/span><i><span>What<\/span><\/i><span> type of problem might occur, <\/span><i><span>what quantity<\/span><\/i><span> does it reach, <\/span><i><span>where<\/span><\/i><span> does it occur, and <\/span><i><span>how does it change<\/span><\/i><span> with time. <\/span><\/p>\n<p><span>For the &#8220;<\/span><i><span>why&#8221;<\/span><\/i><span> to happen, we need qualitative measures. Google Analytics does not tell you that.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-7803 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/FrameMetrics-e1531320689460-720x426.png\" alt=\"Web Checkout Vanity Metrics vs Actionable Metrics\" width=\"720\" height=\"426\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/FrameMetrics-e1531320689460-720x426.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/FrameMetrics-e1531320689460-768x455.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/FrameMetrics-e1531320689460-1024x606.png 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/FrameMetrics-e1531320689460-1080x639.png 1080w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2><span>2. Finding the why\u2019s: User interviews and testing<\/span><b><\/b><\/h2>\n<p><span>We usually invite different types of users for discussions, new ones unfamiliar with the site and those who purchase regularly. We ask them about the context of their last shopping experience and the process of making decisions during each phase of shopping. <\/span><\/p>\n<p><span>This can reveal surprises about what people think and the psycho-emotional triggers of buying your product. The &#8220;Jobs to be done&#8221; method provides a good approach to building your interview script.<\/span><\/p>\n<p><span>We ask questions like:<\/span><\/p>\n<ul class=\"ul1\">\n<li><i>What made you start actively looking for the product? <\/i><\/li>\n<li><i>What did you do during the search phase?<\/i><\/li>\n<li><i>What made you decide to check the details of that product and to buy it?<\/i><\/li>\n<li><i>What were you thinking of when you paid? What happened after paying?<\/i><\/li>\n<\/ul>\n<p><strong>Usability testing<\/strong><\/p>\n<p><span>If you have ever heard the story of the <\/span><a href=\"http:\/\/snip.ly\/mfmq1#https:\/\/articles.uie.com\/three_hund_million_button\/\" target=\"_blank\" rel=\"noopener\"><span>300-million-dollar button<\/span><\/a><span>, you no doubt did so in the ROI of usability testing. They changed the \u201c<\/span>Registration\u201d button to \u201cContinue<span>\u201d with a simple message: \u201cYou do not need to create an account to make purchases on our site. Simply click \u2018Continue\u2019 to proceed to checkout.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-7790\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Form.png\" alt=\"Web-Checkout_Form\" width=\"638\" height=\"479\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Form.png 638w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Form-510x382.png 510w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/p>\n<p><span>To make your future purchases even faster, you can create an account during web checkout.\u201d And the result? The number of customers purchasing went up by 45%. <\/span><\/p>\n<p><span>During the usability test, we ask users to show us how they used the site previously, or we give them a test account and ask them to buy something.<\/span><\/p>\n<p><strong>Delivery options &#8211; An example<\/strong><\/p>\n<p><span>Talking to customers of an online bookstore, we learned for example that people get scared when we show them a long list of pick-up and delivery possibilities.\u00a0<\/span><\/p>\n<figure id=\"attachment_7795\" aria-describedby=\"caption-attachment-7795\" style=\"width: 641px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-7795 size-full\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Pickup-Options.png\" alt=\"Web-Checkout_Pickup-Options\" width=\"641\" height=\"252\" \/><figcaption id=\"caption-attachment-7795\" class=\"wp-caption-text\">The original structure of the delivery option choice page<\/figcaption><\/figure>\n<p><span>They actually consider three things when <strong>deciding about delivery<\/strong>:<\/span><\/p>\n<ol>\n<li><span><strong>Distance:<\/strong> How far should they go to pick it up (home delivery or from a pickup point somewhere in the city)? <\/span><\/li>\n<li><span><strong>Time:<\/strong> How long does it take to get the product?<\/span><\/li>\n<li><span><strong>Price:<\/strong> How much does it cost?<\/span><\/li>\n<\/ol>\n<p><span>They make a priority order. If they need the book the next day as a present for a friend, they\u2019ll agree to pay more for quick home delivery, otherwise, they are willing to walk to the shop and pick it up for free. So we added a filter by distance and time and a sort by price. In the end, they could choose from a shorter but more relevant list.<\/span><\/p>\n<figure id=\"attachment_6764\" aria-describedby=\"caption-attachment-6764\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-6764\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/image14-1.gif\" alt=\"E-commerce UX Case Study Societe Store Checkout\" width=\"600\" height=\"328\" \/><figcaption id=\"caption-attachment-6764\" class=\"wp-caption-text\">Desktop prototype of the checkout process of Societe Store. Read case study <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/e-commerce-ux\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/figcaption><\/figure>\n<p><span>We also<strong> test competitors\u2019 sites<\/strong> with users. It provides a great way to learn from others\u2019 mistakes ;).<\/span><\/p>\n<h2><span>3. Gathering insights from customer support <\/span><\/h2>\n<p><span>Not a scientific research method, but one can simply gather, group, and measure the typical cases when people contact support. This can help in understanding problems and reveal what to change.<\/span><\/p>\n<p><span>You can also ask your customer service employees to throw in a UX question while solving various customer service tickets. Ask about anything from the website or application ease-of-use, the product browsing process, or the usefulness of product descriptions in making a purchase.<\/span><\/p>\n<p><span>Also, the very questions your customers ask should pin your attention to specific problems. Do they frequently ask about obscured layout preventing customers from making a purchase or script errors blocking certain features during cross-platform or cross-browser usage?<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-7820\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1-720x288.jpg\" alt=\"Web Checkout Research Customer Support\" width=\"720\" height=\"288\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1-720x288.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1-768x307.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1-1024x410.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1-1080x432.jpg 1080w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/CallCenter2a-1.jpg 1920w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<h2><span>4. Create a customer journey to draw a line between the dots<\/span><\/h2>\n<p><span>A journey map can get to the heart of the user experience. Drawing data from analytics, interviews, tests and customer support together into a journey map can illustrate why an experience frustrates or delights people, and where opportunities to improve the product may lie. <\/span><\/p>\n<p><span>You can analyze the different touch-points where people can get in contact during the phase of shopping and the alignment between user needs and the service you provide. <\/span><\/p>\n<figure id=\"attachment_7796\" aria-describedby=\"caption-attachment-7796\" style=\"width: 600px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-7796 size-full\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Stats.png\" alt=\"Web-Checkout_Shopify-Journey-Map\" width=\"600\" height=\"417\" \/><figcaption id=\"caption-attachment-7796\" class=\"wp-caption-text\">See as example Shopify&#8217;s journey map. Source: shopify.com<\/figcaption><\/figure>\n<h2><span>5. Test it on lots of users, and finalize it based on the results<\/span><\/h2>\n<p><span>Once you have a possible new solution for the defined problem, make an <\/span><span>A\/B<\/span><span> or <\/span><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/multivariate-testing-vs-ab-testing\/\" target=\"_blank\" rel=\"noopener\"><span>multivariate<\/span><\/a><span> test, and compare the results. You can also combine it with previous methods, like usability testing both variations, and clean up the design and <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/ux-copywriting\/\">copy<\/a> before publishing for the A\/B test.<\/span><\/p>\n<h2><span>Tips for humanizing your e-commerce site <\/span><\/h2>\n<p><span>\u2026.as we said, don\u2019t just follow them blindly. Carry out your research and apply only the possibly relevant ones. <\/span><\/p>\n<p><span>Let\u2019s say the\u00a0<a href=\"https:\/\/uxstudioteam.com\/ux-blog\/customer-journey-mapping\/\" target=\"_blank\" rel=\"noopener\">customer journey<\/a> consists of three main steps:<\/span><\/p>\n<ul>\n<li><span>Step 1: Finalizing cart content and deciding about purchase<\/span><\/li>\n<li><span>Step 2: Decision to pay<\/span><\/li>\n<li><span>Step 3: Actions after payment<\/span><\/li>\n<\/ul>\n<h3><span>Step 1. Finalizing cart content and deciding about purchase<\/span><\/h3>\n<p><span>An effective e-commerce web checkout experience starts with a well-designed cart.<\/span><\/p>\n<p><span>So, what function or purpose does the cart serve? We can easily assume that by the time a customer is viewing their shopping cart, they\u2019ll check out next. <\/span><\/p>\n<p><span>In reality, when buying a number of items, customers (including me) often use the cart as a \u201cholding area\u201d from which they make a final decision about what to ultimately keep or discard. Here, they only pick from the selected items right before payment (or even after, when they receive the product and decide not to send it back). <\/span><\/p>\n<p><span>At this phase, they might feel indecisive or unsure. They might discuss the situation with others to eliminate any doubts. They might want to put off the decision, expecting to get more information for the decision later on.<\/span><\/p>\n<figure id=\"attachment_7787\" aria-describedby=\"caption-attachment-7787\" style=\"width: 539px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-7787\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Abercrombie.png\" alt=\"Web-Checkout_Abercrombie\" width=\"539\" height=\"274\" \/><figcaption id=\"caption-attachment-7787\" class=\"wp-caption-text\">On the Abercrombie &amp; Fitch site, you can easily flick through the cart content list to edit or remove items.<\/figcaption><\/figure>\n<h4><span>Suggestion 1: Make the cart always visible and modifiable<\/span><\/h4>\n<p><span>Unfortunately, many stores have still not adopted this feature. Imagine throwing products into a bottomless pit as you shop in a real store, trying to find the physical checkout without any signs, and then having to throw all the stuff (most of which you had already forgotten about) onto the counter only after you get there.<\/span><\/p>\n<h4><span>Suggestion 2:\u00a0<\/span><span>Keep item images visible<\/span><\/h4>\n<p><span>It can cause even more confusion when customers decide to enter the checkout funnel and all the fun suddenly disappears. No pictures, just boring lists and <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/form-design\/\">forms<\/a>. Keep showing images of the product(s) they are buying throughout the entire web checkout process \u2013 it motivates them best to keep going through the boring stuff.<\/span><\/p>\n<h4><span>Suggestion 3:\u00a0<\/span><span>Release the pressure of decision and involve others in the process<\/span><\/h4>\n<p><span>Some users feel distressed by the idea of soon having to pay for the products they like. Maybe they have not mentally reached the stage of paying yet, or they aren\u2019t even paying for it themselves. Some best practices to resolve this type of problem:<\/span><\/p>\n<ul>\n<li><span>Let them save items as favorites from the cart, or add the possibility to share their cart content or wish list with friends or send it by email. <\/span><\/li>\n<li><span>Keep the items in the basket a while and give them a discount. <\/span><\/li>\n<li><span>Let them split the payable amount with others. Read our <\/span><span>case study<\/span><span> about <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/split-expenses\/\">split expenses<\/a> solutions. <\/span><\/li>\n<li><span>Make the return policy quickly reachable, and save them the pressure of fearing the consequences of their decision<\/span><\/li>\n<\/ul>\n<figure id=\"attachment_7797\" aria-describedby=\"caption-attachment-7797\" style=\"width: 541px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-7797\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_Warby-Parker.png\" alt=\"Web-Checkout_Warby-Parker\" width=\"541\" height=\"286\" \/><figcaption id=\"caption-attachment-7797\" class=\"wp-caption-text\">The online retail company, Warby Parker, recognized that people don\u2019t like buying sunglasses online because of the high cost and the need to try them on to make a final decision. So they\u2019ve added the \u201cTry at home for free\u201d button. It sounds much better than \u2018Return policy\u2019.<\/figcaption><\/figure>\n<h4><span>Suggestion 4:\u00a0<\/span><span>Do the math for your customer and make costs transparent<\/span><\/h4>\n<p><span>Many users have a spending limit in mind. If they pick an item just within that line, and must later add shipping or VAT, they overstep their budget and abandon the process. What would resolve this?<\/span><\/p>\n<ul>\n<li><span>Show them the exact cost from the beginning, indicating shipping cost. Make it clear how much more they need to spend until they qualify for free shipping. <\/span><\/li>\n<li><span>Add the coupon savings input field close to the cost so they can easily check how much the end amount would come to with the discount. They might want to buy more if they can save on free shipping or get 25% off. <\/span><\/li>\n<\/ul>\n<figure id=\"attachment_7793\" aria-describedby=\"caption-attachment-7793\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-7793\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_information-720x406.png\" alt=\"Web-Checkout_information\" width=\"720\" height=\"406\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_information-720x406.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_information-768x433.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_information.png 778w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-7793\" class=\"wp-caption-text\">Hextom provides a \u201cFree Shipping Bar\u201d that can be built into a Shopify account, informing users how much more they need to spend until they qualify for free shipping.<\/figcaption><\/figure>\n<h3><span>Step 2. Decision to pay<\/span><\/h3>\n<p><span>At this phase, keep people focused while they deal with data and money.<\/span><\/p>\n<p><span>To do that, keep everything short and quick while sounding supportive and trustworthy. Andrew Coyle wrote an <\/span><a href=\"https:\/\/uxdesign.cc\/design-better-forms-96fadca0f49c\"><span>amazing article<\/span><\/a><span> on how to avoid some of the common mistakes designers make when designing web forms. <\/span><\/p>\n<p><span>Payment pages come in many types and forms. The <\/span><a href=\"https:\/\/baymard.com\/blog\/accordion-checkout-usability\"><span>most typical<\/span><\/a><span> are the accordion, the one-page, and the multiple-page formats. Each has its pros and cons, but whichever you pick for your site, give the user an overview option and different payment options like <a href=\"https:\/\/www.sofi.com\/credit-card\/\" target=\"_blank\" rel=\"noopener\">credit card<\/a> or cash on delivery. <\/span><\/p>\n<p><span>They should be able to flick through it quickly looking at a summary of their input data and going back repeatedly to edit data without the fear of missing anything or putting the data in the wrong hands. <\/span><\/p>\n<figure id=\"attachment_7794\" aria-describedby=\"caption-attachment-7794\" style=\"width: 720px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-7794 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_One-Page-Popup-e1531310342943-720x547.png\" alt=\"Web-Checkout_One-Page-Popup\" width=\"720\" height=\"547\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_One-Page-Popup-e1531310342943-720x547.png 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_One-Page-Popup-e1531310342943-768x584.png 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_One-Page-Popup-e1531310342943.png 912w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption id=\"caption-attachment-7794\" class=\"wp-caption-text\">Wolt decided on a one-page popup checkout page. You can easily check everything and edit data.<\/figcaption><\/figure>\n<h3><span>Step 3. Actions after payment<\/span><\/h3>\n<p><span>Your customers don\u2019t want to buy items \u2014 they want to own them. So, keep up their enthusiasm even after payment with a thank you page and an introduction to the next steps. Some best practices:<\/span><\/p>\n<ul>\n<li><span><strong>Show your gratitude.<\/strong> This means you appreciate their efforts. <\/span><\/li>\n<li><span><strong>Make them feel good.<\/strong> On their thank you page, a Hungarian bookseller highlights that buying an ebook instead of a print version saves a tree. This cute emotional design trick helps the buyer feel good after a hard decision process. <\/span><\/li>\n<li><span>On the thank you page and even during delivery,<strong> explain what happens next<\/strong> before they get their product. <strong>Provide clear instructions<\/strong>. Remind them to check their email (spam\/junk included) to access their goodies. Send emails about the delivery status or enable order tracking. <\/span><\/li>\n<\/ul>\n<figure id=\"attachment_7789\" aria-describedby=\"caption-attachment-7789\" style=\"width: 315px\" class=\"wp-caption alignnone\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-7789 size-full\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/Web-Checkout_EXample-e1531310928220.png\" alt=\"Web-Checkout_EXample\" width=\"315\" height=\"525\" \/><figcaption id=\"caption-attachment-7789\" class=\"wp-caption-text\">Wolt lets you easily check your food\u2019s location and ETA. I really like this trick because it always makes me leave this page open to continuously check the details. It also readily keeps me there until the review possibility appears.<\/figcaption><\/figure>\n<h2><span>In conclusion<\/span><\/h2>\n<p><span>Context holds the key, so gather all the information and do your research. This clearly shows the influences on your users\u2019 behavior and decision-making process, as well as the triggers and fears they face. Conclude everything in a journey and humanize the design with specialized supportive solutions that make them feel good.<\/span><\/p>\n<h2><span>Take the next step to improve your website\u2019s UX<\/span><\/h2>\n<p>Planning a design or a research project soon?\u00a0<a href=\"https:\/\/uxstudioteam.com\/contact\/\">Get in touch with UX studio<\/a>\u00a0and find out how we can help you conduct usability research and create a powerful UI that will appeal to your target audience.<\/p>\n<p>Users drop from your website and the conversion rate is low? UX audit might help pinpoint usability flows in your product and define key steps to improve its performance. Learn more about\u00a0<a href=\"https:\/\/uxstudioteam.com\/ux-blog\/ux-audit\/\">UX audit<\/a>\u00a0and how it can help you improve your product&#8217;s usability.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to improve shopping cart abandonment rates in your online store? Not sure why your customers leave the site before the last step? A question we often hear: what are some web checkout page best practices? Are there some rules to follow? So many articles cover the rules. For us, Rule Number One is: Don\u2019t&hellip;<\/p>\n","protected":false},"author":15,"featured_media":7800,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[28,36],"tags":[],"table_tags":[],"coauthors":[58],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate - UX studio<\/title>\n<meta name=\"description\" content=\"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Here&#039;s How To Optimise Your Online Shopping Checkout Process\" \/>\n<meta property=\"og:description\" content=\"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-11T14:36:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-30T11:01:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u00c1gnes Orsolya Kiss\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Here&#039;s How To Optimise Your Online Shopping Checkout Process\" \/>\n<meta name=\"twitter:description\" content=\"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u00c1gnes Orsolya Kiss\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/\"},\"author\":{\"name\":\"\u00c1gnes Orsolya Kiss\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/3e08ed6118882fda3b10204158ee714b\"},\"headline\":\"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate\",\"datePublished\":\"2019-07-11T14:36:37+00:00\",\"dateModified\":\"2022-11-30T11:01:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/\"},\"wordCount\":2540,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"UX Design\",\"UX Research\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/\",\"name\":\"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate - UX studio\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2019-07-11T14:36:37+00:00\",\"dateModified\":\"2022-11-30T11:01:36+00:00\",\"description\":\"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/3e08ed6118882fda3b10204158ee714b\",\"name\":\"\u00c1gnes Orsolya Kiss\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/558c7c58bc4202ad34e8171cf93f9f3f\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c74ee52efa5a4b73ee82d6e0962fce88?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c74ee52efa5a4b73ee82d6e0962fce88?s=96&d=retro&r=g\",\"caption\":\"\u00c1gnes Orsolya Kiss\"},\"description\":\"UX researcher helping teams learn about users and build better digital services, faster. Fan of social innovation, electronic music and discovering sweet spots in our world. No small talk.\",\"sameAs\":[\"http:\/\/uxstudioteam.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate - UX studio","description":"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/","og_locale":"en_US","og_type":"article","og_title":"Here's How To Optimise Your Online Shopping Checkout Process","og_description":"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2019-07-11T14:36:37+00:00","article_modified_time":"2022-11-30T11:01:36+00:00","og_image":[{"width":1600,"height":1000,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/07\/quick-add-to-cart-featured.png","type":"image\/png"}],"author":"\u00c1gnes Orsolya Kiss","twitter_card":"summary_large_image","twitter_title":"Here's How To Optimise Your Online Shopping Checkout Process","twitter_description":"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"\u00c1gnes Orsolya Kiss","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/"},"author":{"name":"\u00c1gnes Orsolya Kiss","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/3e08ed6118882fda3b10204158ee714b"},"headline":"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate","datePublished":"2019-07-11T14:36:37+00:00","dateModified":"2022-11-30T11:01:36+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/"},"wordCount":2540,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["UX Design","UX Research"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/web-checkout\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/","name":"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate - UX studio","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2019-07-11T14:36:37+00:00","dateModified":"2022-11-30T11:01:36+00:00","description":"Why do customers abandon the cart in your online store? What metrics matter in optimizing web checkout? Here are some UX design best practices.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/web-checkout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"5 Methods to Improve\u00a0Your Web Checkout\u00a0Conversion Rate"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/3e08ed6118882fda3b10204158ee714b","name":"\u00c1gnes Orsolya Kiss","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/558c7c58bc4202ad34e8171cf93f9f3f","url":"https:\/\/secure.gravatar.com\/avatar\/c74ee52efa5a4b73ee82d6e0962fce88?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c74ee52efa5a4b73ee82d6e0962fce88?s=96&d=retro&r=g","caption":"\u00c1gnes Orsolya Kiss"},"description":"UX researcher helping teams learn about users and build better digital services, faster. Fan of social innovation, electronic music and discovering sweet spots in our world. No small talk.","sameAs":["http:\/\/uxstudioteam.com"]}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/7786"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=7786"}],"version-history":[{"count":21,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/7786\/revisions"}],"predecessor-version":[{"id":15107,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/7786\/revisions\/15107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/7800"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=7786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=7786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=7786"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=7786"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=7786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}